All about CSS Sprites for Faster Web – Part 2

Application of CSS Sprites

For easy understanding lets go by a simple example. Image rollovers that are most common in a web page are once handled using JavaScript. Later the same was handled using simple CSS with Pseudo class :hover. Either when JavaScript is used or CSS Pseudo class is used, two images were required to obtain the rollover effect i.e., one image for normal state and one for the rollover state.

The CSS for the same would be:


a{display: block; width: 40px; height: 45px; background: #ffffff url(images/button.gif) no-repeat left top; }
a:hover{ display: block; width: 40px; height: 45px; background: #ffffff url(images/button_hover.gif) no-repeat left top; }


image-rollovers

When CSS sprite is used, the normal and hover state images are combined into one image: The CSS for the link will be re-written as below:


a{display: block; width: 40px; height: 45px; background: #ffffff url(images/button-combo.gif) no-repeat 0 55px; }
a:hover{display: block; width: 40px; height: 45px; background: #ffffff url(images/button-combo.gif) no-repeat 0 5px; }


Note: In both normal and hover states same image is being used (button-combo.gif), but with its background position changed (55px for normal state and 5px for hover state).

Advantages of Using CSS Sprites

The above example shows us that instead of two images, CSS Sprites method uses one image and there isn’t much difference in the CSS either. Then how is it advantageous? Is it worth using this technique? Before you think of using CSS Sprites or not, I will list the advantages it has over the earlier methods.

Reduced File Size

The images used in the above example has file size of 1.91kb each (button.gif-1.91kb and button_hover.gif-1.91kb = Total size 3.82kb), whereas the combined image (button-combo.gif) has only 2.91kb i.e., exactly 0.91KB less which amounts to 23% approx.

CSS Sprites containing more number of smaller images will have more savings on file size than the cumulative of individual images.

Reduced Number of Packets

For an average user on 128kb/s connection,
the size of each packet transferred would be 1500bytes – (minus) 40bytes (for TCP/IP headers) = 1460bytes (1.46kb). Image having 1900bytes, requires two packets one with 1460bytes and the other with 440bytes. It is found that both these packets will be transferred at the same speed irrespective of their sizes. Hence the packet having 440bytes will take same time to get transferred as that of the packet having 1460bytes.Hence it is important that not only the file size but also the number of packets required to transfer images affects the web page performance.

The images button.gif and button_hover.gif requires ( 1.91/1.46 = 1.31) 2 packets each i.e., 4 packets on the whole, whereas the combined image button-combo.gif (2.91/1.46 =1.99) requires only 2 packets. Thus through CSS Sprites method we could save nearly 50% of the packets. It is for this reason web pages with CSS Sprites downloads faster than the ones having individual images.

Smoother Rollovers

When separate images for normal and hover states are used, it is common to see menus and hyperlinks getting blank when hovered. This can be often seen when the web page is viewed under lower connection speeds or when the traffic is heavy. What happens is that when hovered the menu item / hyperlink requests for the hover state CSS containing the hover image set as background. If the hover background image is not downloaded that particular menu item / hyperlink remains blank until the image gets downloaded in the cache. This causes jerky rollovers and flickering menus.

In CSS Sprites, by the time the normal state of the menu / hyperlink becomes visible the hover image will also be available in cache since both normal and hover states are embedded into one image. Only the background position of the images gets changed when hovered and hence the menus / hyperlinks have smooth rollovers.

Reduced HTTP Requests

Earlier when web developers used image slicing they were mislead by the fact that by having more number of tiny sliced images the web pages can be made faster. But the worst part is that every tiny image used creates an HTTP request to the server. Hence more the number of images be it small or big, it requires equal number of HTTP requests causing overload to server. This leads to increased bandwidth costs. CSS Sprites embeds all images into one single image with necessary spacing, reducing the number of HTTP requests to one. Hence it is wiser to make one master image comprising all the individual images instead of using them separately.

There are many CSS Sprites generators freely available online. One such tool is http://spritegen.website-performance.org/. All we need to do is upload a set of individual images zipped together, set the horizontal and vertical spacing between individual images and naming conventions (optional). The tool will provide us the CSS Sprite of the zipped images and the corresponding CSS classes. It is simple and really worth using.

Advertisement