<img> width and height

is this the same...

[Emperor]

Hi guys,

I'm pretty sure the browser loads/displays images more efficiently if the 'width' and 'height' attributes are specified, like this:

<img src="mypic" alt="" width="128" height="64" />

I am wondering, will the following CSS rule result in the same efficiency:

img {
width: 128px;
height: 64px;
}

<img src="mypic" alt="" />

For some reason I don't think it will.

Take care,
Emperor

[encyclo]

It will work (assuming here that you only have one image on your page), but as you suspected, it won't be as efficient as specifying the width and height on the

img

tag.

The reason is that when the HTML arrives at the browser to be parsed, the browser starts planning the layout of the page whilst waiting for external files such as images or CSS files. The width and height attributes allow the browser to leave the appropriate space for the image. Once the CSS file arrives, the page is redrawn according to the directives in the file.

You are still, however, usually one step ahead of not specifying the width and height at all - because in this case, the browser has to wait for the whole image to arrive before redrawing the page to cater for it.

In short, you should continue to always specify the width and height of an image directly on the image tag itself.

[ronin]

This is interesting - it's an issue I've run into myself in the last few days.

If dimensions were specified in an external stylesheet, I understand that there would be a slight delay in page rendering as the stylesheet was read for the first time... but if the stylesheet has already been cached then there wouldn't be any perceptible delay, would there?

In this instance, if you had numerous pages with many identically-sized images, it would be better to have the width and height specified once in the stylesheet, no?

[justp380]

both ways work the same there's no difference.