Saturday, March 7, 2009

cute technique for decrease loading time of web pages with multiple images

This post is really to highlight the following article which describes a clever (read CSS magic) way to download one image and display multiple ones.

This news maybe old for some, but I'm keeping track of it, I'm sure I'll make use of it.

So, what's all about: if you have 30 images (small ones, like icons) to display in the page, what to do: create one big image out of them, then use the background attribute of the img tag to specify the same image and assign CSS class of each of the img tag which will split the big image and get what you want.

Clever, though it is best suited for icons. But it will for sure decrease the loading time of such pages. The first thing it came to my mind when seeing this is that the idea could be well appllied to the online editors (FCKEditor, my currently favorite).