CSS Sprites

If you save the page of a modern popular site, you may notice an interesting thing. A few small pictures merged into one image. For example, go to YouTube.com. The current version of the page contains this picture.

As you can see, Google's developers have combined several images into one. Then they've used CSS code to show the icons in the right places.

Why have they done that? Why do they put a few pictures into one image?

The fact is that modern web pages contain hundreds of objects. It could be a style sheet, JavaScript, videos, music, flash, images, icons, etc. Downloading each object requires a separate request to the server. And, if the page contains 100 objects, it will require 100 requests. Now, imagine that each request takes a time to complete. Do not forget about latency. Now you understand that downloading a web page can take a very long time.

Search engines recommend webmasters dedicate some time to improve the performance of their website. Website speed is often more important than visual appearance. When you combine several pictures into one image, you reduce the number of server requests and bandwidth. This technology is called 'CSS Image Sprite'.

How it Works



Suppose you have a blog, and you've decided to add social buttons to promote your website in social networks. Put one image, instead of several pictures!

1. Preparatory period.

Combine these icons in one image using a graphic editor:



You should get this image:



2. First, create a simple HTML list: /h3>

<ul id="social">
<li id="button1"><a href="http://twitter.com"></a></li>
<li id="button2"><a href="http://reddit.com"></a></li>
<li id="button3"><a href="http://last.fm"></a></li>
<li id="button4"><a href="http://friendfeed.com"></a></li>
<li id="button5"><a href="#"></a></li>
<li id="button6"><a href="http://facebook.com"></a></li>
<li id="button7"><a href="#"></a></li>
<li id="button8"><a href="http://delicious.com"></a></li>
<li id="button9"><a href="http://stumbleupon.com"></a></li>
</ul>


3. Now let's apply the style to the HTML list:



#social{position:relative;} #social li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #social li, #social a{height:16px;display:block;} #button1{left:0px;width:16px;} #button1{background:url('icons.png') 0 0;} #button2{left:16px;width:16px;} #button2{background:url('icons.png') -16px 0;} #button3{left:32px;width:16px;} #button3{background:url('icons.png') -32px 0;} #button4{left:48px;width:16px;} #button4{background:url('icons.png') -48px 0;} #button5{left:64px;width:16px;} #button5{background:url('icons.png') -64px 0;} #button6{left:80px;width:16px;} #button6{background:url('icons.png') -80px 0;} #button7{left:96px;width:16px;} #button7{background:url('icons.png') -96px 0;} #button8{left:112px;width:16px;} #button8{background:url('icons.png') -112px 0;} #button9{left:128px;width:16px;} #button9{background:url('icons.png') -128px 0;}

Try it yourself



As you can see, we have one image with a weight of 4 Kb instead of 9 pictures with a total weight of 4 Kb each. It turns out that we have reduced the number of server requests by 9 times, and reduced the bandwidth to 4Kb vs 36 Kb!

With CSS Sprite you can make use of Magick. For example, you can add a hover effect to your navigation too.

Recommended Reading

CSS Sprites: Image Slicing’s Kiss of Death by Dave Shea — http://www.alistapart.com/articles/sprites


Our Mailbox © 2009 — 2011 SiteSpeedLab & SiteSpeedLab.com
Be Quick or Be Dead