Saving Bandwidth and Improving Site Speed Using CSS Sprites

Jul 3 2010 by Peter Richards | 40 Comments

Saving Bandwidth and Improving Site Speed Using CSS Spites

As a site owner, possibly the worst experience that you could serve upon your visitors is a frustrating wait whilst the clock spins and the page loads. In most cases, most of your potential customers would have pressed the back button in their browser and headed off somewhere else; this inevitably means a loss of potential business.

Site speed is predicted to become one of Google’s next ranking factors, although as per normal, the company tends to keep the nitty-gritty close to its chest.

In a presentation in Las Vegas, when pressed on the subject of site speed integration into the Google search ranking algorithm, Matt Cutts, member of the Search Quality group at Google and a highly-regarded person in the SEO community, described this as one of his "what to expect in 2010" bullet points. He went on to explain that the company wanted search to be "real fast, as if you are flipping through a magazine."

What all of this should tell us is that if you wish your site to be user-friendly and well-positioned within the ranks of the major search engines, then you should be looking at ways to improve your web page performance. Apart from the myriad of options displayed in Google Webmaster Tools, including consolidating and compression of external files, and checking for broken links on your website, I would recommend looking at the way you use images. One of the best web design techniques out there is the use of CSS sprites.

What are CSS Sprites?

It may be a common misconception that a sprite implies a series of small images. The opposite, in fact, is the truth — a CSS sprite is one large image.

You may be aware of the CSS technique of displaying an "on/off" state for a button which is contained within a single image and positioned using the background-position CSS attribute on :hover (see the tutorial on a button that uses CSS sprites). CSS sprites are basically the same concept: The image is displayed on the page using the coordinates specified in your CSS, and only this area will be visible.

It is easy to believe that a number of small images are likely to be less heavy in total file size than one containing all of the images positioned together. But even if you may have images that are only a few bytes in size, each one is giving your web server unnecessary work to do by sending an HTTP request. Each request contains a portion of overhead information that uses valuable site bandwidth.

Using CSS sprites can reduce the number HTTP requests and can make the web page seem more responsive because all interface elements are already downloaded before the user handles them. This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used.

Building a Basic CSS Image Background Sprite

Let’s discuss this topic using an example. Using Photoshop, I created a document with a series of images (logos of companies) and divided the area into chunks of 100 pixels (see the images below). I saved the file and named it logos.jpg.

I used 100-pixel measurements between logos for the purposes of illustrating the concept in this article and because this was a convenient distance to move the position of the CSS background image each time when manipulating the coordinates in my CSS (you should be more accurate when actually applying CSS sprites to reduce its file size further).

The CSS background image is focused on displaying only the first logo as defined by the green border — the coordinates of which are y = 0 and x = 0.

What are CSS Sprites?

To position them, we use the background-position attribute.

What are CSS Sprites?

To display the second image alongside the first, all that is necessary is to adjust the coordinates on the x-axis.

Because of the way we have constructed the image (at 100-pixel intervals), all we need do is add a line of CSS advancing the x-axis by 100 pixels to display each logo.

CSS for the CSS Background Sprite

#logos {height: 64px; margin: 0; padding: 0; position: relative;}

#logos li {background: url(/logos.jpg) no-repeat top left; margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#logos a {height: 64px; display: block;}
// First logo
#logos li a.jaz {background-position: 0 0}
// Second logo
#logos li a.iberotel {background-position: 0 -100px;}
// Third logo
#logos li a.solymar {background-position: 0 -200px;}
// Fourth logo
#logos li a.travcotels {background-position: 0 -300px;}
// Fifth logo
#logos li a.intercity {background-position: 0 -400px;}

The Results of Using CSS Sprites

The Results

In the example above, it was possible to reduce the file size from 52kb to 22kb and the number of HTTP requests from 5 to 1. This represents a good saving, and is only one small section of a web page!

Our new CSS sprite method tests well in most modern browsers.

Further Reading on CSS Sprites

Here is a list of suggested reading resources about CSS sprites.

References

  1. Usage share of web browsers (May 2010)

Related Content

About the Author

Modi Mann is an UK-based digital marketing consultant currently working on BreatheHR - A SaaS HR Software. If you’d like to connect with him, follow him on Twitter as @macmodi.

40 Comments

Simone D'Amico

July 3rd, 2010

Thanks for the post, very useful!!

btw:
The title is wrong. “Spite” instead “Sprite” :)

Loige

July 3rd, 2010

A list of software that can be useful to build css sprites would be great! :)
However, nice article! tnx for sharing!

