Quick question about specifying the size of images in pixels:
<img src="/logo.jpg" alt="logo" width="200px" height="120px" />
or
<img src="/logo.jpg" alt="logo" width="200" height="120" />
I've been always putting in the px but recently noticed that very few people do this. Am I better off leaving that out? Does it matter one way or the other?
As far as I know, you do not add the px label to width/height attribute values on the img tag itself, and I believe (though could be wrong) it's because pixels are used regardless. In CSS, however, one may use different units to specify width and height, therefore it is appropriate to add the label when using CSS.
I usually leave it out. As not often is the case I use <img> elements. But, it is better practice to place the width and height in the <img> tag so the browser doesn't have to calculate these dimensions.
Could not find any information that verifies this but I would use integers without a unit (if not percentage) in HTML and use "px" in CSS, except for zero values where it´s more correct to leave out the unit.
http://www.w3.org/TR/CSS2/visudet.html#the-width-property
Use css to consider the the size of the image:
CSS:
.logo {
width: 200px;
height: 120px;
}
HTML:
<img src="/logo.jpg" alt="logo" class="logo" />
I would continue to specify the size in pixels. You probably don't need to, but I think you're supposed to according to web standards. Specifying the size in pixels is definitely not going to hurt your code, so leave it there.
Related
I have an image tag. I tried to set the max height and width property to 600 px. Now if the image size is less than it, it increases the image size. I only want to have the max height and width only if image is more than 600 px.
<img src="8.jpg" style="max-height: 600px;max-width:600px;/">
It works proper, can you make a fiddle with wrong example?
<img src="http://www.waltereul.de/walter-eul-pictures/walter-eul_100x100_10.jpg" style="max-height: 200px;max-width:200px;/">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif" style="max-height: 200px;max-width:200px;/">
example
For me it looks like your img-tag is affected by another css-rules which affect the width/height of your images. I would suggest to use the developer tools of your browser to check which css-rules affect your img-tags (Tutorial if needed: https://developer.mozilla.org/en-US/Learn/Discover_browser_developer_tools).
Also in your code example above, the slash should be outside of your style-attribute, like this:
<img src="8.jpg" style="max-height: 600px;max-width:600px;" />
max-width purpose is to limit a large resolution image into specified size.
so, basically max-width itsef can't force a smaller images to enlarge.
i bet the images are affected by other CSS. as stated:
"The max-width property is used to set the maximum width of an element.
This prevents the value of the width property from becoming larger than max-width." - http://www.w3schools.com/cssref/pr_dim_max-width.asp
please try This one:
One method
<img src="8.jpg" style="max-height: 200px;max-width:200px;/">
another one method like this:
<img src="8.jpg" />
Css Code:
img{
width:100%;
max-width:600px;
}
I've got a long page, built with Angular. The images on the page are lazy-loaded so that the src is not set until the image is scrolled into view.
The container is flexible and the images should never scale larger than their dimensions (which I know and can set on a style attribute)
Right now I've having issues getting the images without a set source to scale properly.
TL;DR
I want <img src='pic.jpg'/> and <img src=''/>to take up the exact same amount of space inside a flexible container with maximum sizes.
DEMO: http://codepen.io/chrismbarr/pen/xGgGRq?editors=110
HTML (this will be generated from JavaScript where we know the dimentions ahead of time)
<div class="container" style='max-width: 500px; max-height: 700px;'>
Image with a source
<img src="http://lorempixel.com/500/700/cats/2/" />
</div>
<div class="container" style='max-width: 500px; max-height: 700px;'>
Image with no source
<img src="" />
</div>
CSS
img{
display:block;
max-width: 100%;
}
img[src=''],
img:not([src]){
//no image source
height: 100%;
width: 100%;
}
Here's a demo of the image sizes being hard-set so they are no longer flexible. This is what I want to avoid: http://codepen.io/chrismbarr/pen/JdEYMe
In the case that you know the dimensions of every image ahead of time, I almost always recommend the combination of a plain ol' <div> and the background-image property. You don't have to pander to the idiosyncrasies of the <img> tag, and you still get support for animated .gifs.
I whipped up this quick Codepen to give you a feel. I use a directive to set the width and height, which are passed into an isolate scope, then set the background-image property when I detect the directive top offset is less than the height of the window. Quick, dirty, but simple implementation of what I think you're going for.
Advantages:
Aforementioned reprieve from dealing with the ever cantankerous img tag.
Ability to add some neat hover effects (trying hovering over one of the cats in the Codepen).
Drawbacks:
Detecting image load with a background image isn't quite as easy as using the img.onload callback available for image tags. You could likely create directive template that used a img to squeeze out this functionality. Up to you.
Hope this helps!
EDIT: As Chris mentioned in a comment, this technique still doesn't address the aspect ratio issue when the image containers are of varying widths. To solve this I get to whip out one of my favorite CSS tricks, maintaining aspect ratio with padding-bottom, written about by Nicolas Gallagher.
While unfortunately I don't have time to add the fix into my original pen (headed to work), I did create this to show an implementation using the same images. The padding-bottom of an element will proportionally scale as the width of an element increases or decreases, thus maintaining the element's aspect ratio.
that's kinda simple what you do is
<img src="img.jpg" width"20px" height"20px"/>
or any number of pixels and do the same with he other one
<img src="" width"20px" height"20px"/>
I was wondering if in the width and height <img> attributes, I could specify width and height as percentages?
Well, I guess that is obvious, because when I try so, it resizes, but it appears to skew the quality of my image.
Here is an example of my markup with fixed attributes:
<img src="#" width="346" height="413">
Now, while trying to scale this down, say by half, via percentages:
<img src="#" width="50%" height="50%">
I get something completely different than:
<img src="#" width="173" height="206.5">
I think I'm just fundamentally mistaking my percentage markup or something because there is a noticeable difference between my second and third example visually.
Note: it is invalid to provide percentages directly as <img> width or height attribute unless you're using HTML 4.01 (see current spec, obsolete spec and this answer for more details). That being said, browsers will often tolerate such behaviour to support backwards-compatibility.
Those percentage widths in your 2nd example are actually applying to the container your <img> is in, and not the image's actual size. Say you have the following markup:
<div style="width: 1000px; height: 600px;">
<img src="#" width="50%" height="50%">
</div>
Your resulting image will be 500px wide and 300px tall.
jQuery Resize
If you're trying to reduce an image to 50% of its width, you can do it with a snippet of jQuery:
$( "img" ).each( function() {
var $img = $( this );
$img.width( $img.width() * .5 );
});
Just make sure you take off any height/width = 50% attributes first.
You can set one or the other (just not both) and that should get the result you want.
<img src="#" height="50%">
Here is the difference:
This sets the image to half of its original size.
<img src="#" width="173" height="206.5">
This sets the image to half of its available presentation area.
<img src="#" width="50%" height="50%">
For example, if you put this as the only element on the page, it would attempt to take up 50% of the width of the page, thus making it potentially larger than its original size - not half of its original size as you are expecting.
If it is being presented at larger than original size, the image will appear greatly pixelated.
Try use scale property in css3:
75% of original:
-moz-transform:scale(0.75);
-webkit-transform:scale(0.75);
transform:scale(0.75);
50% of original:
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
width="50%" and height="50%" sets the width and height attributes to half of the parent element's width and height if I'm not mistaken. Also setting just width or height should set the width or height to the percentage of the parent element, if you're using percents.
Given the lack of information regarding the original image size, specifying percentages for the width and height would result in highly erratic results. If you are trying to ensure that an image will fit within a specific location on your page then you'll need to use some server side code to manage that rescaling.
From W3Schools
The height in percent of the containing element (like "20%").
So I think they mean the element where the div is in?
There is actually a way to do this with html only. Just sets:
<img src="#" width height="50%">
Is it possible to downsize an image in html while keeping proportions?
I know I can use height and width attribute of img tag, but I don't know the image size.
Please don't tell me to find out the image size on the server, or that the right way to do this is to generate thumbnails on the server side and that is saves bandwidth and improves page loading time.
I know what the ideal solution is. But I want quick and dirty...
Quick and dirty: just set one of the attributes in img tag:
<img src="my.jpg" width="200" /> or <img src="my.jpg" height="200" />
Yes. Just use height or width.
But quick and dirty is very dirty.
Remember also that you can give a percentage of the original width / height as value as well, for instance:
<img src="my.jpg" width="50%" />
If I know the height and width of an image that I'm going to display with an image tag, should I include the height and width attributes, or just put the information in CSS? Or both?
Ex.
<img src="profilepic.jpg" height="64" width="64" />
or
<img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" />
or
<img src="profilepic.jpg" style="height: 64px; width: 64px;" />
According to Google Page Speed, you should always define the width and height in the image tag. But, to validate you can't use the style tag.
Also, you should always specify the same height and width as the actual image so the browser doesn't have to do any modifications to it like resizing.
I'd suggest doing it
<img src="..." height="20" width="50">
Edit: Someone suggested in the comments that it would be faster to just not add any attributes. According to Google (not that they are the end all of browser knowledge):
If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML tag, or in CSS. - Read More
Given that, you could do the img dimensions in CSS, but to validate you would have to do it in a CSS file, not inline.
BTW, Google Page Speed is a series of tips focused on rendering the page faster.
You should always specify the height and the width of an image if only to help the browser lay the page out even before the image has been downloaded.
See 13.7 Visual presentation of images, objects, and applets in the HTML 4.01 spec:
The height and width attributes give
user agents an idea of the size of an
image or object so that they may
reserve space for it and continue
rendering the document while waiting
for the image data.
They are recommended and not required but you really, really should specify them ;-)
Also, please make sure the dimensions you specify actually match the dimensions of the image.
There is nothing worse than waiting for a page to download just because those 400x300(!) images are in reality more like 4000x3000 at 95% quality.
Yes you should specify the dimensions, so user agents know beforehand the size before the image fully loads so a layout couldn't potentially look broken if it relies on the loaded image's dimensions. In addition, if you're relying on IE6's filter property to insert png's you will need those dimensions.
This answer is now dated and I wouldn't make the same recommendation as I did back in 2009 with modern browsers.
It doesn't really matter which one you use, but I would recommend using only one.
I would recommend the attribute over the css solution as it is more compatible to older browsers and people with styles disabled.
Actually you don't have to specify them. Accordingly to w3c specification you use them only to override default values that are embedded in the image file and are read by the browser. When used will scale the original image to given sizes so putting them is making an extra calculus for the browser.
The height and width attributes give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.
<img src="profilepic.jpg" alt="image" />