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>

colnect's new clothes - slicker design

colnect's design had been too long neglected. It's not that I was unaware of the implications of a better looking website but I've delayed handling it since my skills as a graphic designer are not the ones I'm most proud of.
Since today, the site looks much better than before. Some CSS magic could do wonders on a website. There are still many enhancements to be done but they'll have to wait for the new version's launch.
An annoying issue that has to be dealt with over and over again is browser compatibility. It seems different browsers must interpret the standards differently. Personally, I suffice with testing every page on FireFox and IE. IMHO, FireFox is a much better browser and too many sites support only IE properly. The other browsers don't have such a big crowd yet and their crowd probably doesn't use them without resorting to either FireFox or IE occasionally.
Javascript can help with cool things (like these menus) but browser compatibility becomes an even harsher issue and it seems Javascript is a language that must always be tested per browser to ensure that whatever it is that you wrote actually works.

colnect.com - the new logo

Say hello to the new logo of colnect.com. The magnifying glass is commonly used by collectors when they inspect the quality and finer details of their collectibles.

The website still carries the old Islands Phonecards Database logo but this will soon become history. [UPDATE: it is gone]

And this last logo was a candidate but never made it to the finals :)