CSS Sprites Speed Up Your Site

By Xps.     2 Comments

CSS sprites work by creating a single graphic with all your site icons, calling for it once, and using the background-position style attribute to show the appropriate section of the graphic. It sounds a little complicated and will take some work setting up, but your visitors will love you for it even if they don’t say so.

It’s important to know you’re not adding all the images of your website to the sprite image. You are only adding images that are referenced many times throughout your website. Images like those little icons, that search button, and even the logo are good items to add. Don’t add images found in pages like the WampServer 2 guide or even the featured images shown on the homepage associated with each guide. Those images aren’t located throughout the website.

Here’s How It’s Done

Take all your site icons and add them together horizontally in a single graphic. If you like everything to be perfectly organized like me, all your icons are 16×16 (width by height). On Computer Tech Tips (CTT), we have 22 different icons so I created an image 352×16 (16px width times 22 icons for 352px total width) and added all the icons to it. While building the sprite image, I used a box format to ensure all the icons are perfectly centered. Including the black border, each area is 16×16.

After all the icons were situated, I removed the black borders and uploaded it to my theme’s /img/icons folder. Now it’s time to update the CSS document. Create a class element named icons and call the sprites.png image. (Check w3schools.com for more info on background attributes) Set the size of the element to 16×16 and also set the right padding to 16px so the text next to the icon doesn’t overlap the icon itself.

.icons {
  width:16px; height:16px;
  background:transparent url('img/icons/sprites.png') no-repeat scroll;
  padding-right:16px;
}

After that class, add a class for each individual icon. The background position for the first icon will be 0px (X-axis, horizontal), 0px (Y-axis, vertical) and the second icon will be positioned at -16px, 0px.

.icn-app_blk {background-position:0px 0px;}
.icn-next_blue {background-position:-16px 0px;}

The reason the second icon starts at -16,0 is because the upper-left corner of the sprites.png image is 0,0 on a coordinate plane. So, you’re actually working in coordinate 4 if you’re into mathematics. Icon 1 starts at 0,0 and extends through -15,-15. Icon 2 starts at -16,0 and extends through -31,-15, and so forth. You want to set the background position to the upper-left coordinates of each icon. The last icon has a position of -336px 0px on our 352×16 sprites.png image and extends through -351,-15 on the coordinate plane.

After you’ve set your CSS document, you’re ready to modify the HTML documents. The first icon on CTT is the user.png one, which is referenced in the theme’s header.php file and looks like this:
<img src="https://www.computertechtips.net/wp-content/themes/ctt/img/icons/user.png">

Replace that line completely with this one:
<span class="icons icn-user"></span>

Set the span element to reference the icons class which loads the sprites.png image and also the icn-user class which sets the appropriate background position to show the correct image. Now make similar changes to all your website icons. The CTT homepage had 11 alone. When you’re all done, your web page shouldn’t look any different.

Why Bother With Sprites?

This seems a bit complicated and does take a bit of work to setup, so why bother at all? The simple answer to that is speed – your web page will load quicker. Initially, the CTT homepage was making over 11 HTTP requests, one for every script and image. Each HTTP request adds a little time to loading the web page. Now we’ve grouped all those little icons into a single image and decreased the total number of HTTP requests by 10. Even better, instead of having 11 images cached in the reader’s web browser, they’re only caching 1 so their browser is doing less work.

Let’s take a look at the file-sizes. The total file-size of all 22 icons is 8.58 KB. The single sprites image is only 4.75 KB. It might not sound like much, but every little bit counts. The difference of a second or two could be the difference between a user reading your page once, reading your page and bookmarking, or closing the page and not reading it at all.

In addition to the reader’s web browser, your web server is doing less work too. Imagine you have 100k page-views a month to your site. Assuming your site has 11 icons (like the CTT homepage), that’s 1.1 million HTTP requests. Using a sprite image means 1 million fewer HTTP requests. Looking at file-sizes, that’s 858,000 KB (or 837.89 GB) being downloaded. With CSS sprites, it’s only 475,000 KB (or 463.87 GB) being downloaded; a difference of 45% less work.

In the Yahoo! Developer Network on a page entitled “Best Practices for Speeding Up Your Web Site” it says:

Reducing the number of HTTP requests in your page is the place to start. This is the most important guideline for improving performance for first time visitors.

Horizontal Or Vertical Sprites Image?

As I was researching for this article, I was looking at the source code of websites and noticed a vast majority of them either line their icons vertically or even in a box shape. That is contrary to what I had thought, so I tested it. In a horizontal formation (352×16), the file-size is 4.75 KB. In a vertical formation (16×352), the file-size is 5.89 KB. Needless to say, Computer Tech Tips uses a horizontal sprite image.

Resources

Using CSS Sprites isn’t a new technique in web development at all. Dave Shea of A List Apart wrote an article about it dating back to 2004. He seems to be the pioneer on this technique.

Chris Coyier of CSS Tricks used a navigation menu with rollover images as his example. He shows examples of how sites like Google and Facebook use sprites. There is also some details about using a browser bookmarlet called SpriteMe to create sprites for you automatically.

If you don’t want to create your sprite image manually, you might consider using the CSS Sprites Generator. To maximize efficiency, I suggest setting the options to 0px padding between elements, 0px border around whole sprite, align elements left (horizontally), and a transparent background.

Now that you know how to do it, get to it. This could be the difference between a new visitor becoming a regular reader. If you’re having problems, leave a comment and I’ll help you through it as best I can.

Posted in: Web Development