[CSS] Image Sprites

[Aurora078]

[align=center]CSS Image Sprites[/align]

[tabmenu]

[tab=What are CSS Image Sprites?]

CSS Image Sprites are basically a way to reduce the number of packets and http requests needed to return images. Image sprites use an 'image map', which we will go over next. The less requests needed to be sent, the faster the images are downloaded, thus the page loads faster than it would with 50 different image requests. Say you have 50 images. Now, they can either be 50 different requests, or you can put them on all on an 'image map' and reduce the requests to 1 for all 50 images. Which is faster? You tell me. Now, there is no doubt it may take time to develop these image maps, but for the sake of your users, its useful if your going to be using alot of images.

[tab=What is a(n) Image Map?]

An Image map is mainly 1 image, consisting of other images all put together horizontally and vertically. Think of it as a grid if you will. You can use this one image for all your images, and its not that hard to select each individual image. With some CSS Background x and y manipulation, you can select each and every one of your images individually.

[tab=What sites use Image Sprites?]

You might be surprised, but many popular sites use image sprites. For example, Google, YouTube ( Owned By Google i believe ), Yahoo, Facebook, Myspace, and others use these sprites to feed the images to the users faster.

[tab=Learn More?]

This is not a tutorial im writing. It explains what they are. For more information i suggest trying the link below that Armageddon posted. Thats where i learned how(:

[/tabmenu]

[Armageddon]

I myself was reading an article about this. And it may come in handy to you. Very useful -> http://www.alistapart.com/articles/sprites/

[Aurora078]

I myself was reading an article about this. And it may come in handy to you. Very useful -> http://www.alistapart.com/articles/sprites/

Thanks. Thats where i learned it. You know the Silk icon set by famfamfam? Well, there image map thing is a bit difficult, so i redid it with only the icons without the words.. Allll 1,000 of those icons lol. I'm about half way done with the css mapping for it, and im thinking of posting it on MWG so user's that want the icons can take advantage of using sprites, and maybe learn from the CSS how it works.

[Armageddon]

Lmao.

Well keep learning, it's quite easy when you know the basics of it, trust me. I did take me around a couple of hours to learn, but can be useful. :)

[Djkanna]

Article: http://css-tricks.com/css-sprites/

Screencast: http://css-tricks.com/video-screencasts/43-how-to-use-css-sprites/