Question: Website layout changes while images are loading

Dear Doug,

I'm designing a website at ---, and it looks great, except when it's loading. The layout of the page keeps changing while the images are loading. Is there any way to avoid this problem?

Answer

I took a look at your site. Your problem is really easy to solve. Your images are what gives "shape" to your layout, so while the images are loading, the site is (as the book of Genesis says) "formless and void".

So you need to tell the web browser how big the image is. That way it leaves space for it even when it hasn't loaded yet. You can do that using the "width" and "height" properties. Here's an example:

<img src="image.gif" width="50" height="75">

See how easy that is? Now you've just got to put width and height properties in all your images, and you'll be set!