O'Reilly logo

Instant PageSpeed Optimization by Sanjeev Jaiswal

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Setting up CSS sprites (Advanced)

I have already shown how to minimize the file size by combining all images in the Minimizing HTTP requests (Simple) recipe. CSS sprites are a kind of advanced version of image maps that uses the CSS technique to handle different images for different purposes from the same big image file. Users usually think that combining all images into one would make the file's size much larger but it is not like that. It will either be the same or smaller than the sum of all individual file sizes.

Getting ready

This tutorial doesn't concentrate on how to make beautiful images and combining all images into one; so, I assume you have the combined image to play with CSS sprites. Almost all major websites (Yahoo!, Google, Amazon, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required