Archive for July 15th, 2009

What’s a sprite? I drink Sierra Mist

CSS sprites are website images that contain many smaller images. You can then use CSS to show only a portion of the image at a time.

This is done to limit the number http requests required for your page. It’s a pretty common practice to improve a website’s performance. The technique is used on tons of websites, including the one I work for, Yahoo! News.

To learn more about css sprites, check out any of the hundreds of tutorials out there.

CSS sprites on Yahoo! News

Back to Yahoo! News… here’s an example of one of the sprites we use on the site:

View the actual sprite

You can see from the image above, the sprite is pretty huge (yes, that says ten-thousand pixels). It contains almost all the little graphical pieces used on the homepage, sections and articles of news.yahoo.com.

Requirements

The sprite had a couple requirements…

1. allows non-alpha transparency (limiting us to GIF or PNG)
2. works in all A-grade browsers
3. maintains high image quality

We opted for PNG-8 because it compresses better than GIF, and doesn’t require any hacks to implement transparency for all the A-grade browsers.

Photoshop doesn’t know how you use your sprite

So we saved the sprite image as PNG-8, using the perceptual filter to reduce full-color to PNG-8’s 256 color palette (The perceptual filter creates the palette giving priority to the colors your eyes are most sensitive to). Unfortunately, Photoshop couldn’t predict how our sprite would be used on the site. It gave the same priority to the repeated gradient behind our navigation at the top of the page, as it did to the little rss icon at the very bottom.

The problem

When we saved using any of the default filters, our navigation looked like crap. The smooth gradient in the original image was reduced to just 4 colors. Saving the image this way didn’t meet our 3rd criteria for the sprite: maintain high image quality. We needed to customize the color palette specifically for this sprite.

The solution

To solve the problem we modify the palette by hand, making sure it includes more of the colors needed to make that gradient look smooth.

In Photoshop, open your original, full-color sprite and go to File -> Save for Web & Devices…

Choose PNG-8 for the image format and Perceptual as your filter. Making sure you’re on the 2-Up tab, zoom into the part of your sprite you’re concerned about. For us, it was the blue gradient for our navigation bar.

Now you need to make room for more shades of blue. Find some similar colors and delete them. Because our sprite had a lot of light gray gradients, we found that the palette contained a lot of colors really close to white (255,255,254). They’re so close to white that removing these from the palette wouldn’t be noticeable. Click on the colors you want to remove from the palette and click the little trash can icon.

Next, click on the “Original” tab. Using the eyedropper, select a color in your sprite and click the Add new color icon (the one just left of the trash can). The idea here is to add more shades of blue, so Photoshop has more colors to work with when drawing that piece of the sprite.

In the above image, each line connects where we used the eye dropper in our image to where the color ended up in the palette on the right.

Go back to the “2-Up” tab and hopefully your optimized image will look a lot better. If not, you can always go back and remove or add new colors to the palette. Once you have an optimized image that looks good, just click save.