Jacob Gube

July 3rd, 2010

Simone D’Amico: Nice catch, thank you.

@Loige: Great idea!

Grim_Cris

July 3rd, 2010

I really need to try this. Thanks for your post!

Scott

July 3rd, 2010

Thanks for the tips, i was actually using this technique the other day on one of my designs.

Matt

July 3rd, 2010

This is an interesting article as Peter is an ‘SEO engineer’.

I’d heard that using sprites is bad for SEO as you don’t have alt tags to be able to put keywords in unlike standard tags. Also, I believe things like screen readers rely on the alt tags to display content to disabled users.

I wonder if to counter this you could put your alt tag content in the div tag and then hide the text using text-indent? Does that have the same effect?

Or am I just talking out of my rear?

richard hughes

July 3rd, 2010

http://spriteme.org/ – is a very good tool for this.

i like the idea of using sprites, but if you want to change the layout / images later it is a nightmare.

Yorkshire

July 3rd, 2010

Great advice, will be using this in future developments, thanks for sharing with us ;)

Tom Parsons

July 3rd, 2010

“Site speed is predicted to become one of Google’s next ranking factors”
I believe it already is part of the ranking factors now. Although I haven’t seen any effects from it!

Jacob Gube

July 3rd, 2010

@richard hughes and @Luis Herrero: Awesome resources!

@Matt: CSS sprites won’t stop you from adding alt properties on things that *should* be images, and that’s the only HTML tag that should have alt properties. Using a CSS sprite for text content as opposed to an image improves the ability of a screen reader user to access the text. CSS sprites should be used properly though. It shouldn’t replace things that should be images (like a photo of your cats, for example.)

Using text-indent for the text hides it for normal-sighted users, but screen readers (and web robots such as search engines) will be able to access the text. This changes when you use display:none; to hide your text, though, and so, personally, I like using text-indent (and Peter does too, as shown above).

Here are other methods for using CSS background image replacement with their pros and cons: http://www.mezzoblue.com/tests/revised-image-replacement/

@Tom Parsons: Hmmm. I haven’t come across anything saying Google’s implemented this already (but that doesn’t mean much since I admittedly don’t follow SEO news, and that’s why I love having SEO guys guest post here, since it’s a neglected topic on the site), but I do know that they added a feature in Google Webmaster Tools to analyze your page speed, so, if I were to theorize: the algorithm to evaluate your site for speed/response times is certainly functional and developed already.

Theo

July 3rd, 2010

@Jacob Gube,@Tom Parsons: Yes, site speed is a ranking factor http://bit.ly/acUf3Q
Nice article!

Magne Andersson

July 3rd, 2010

You might be interested in Resource Packages too, see https://bugzilla.mozilla.org/show_bug.cgi?id=529208 :-)

Vincent Veri

July 3rd, 2010

This is the first time I read something about CSS sprites. It sounds interesting. thanks for posting

Clervius

July 3rd, 2010

@Manmohanjit Singh, Truly impressive

Tom

July 3rd, 2010

Opera 6… Opera 6??!??!

Forom Wikipedia:
Opera 6 released November 29, 2001
Opera 7 released January 28, 2003

Opera 10 released June 3, 2009

and Opera 10.60 released a few days ago.

This has to be a _very_ old article published as a new article some 7 years later???

Best regards.

GUS the Gamer

July 3rd, 2010

Its always better to download 1 large file than 100 small ones!!

btw
Germany Won 4-0!! ;D WHOOOO
vuvuzela: bbbbbbbzzzzzzzzzzzzzzzzzz

Peter

July 3rd, 2010

Thanks for the information and example of how much css sprites will help.

Also, you have one of the cleanest looking blogs I have ever seen. Nicely done. You definitely practice what you preach.

Andrew Roberts

July 3rd, 2010

I have personally never done the huge one image sprite before, just the basic nav bar. I need to try it though!

keyser_soze

July 3rd, 2010

If you’re interested in making your own sprites from scratch, here’s a great tutorial:
http://www.webvamp.co.uk/blog/coding/graphical-css-rollover-menu/

Michael Butscher

July 4th, 2010

Is there a reason why the width of “#logos” is 102 pixel instead of 100?

If e.g. one logo has a green background, next has a red one, wouldn’t this lead to problems with wrong colored bars at the edges of the logos?

Basch

July 4th, 2010

