Fri, 22 Aug 2008 22:58:14 -0700, /richard/:
Precisely. Yet there are the so called experts around here who insist
one MUST absolutely include the parameters.
Knowing the dimensions of an image before it is requested would
speed the layout in means it won't block the progressive rendering
until the image gets requested and its dimensions get found, but
that's generally true only for inline images. The block boxes
following the one containing the image can still be laid out without
waiting for the image to get loaded. So:
<p class="figure"><img alt="..." src="..."></p>
won't cause the page to "load" slower. It will just cause the
following block boxes to be shifted (after the image gets requested)
vertically without being re-flowed. To optimize/prevent the visual
effect of shifting during the progressive rendering you could hint
the rendering engine about the dimensions of an image through a
style sheet, e.g.:
img[alt="..."] { width: 100px; height: 200px; }
img.icon { width: 40px; height: 40px; }
img[src="..."] { width: 300px; height: 150px; }
IE 6 does not understand CSS attribute selectors so one can't match
IMG elements on the 'alt' or 'src' attribute and adding a 'class' or
'id' attribute on every image is not a viable option. For this
browser I just choose to not optimize this, but I don't pollute my
markup with 'width' and 'height' attributes on IMG elements.