Pages load faster when using CSS instead of IMG tag

This is a small technical tip to speeding the loading of your web pages. There are many tips you should consider but I haven't seen this one well documented out there on the web.

When using the HTML IMG tags with Internet Explorer (tested on IE7), the page is not displayed until the images have been downloaded. Loading images using CSS background-image ensures the page is displayed even before the image is loaded.

See Colnect's countries page which contains many flag images in it using this tip.

With FireFox the page is displayed but this modification will make CSS background images load later than normal IMG images.

How to do it?

Simply replace:

<img src="image.jpg" 
width="100" height="100" />

with

<div style="height: 100px; width: 100px;
      background: url(image.jpg) no-repeat center center;">
</div>