The CSS code above is incorrect. When moving the background image left in a div, the background position sould become a negative value. When creating sprites, you will always be using negative numbers. Not only the x-value is wrong in above CSS, also, the x- and y-values are reversed. A line of CORRECT CSS would look like this:

// Third logo
#logos li a.solymar {background-position: -200px 0px;}

James Tombs

July 4th, 2010

If you regularly change your sprite images such as the logos of the latest companies you have done work for then you may not achieve a good balance of speed increase from one sprite when old cached version are floating around.

Also the larger you make your sprites the more complex it will be come to code and change at a later date.

Adam Hermsdorfer

July 4th, 2010

@michael I wondered the same thing. @basch you are right. Besides that, this was a good article on the effectiveness of sprites.

John Faulds

July 4th, 2010

Using text-indent for the text hides it for normal-sighted users

Using text-indent also means that people who are browsing with images off see nothing on screen. There are other image replacement alternatives that avoid this problem, e.g. http://www.tjkdesign.com/articles/tip.asp

Dominic Watson

July 5th, 2010

Is there anything to suggest that CSS sprites affect rendering speed at all? I use Sprites a fair bit on my site and afterwards had one or two people claiming that the site is now slower on their mediocre laptops. It’s obvious that bandwidth is saved and everything is sped up downloading-wise but would love someone to do tests… Perhaps I could be the first to do it! :P

Peter Richards

July 5th, 2010

@Basch. Many thanks for pointing out my sloppy CSS code – you can understand why I am now an SEO rather than a front end developer! The spirit of the article was attempt to show how techniques that have been around for a while in the development world, perhaps now have more relevance than ever.

jonathanulco

July 5th, 2010

Sprite = css background
Css Sprite with image inline we can use the propriety “Clip”. An old tutorial : http://css-tricks.com/css-sprites-with-inline-images/ .In my view i don’t use css sprite for logo; it ‘s not decorative image like background css. Logo should have sense. (sorry for my english i’m French :)

Tim Aldiss

July 5th, 2010

Really written useful information for web developers and SEO experts alike. Thanks for taking the time to put pen to paper Pete. A great read.

Jacob Gube

July 5th, 2010

@John Faulds: I’m familiar with Thierry Image Placement, but as part of my “Does It Really Matter?” Philosophy on web development, I consciously choose text-indent. Users browsing this site with images disabled account for a small set of readers and as a normal-sighted user, you’d miss out on many things, and in turn, would lead to a poorer experience. You might see a flaw in this argument (“What about mobile users with text-only browsers?”) — we have an alternate version of Six Revisions just for mobile device users.

Matthew Pennell

July 5th, 2010

Before you start converting every single image on your site into one enormous CSS sprite, it’s worth considering the downside of combining images – memory usage by your browser in uncompressing the sprite image.

See here for more details: http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/

Peter Richards

July 5th, 2010

I agree with you and enjoyed reading your post of when a CSS sprite should and should not be used. I would never advocate using sprites for larger images that naturally need the ‘img’ tag and ‘alt’ element to carry the primary keyphrase. But from my professional point of view, I am obligated to maximise the efficiency delivered to both users and search spiders.

Martin

July 5th, 2010

Sprites are a great technique for saving bandwidth (check out Amazon’s use of them), but also a complete pain in the backside if changes are ever needed. If you’re not expecting high traffic, it’s much easier to use the normal img route, and restrict sprites to such parts as the navigation.

Luis Herrero

July 6th, 2010

Hi again

I’ve made an app for sprite creation this weekend. It’s quite simple and want to add some features. You can check it out at http://www.luisherrero.es/lab/sprite-generator/

Hope you guys find it useful!!

camasuvi

July 6th, 2010

It’s very odd to worry about opera 6 in this century :)

Hiren Khambhayta

September 22nd, 2010

Thanks for the tutorial, I have used this technique in my website and boosted my site opening speed by about 200% it was loading before in 7 seconds but now it loads in just 3 seconds.

Izdelava strani

October 13th, 2010

Although I agree with positive effects that sprites have, I also think that sprites can make your markup a living hell to maintain.

Ian Harte

March 14th, 2011

This is very interesting, deffo going to look into this in more detail! Not got time on a monday morning though haha! Gonna have to have a look sometime in week thanks for opening my eyes to this though.

Joanne

April 7th, 2011

Sprites are a great technique for saving bandwidth (check out Amazon’s use of them), but also a complete pain in the backside if changes are ever needed. If you’re not expecting high traffic, it’s much easier to use the normal img route, and restrict sprites to such parts as the navigation.

Leave a Comment

Subscribe to the comments on this article.