Making Friends with CSS Sprites: Techniques, Generators

I hope you understand what those sprites are. The name is quite misleading because sprite, in this case, is not a small picture, it's a one large image. You've probably seen that CSS-trick when a button changes on hover, usually the same image of a button is shifted or reflected.

CSS-Sprites extend this technique. The difference is that instead of two or three images, combined into one, you can use any number of images. The term "sprite" came from the gaming industry. The idea was pretty simple: computer can create an image in its memory, and then display only part of it, which is much faster than creating new image every time. CSS-sprites are utilizing the same idea: get a picture once, to display for each case some of its part.

Why combine these images? Wouldn't it be faster to load smaller images?

Not exactly... Previously, we had to cut images to make the so-called slices, so that the page could load faster. This technique created the illusion of faster page loading, due to the fact that number of pieces were loaded almost simultaneously. Each slice created separate http-request, and the more requests, the less effective your page is.

Ok then, so how can we create those sprites?

To ease your job devs have created various tools both online and offline for creating CSS sprites. They are all pretty easy to use and do their job quite well. So let’s have a look at a list of recommended CSS sprite generators.

SpritePad

SpritePad is a drag-and-drop interface for creating sprites.

* * *

Compass

Compass is an excellent framework that is able to create sprites from a specific folder with images. It also uses Sass.

* * *

Lemonade

Lemonade is a tool that can be used to create files with sprites by simply adding lines of code in Sass-files.

* * *

SpriteMe

SpriteMe is a bookmarklet, which is able to generate and view the sprites used on other site.

* * *

Fireworks CS6

The latest version of Fireworks software includes function to generate sprites.

* * *

Sprite Cow

Sprite Cow is a usable service for manual "cutting" of files for sprites.

* * *

Glue

Glue is a command line to generate sprites.

* * *

CSS Sprites

CSS sprites is another one cool generator of css sprites.

* * *

Sprite Right

Sprite Right is a sprite generator app for Mac.

* * *

Spritebox

Spritebox is a drag and drop interface for generating sprites.

* * *

CSS sprites are pretty important for any website, especially if you're running after loading speed. Please consider this technique as one of the most important optimization practices.

Also, if you're a guru of optimizations, the comments below are waiting for your bright ideas 🙂