Yahoo’s Best Practices for Speeding Up Your Web Site lists minimizing HTTP requests as the very first recommendation. One of the ways they suggest doing that is by using CSS sprites (which I mentioned previously in Clever Ways to Save Bandwidth).
I recently applied this technique to a series of social media icons. Here’s an example:
http://osric.com/chris/css-sprites-social-media-icons-example.html
The example page uses a single image to display 8 separate icons from the following single image:
Be careful when using background images as links. Since there is nothing inside the anchor element, what appears if the image fails to load, or if the user agent is a screen reader? I added descriptive text to the title attribute of the anchor element. According to Dive Into Accessibility’s Adding Titles to Links, reading the title attribute is an optional feature in the JAWS screen reader that is not enabled by default. I tested it using a recent demo version of JAWS 12, and it read the title attributes without any settings adjustments. However, in a text-based browser, or with CSS or images disabled, the links will be completely invisible.
Google, in the following example, uses icons in conjunction with text. The icons add to the experience, but the site is still fully functional without the images:
What is the gain from this effort to speed up a site?
There’s the reduction in file size–from 20.3 kB to 3.98 kB in my social media icon example, just 20% of the original file size–although part of that is due to a reduction in the overall number of colors. 8-bit images can have at most 256 colors, so the 8 icons share all 256, and are consequently not as true to the originals. Using CSS sprites for logos of different shapes and sizes, or for informational icons, might be a better use since the color palette would be shared.
Google’s sprites are again a good example that combines both logos and informational icons:
In kilobytes it is still a small savings compared to the bandwidth requirements of most of today’s pages. The savings are just for the initial page load though, because the browser will use cached images on subsequent loads. The user agent still makes a call to the server with every request, thought the server will reply with a short message (304 Not Modified).
There’s still a round-trip between client and server. How long does that take? From my high-speed connection, only a couple milliseconds. From a mobile device? I haven’t tested it, although it is worth trying. The speeds on my 4G mobile device are still excruciatingly slow, so improving speed to mobile devices would go a long way to improving the mobile experience.
Overall, using CSS sprites seems like a trivial savings–one that the user will not notice, one that the server can manage, one that makes the images more difficult to maintain, and one that may reduce accessibility. If your site has extremely high traffic volumes it might be worthwhile to reduce the number of requests to the server, but overall it doesn’t appear to be particularly effective. Feel free to disagree in the comments.