CSS/HTML: Does using max-height on images help HTML rendering?

Question

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?

Answer 1

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.