SEO Explained: What are CSS Sprites?

By July 4, 2012 SEO No Comments


A wide range of people dabble in SEO: SEM marketers, web designers, developers, content writers, bloggers, just to name a few. Not all of these people will have a great grasp of development language (ok, except the developers), but it is very useful for SEO’s to have a good knowledge of the code on their site – in fact, some SEO tasks make it essential.


Have you ever used SEO tools or read SEO Blogs and wondered what some of it even means? Maybe it’s in Google Webmaster tools, your CMS, Google Page Speed Tools, SEOMoz, there  is a lot of technical stuff to learn.


Today we’re going to explain one tiny bit of that, and in the future explain even more tiny bits, so that slowly you can expand your SEO vocabulary and knowledge.


Today we’re going to learn what CSS Sprites are. You might have seen this term being bandied about with reference to site speed – but maybe you didn’t know what it meant. Hey, we were all in that position at some point, we weren’t just born with the knowledge of what CSS sprites were!


Google Page Speed Tools might recommend you to “Combine images into CSS Sprites”… what does that mean? Well a CSS Sprite is a single image file which contains lots of different images. So, for example, below, the image in red is the whole file, but we might like to use parts of that file, individual images, like the Facebook icon there in blue.

CSS Sprites example

So what Google is saying is, that instead of having the six icon images stored separately, you might want to make it just one big image file (or ‘sprite’), and when you need to use one of those icons, you just reference the area of that picture you want to use.


This will improve your site speed, because instead of having to make six different http requests to get those images, you will only have to makeone. Then, whenever you need to reference that image, you just use pixel measurements to say which part of the picture you are talking about.


Don’t worry, you don’t have to do all the hard work on this, there are sites which can help you create these sprites.


Now, even if you’re not the one making changes to the website, you can be the one making recommendations and sounding like you’re knowing what you’re doing!


One New Idea To Help Achieve Your Sales Goals REQUEST YOUR FREE SPARK