Does specifying image size in CSS allow the browser to do layout before download is complete?

Question

I've always tried to specify the height and width attributes for img tags in HTML. Not for style reasons, but because the browser then expects the size of the image and can do page layout even before the image has finished downloading. From the HTML 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.

I don't know why this has never occurred to me, but does specifying height and width in CSS, rather than inside the img tag, do the same thing?

Answer 1

On (Almost) Strict mode: Yes, when the <img> display type is block or inline-block. Otherwise, if it's inline, FF3.5 will not preserve the space, but IE7, Safari3.2 and Opera9.5+ will preserve.(tested) On Quirks mode, FF3.5 does preserve the space like the others.

Prefer styling your document via CSS. HTML serves a different purpose:

It provides a means to create structured documents by denoting structural semantics for text ...

Relevant links:

• Images: height and width attributes @ annevankesteren.nl
• Quirks mode and strict mode @ quirksmode.org