Call 03332 207 677

Dean Marsden

What are CSS Sprites and how Can They Help Your Website?

4th Jul 2011 SEO 2 minutes to read


CSS SpriteIf you’ve ever run a website through Google’s Page Speed tool you might have received a recommendation to ‘Combine images into CSS Sprites’. Firstly what is a CSS sprite? A cocktail made from a popular fizzy drink? No. A rather ugly looking website image file? Yes!

Why do you need them?

Before I explain how it works, you probably want to know why Google is recommending you use on or if you have a high traffic website, how it can help you save money. Converting many of your  images into one CSS Sprite will reduce the load time of your website quite significantly. This has two beneficial effects:

  • Decrease website load time which is a Google ranking factor, meaning you can increase your website’s rankings and receive more traffic
  • Decrease the amount of data downloaded from your web hosting, saving you money on your bandwidth bill

How it works

Every time a user visits your website, their computer makes requests to download every image used on your web page. This back and forth can really slow down the speed in which your web page loads. CSS Sprites work by combining many graphics into one image file thus reducing the number of requests each visitor has to make to your website’s hosting. The file size of one image is typically less (although not always) than the combined size of all the separate images due to the way jpeg or gif files are compressed.

I only recommend creating a CSS Sprite for smaller image files such as icons, navigation/menu graphics and repeating background images. It will not benefit you to create them for large graphics and photographs.

A CSS Sprite will look a little odd after creation, a bit like a sticker sheet, but with clever positioning in your CSS stylesheet nobody will ever know of its ugliness. You simply set the top and left position and width and height of the graphic you wish to show in each stylesheet ID or class. Its a bit like your cropping the image from the image sprite using the coordinates of its position and size.

Some examples

Websites such as Facebook, Google and Amazon use CSS Sprites to make huge savings on their hosting costs and deliver a fast site to each user. In fact for every second slower Amazon’s site loads, they could lose hundreds or even thousands of sales. Let’s look at Amazon’s image sprite:

Amazon's Image Sprite

Creating CSS Sprites

If you wish to create a image for a CSS Sprite you can do it manually in any most image editing tools such as Adobe Photoshop. There is also a website called SpriteMe which allows you to enter the URL of your website and it will identify all the images used and it will create a single file of the smaller images and you can also choose which images you want to combine then download the created image for use in your new CSS Sprite. The other step of the process requires good knowledge of CSS code. You may need to get a professional website designer to create this for you.

Why not try making your own CSS Sprites. You can drastically improve your website for both users and search engines in one hit.

Share this post

Dean Marsden
About the author

Dean Marsden

A big fan of art and design, Dean is an avid photographer with an eye for creating beautiful images. His other skills include playing golf, which he’s done since he was 15. He’s a little quiet, but you know what they say about the quiet folk…

What do you think?

  • aspect-ratio UK Search Awards Sam Noble Winner
    Cat Birch

    Samantha Noble Wins UK Search Personality 2016 at UK Search Awards

    The UK Search Awards is an exciting night for all; brimming with excitement, anticipation and pride, these awards showcase the very best in Digital Marketing. Our pride was overflowing as we watched our very own Sam Noble be honoured with the top prize of the night: UK Search Personality 2016.

    (more…)

    Cat Birch
    @MissCatBirch
    2nd Dec 2016
    News
  • aspect-ratio UK Search Awards Sam Noble Winner
    Cat Birch

    Koozai Shortlisted for Three Awards at the UK Search Awards 2016

    The UK Search Awards are here and we’re pleased to announce that we’ve been shortlisted for three awards at this prestigious ceremony.

    What an incredible year 2016 has been for us so far. We’ve celebrated turning 10 as a company, and in the last few months alone we’ve been nominated for a range of campaigns, won a bunch of awards and now we’ve been shortlisted for even more success.

    (more…)

    Cat Birch
    @MissCatBirch
    30th Nov 2016
    News

Digital Ideas Monthly

Sign up now and get our free monthly email. It’s filled with our favourite pieces of the news from the industry, SEO, PPC, Social Media and more. And, don’t forget - it’s free, so why haven’t you signed up already?