As the author of the WWW FAQ, I regularly answer questions about the workings of the Web. If a question is frequently asked, I simply add an article to the FAQ. But sometimes a question is more detailed, more in-depth— not really a FAQ, but still of interest to others. You'll find those questions, with my answers, here in Innards along with commentary on other web-technology-related topics.

2007-07-25

Q. Firefox shows my images just fine, but Internet Explorer ignores them. What is the problem? My image elements look like this:

<img src="myimage.png" width="" height="60">

A. Your code contains:

width=""

That doesn't make any sense. The width and height of an img element, if you specify them at all, should be specified as a number of pixels. For best results this should be the actual size of the image, yielding a small speedup in page rendering because the browser doesn't have to look at the image file first to lay it out in the page. You can also specify sizes that don't match the actual image, forcing the browser to resize it. However, this doesn't look good— web browsers are in a rush to put that page on the screen. They don't resize images as elegantly as real graphics programs do.

But what happens if you specify an empty value for width? That depends on the browser. Some browsers, like Firefox, ignore it completely and display your image at its true size. But Internet Explorer will display the image narrowed down to a one-pixel-wide column. That is what happened in your tests.

The moral of the story: don't specify width or height at all unless you are specifying the true width and height of the image, in pixels, to speed up page rendering.

---