I just finished reading YSlow recommendation to always define the image dimensions (height/width) to improve HTML rendering performance.
However, I don't know the image dimension I'm linking too.
What I do know is that the height will never be larger than 200px and the width will never be larger than 300px
Would I be a benefit if I defined (CSS) :
img {max-height: 200px; max-width: 300px}
For HTML performance rendering?
Images with different proportions would not look good, since they would be scaled. I would not recommend this.
Setting the max height and width of an image in the css will make the img tag resize the img based on the contraints but if you are using a backend scripting language like asp.net or php you an use their img libraries to scale the image on the server side an either save then to the hard drive to use later or resize on the fly.
You can check out http://shiftingpixel.com/2008/03/03/smart-image-resizer/ for php as a starter
Or if you are using .NET you can check out this link http://weblogs.asp.net/gunnarpeipman/archive/2009/04/02/resizing-images-without-loss-of-quality.aspx
No, setting the max-width and max-height doesn't improve the performance.
The reason for specifying the width and height of images is that the browser will know exactly how much space the image will take up. If you leave the image size unspecified, the browser has to reflow the layout when the image loads.
You can see this nasty effect on some pages, where the page is first loaded with no placeholders for images, and then the contents jumps around making place for the images as they load.
If you can't specify the size of some images, don't worry too much about it. Just make sure that the layout behaves nicely when the images load, and don't jump around too much.
In this case I would definitely not set the height and width of the image since you don't know what it is going to be. If you know what the size is going to be then setting is good because it will cut down on the amount of repainting and reflow that the browser has to do when rendering a page.
The less it has to do then the better the performance will be on the client side because you are not making the browser work too hard.
Stoyan Stefanov explained it really well in a recent blog post
I think You'd rather want to wrap that <img> into a <span> or <div> element with max-height and max-width set. Also, it ( span or div ) should have overflow:hidden set so the image doesn't go out of the div's range.
It definitelly isn't recommended to set these setting directly to image because You'll get different and slower rendering in different browsers.