The Youtube CSS Sprite

You’ve heard of them, but never used them. Check out youtube’s CSS Sprite.

Do you really understand them? The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position?

You can combine an unlimited number of images into one.

The origin of the term “sprites” comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images. The sprite was the big combined graphic. CSS Sprites is pretty much the exact same theory: get the image once, shift it around and only display parts of it, saves the overhead of having to fetch multiple images.

Speed Matters

Every single image, whether it’s an <img> tag or an background-image from your CSS is a separate HTTP-Request, so you can imagine how quickly those requests can wrack up.

Start Now, Try Spriteme

Using SpriteMe

SpriteMe is a bookmarklet. So after you’ve put it up in your bookmarks bar, just go to any website and click it. It will open up an overlay over the right side of your screen.