Way to avoid reflow/flickering on image loading on a web page?

Question

I have web page that looks like this:

Image on the left - text on the right

If the web-server is particularly busy (or anyway the connection is slow) the web page flickers. It looks like it's showing the text on the left then it moves it suddenly on the right has the image is retrieved.

This is quite standard, I know.

The question is: How do I avoid this ?

Shall I wrap the image on a div with fixed width and height ?

or are there better/(more standard) solutions ?

Thanks

Answer 1

You should define the size of the image.

<img height="100" width="100" /> <!-- or -->
<img style="width:100px;height:100px;" />

If it's important to have a place-filler, specify an alt attribute. The value of this attribute will be displayed until the image has loaded.

Answer 2

Specify the image width and height with the corresponding attributes in the image tag

<img src="..." width="..." height="..." />