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 G4 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.

I’m skeptical. What is it buying you, and at what cost? What’s the return on investment? Is it improving conversions, improving customer/reader loyalty?

To me, content is king. I’ve visited, bookmarked, and returned to many web sites that are no-frills black-text-on-a-white-background. I remember fondly the days of Gopher, shortly before the rise of the World-Wide Web: all information, and no waste.

Let’s say there are 3 kinds of people in the world:

1. Graphic Designers
2. Computer Programmers
3. Everyone Else

Let’s look at these groups from the bottom-up:

Everyone Else
These people don’t really know or care about typefaces. They are likely to stick with whatever default font is selected in Microsoft Office. To Everyone Else, there are 3 fonts in the world: Serif, Sans Serif, and Illegible.

(There is a curious subset of Everyone Else, known as Human Resources Managers. These cheery folks recognize 2 fonts: Comic Sans and Stodgy.)

Computer Programmers
These people know that there are many different font files on their computers, and that some are TrueType and some are PostScript. To Computer Programmers, there are 4 fonts in the world: Serif, Sans Serif, Monotype, and Illegible.

Graphic Designers
Graphic designers love type. They are well-versed in the anatomy of a typeface, and speak lovingly of typeface designer Eric Gill. They can identify by sight 20,000 different fonts, and have probably designed several themselves.

On the web, you can be fairly certain that a given user will have Arial or Helvetica (sans serif), and some variant of Times (serif). There are a few others, but basically you tend to focus on serif and sans serif. You can adjust various type properties via CSS: font sizes, colors, leading (that’s the space between lines), and even letter-spacing. Take a look at 10 Examples of Beautiful CSS Typography and how they did it to see some interesting examples.

At the recent WordCamp Birmingham, I caught Sara Cannon’s presentation on Branding WordPress. She talked about sIFR, and I thought that, perhaps for the sake of peace and brotherhood, I should go ahead and use sIFR and play around with some funky type. The sIFR text is selectable as text. It’s not as bloated as you might think–even the SWF file containing the specific fonts can be optimized to only include the characters you need–and even though it uses Flash, it is used to enhance the page on Flash-capable browsers. For everyone else, it still appears as regular HTML type.

Other folks at the conference (including Mitch Canter) mentioned TypeKit, a web-based service, as an alternative to sIFR. I decided to try it on this blog by using a couple fonts with a little more character for the title and headings. I think the typefaces I picked might have a little too much character–they are falling into my Illegible category–but it works, and it’s easy.