18th September 2012

CSS Sprites – The What, Why, How & When

Scroll down

What is a CSS Sprite?

CSS Sprites are used all over the web, but in the majority of cases, they are not used to their fullest potential. This is an aspect of web design & development that is very useful for SEO as well as user experience. CSS Sprites are mainly used to separate hover states for icons on a website. This is where the image changes depending on whether your mouse is hovering over the icon or not. This works by combining two image states together onto one canvas, and then using background-position in your CSS to display the appropriate area of the image at the given state. The full image would look like this:

CSS Sprites

and the CSS code like this:

CSS Sprites Code

When your mouse is hovering over the icon, it would display as green and when your mouse is not hovering over the icon, it will appear to be silver. Sprites are used in this way because loading one image, means the two states are loaded at the same time; as the page first loads. Using separate images means the image used in the hover state will only be loaded at the point it is interacted with, not when the page first loads; this causes a flicker effect, where there is no image ready. But this is just the tip of the iceberg. You can use this same technique for all of your background images by creating one large graphic, then use the CSS to simply shift it around to display the correct region. But surely loading one large graphic is slower than loading lots of different images? Nope, that’s not true. In the past, when the Internet was super slow, loading lots of smaller images gave the illusion that the webpage was loading and not just siting there idle, however it was, and still is slower to load a full web page that way.

How does it work?

Why is loading lots of small images bad? Well, each time the server has to fetch one of these smaller images, it has to carry out a separate HTTP-Request, making a page very inefficient. Basically, the less HTTP-Requests a page has to make, the more efficient it is. Therefore by combining all of these images into one file, it reduces the number of round-trips and delays in downloading the files needed to build a webpage. This can often reduce the total number of bytes needed to be downloaded in order to load a page, and consequently will speed up the page load time. Having a quick page load speed is good for the user because they will not tire of waiting for all the images to load. It is also good for the search engines, and will help increase your rank in Google or the other search engines. Google announced way back in 2010 that page load speeds would have an affect on ranking, so I can only imagine what they have done since then to enhance their algorithm. Also, with page speeds having been added in depth to Google Analytics, I would imagine the page speed of a website has an even greater affect on its ranking.

How to use them

It’s not that much more complicated that the above example. You simply need to call upon the image once within the parent tag, and then change the background-position appropriately, depending on which part of the image you want to be displayed for each item. Here is an example of a Facebook’s current sprite, as of 05/09/2012 (they change it often):

facebook CSS sprite

How you build your CSS sprite image is entirely up to you, whatever works. You could build a really long image, as wide as your widest image and as long as all of the images combined; doing it this way means you only have to worry about the Y coordinates.

Isn’t there an easier way…

As Theodore Roosevelt once said “Nothing in the world is worth having or worth doing unless it means effort, pain, difficulty…” Actually, there is an easier way, use spriteme.org. It’s really clever and will combine all the background images into one image. Here is what it did with our website:

Creode CSS sprite

The image will be hosted on the http://www.jaredhirsch.com/ server so you can link to it from there, but I would recommend saving the image and hosting it on your own server. Just in case theirs goes down or they delete your picture, which I think they do. Spriteme.org will also work out the CSS, using it’s own hosted file. As you can see below, the code shows what needs to be replaced from your own CSS, that which is crossed out, and what needs to be added. My advice is to change the image url, and use the background-positions specified.

Creode sprite CSS

Another great tool, and one we use, is a tool from Compass. Compass does sprites in a smart way; it compiles them from your code and fills in the CSS rules for you. It can make coding up a website much quicker and easier. There is a great run through of how to use Compass on Vidget.

When to implement them

Using sprites is a no brainer. They’re not that difficult to implement, and will make a difference to the page load speeds of your website. In case you don’t believe me, go to the Google Page Load Speed tool and check your own website. It will more than likely suggest creating sprites. If not, I clearly didn’t prove my point, but if it did then you should know that when Google tells you to do something, you should really do it. There are two ways to work with sprites, either build them right from the start of the web build, or finish the website and then go back and implement them. So, when you have some spare time, get to it. Change your images, change your CSS and you’re done.