pixeldim

Using CSS Sprites

Posted on: May 19, 2009

CSS sprites is not a much familiar term for the designers or html coders. Its kind of a new technique and very effective one to render images on a web page. This is a very useful technique to create rollovers vs Javascript functions. In sprites we dont slice images and use them using <img> tags. In fact a MASTER Image is created containing all the images used on that page. This will make the page to send only one http request to load that master image and distribute on the page using CSS positions attribute.

The problem with javascript is that when mouse moves over the menu button, it loads a new image by calling it on web server, thus consuming bandwidth. Confused? Let me explain it

When a web page is designed, we use <img> tags to insert images in our page. Page while downloading sends http requests each time it reads <img> tag and consume the bandwith. It looks like very confusing here. You might be thinking why should I use sprites instead of <img> tags which is a fairly simple and easier thing to do. Imagine a web page accessed by 10,000 users simultaneously and that page has ten <img> tags. The html page will send 10 http requests to render the page correctly. Now multiply 10 by 10,000.  Too much requests are being sent to the server? And if we create one sprite containing all images in a single master image and call their different coordinates through CSS, only one http request will be sent to the server and the whole image will be loaded in a single request. This will make the page efficient and quick to load.

A lot of famous websites are using this approach to achieve efficient response time for the visitors. Some examples are:

Yahoo
trough_2.0_062308

Google
CNN
Digg

xing
Amazon

For more details See this link http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

del.icio.us

%d bloggers like this: