Image Sprites in css. Why use them

Today I am going to share about sprite images being used in web design. What they are and why they are a life saver.

Sprite is a combination of images into one big image. The idea of using sprites originated from the term “sprites” that comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images.  (Reference: http://css-tricks.com/css-sprites/).The concept is being applied to web design so the sprite image is fetched once and parts of that image are displayed at different locations on the website. Css is used for positioning and alignment.

It’s a life saver to our traditional web design practice of slicing and saving small individual images. Even though smaller images might be believed to load faster but because we usually have so many of them on a page each image load time can significantly decrease the speed of page load and navigation and moving through a website.

Why we need to embrace this concept is pretty evident. Most of the websites these days are being accessed on mobile devises and the load time on a mobile device really frustrates the user and can drive customer and users away from a site.

Table 1 shows popular web sites spending between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to fetch all the components in that HTML document (i.e. images, scripts, and stylesheets).  Experience shows that reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.


Time Retrieving HTML Time Elsewhere
Yahoo 10% 90%
Google 25% 75%
MySpace 9% 91%
MSN 5% 95%
ebay 5% 95%
Amazon 38% 62%
YouTube 9% 91%
CNN 15% 85%

(Reference: http://css-tricks.com/css-sprites/)

As there are pluses and minus of everything sprites has them to. I will highlight some scenarios why sprites should not be adopted but overall sprites can be used in most cases for improvement.  Sprites are absolutely required for high traffic sites such as yahoo, msn which get huge traffic.  One the other hand Sprite images will be hard to update and change if you do not have the actual image manipulation files (psd or other image software files). It will be more work in that scenario or on a site where there will be no or few images. One basic part of all sites that sprites can be applied to easily is the navigation bar.

Some useful links to get you started with sprites.

Plugin for sprite : Spriteme:  http://spriteme.org/

Sprite and Java script in combinationhttp://www.alistapart.com/articles/sprites2

Tutorial on Sprites: http://cssglobe.com