6 reliable css sprite generators

Sprites aren’t little images but they’re made of one big image.

Essentially, they’re combinations of unlimited number of images formed into one picture. Graphic designers are using CSS image sprites in order to significantly reduce HTTP request.

As they combine all images into a single file, loading time becomes a lot faster.

And with the help of CSS background positioning, it becomes easier to implement individual images.

Unfortunately, this technique can be very time-consuming. This is because you’ll need to manually combine every image that you want to include in a single file.

Then, you’ll have to fiddle with CSS so the images will display properly.

But, guess what? There are free online tools available that you can use to automate the entire process. In this post, you’ll find a collection of tools that let you take your images to generate CSS sprite.

It doesn’t matter if you want to make sprite from your images on your computer or convert your existing site. These tools can get the job done as fast as you want them to be.

1. Project Fondue

It’s one of the best generators for CSS sprite that comes with plenty of options. This tool lets you upload a ZIP file containing the images you want to convert into a sprite. Then, the tool takes care of the rest. To achieve desired sizes for the images, you’ll have to specify their values.

2. Online CSS Sprite Builder

This generator lets you upload several images all at once helping you save time. Then, you need to choose the right output file. Depending on the type of output file you’ve chosen, you’ll receive either Sass or CSS code. Other options are also included to make sprite images more interesting.

3. SpritePad

It’s another sprite generator that lets you create CSS sprite images within seconds. After uploading your images, you can have a PNDG sprite and its CSS code. You may also use its cloud storage where you can store your CSS sprites. By signing up, you’ll be able to save your sprites as editable versions that you can easily modify online.

4. Spritebox

This is less automated than the 3 options above. In this tool, you can upload sprites and modify areas where you can generate CSS. Although it doesn’t generate CSS sprites for you, this is still a good tool to help you build sprites in Photoshop. Or if you simply want help with coding of sprites.

5. Canvas

Uploading images using this tool can be quite tricky as you need to do it one at a time. However, if you’ve links where the images are located, then you can just paste those in a list. But make sure that they have their corresponding class names. There are several options available. For instance, you can change the images’ padding and background colors.

6. Spritemapper

This is an application that you need to download and install to your computer. In order to use it, you’ll need to have knowledge on how to run application from the command line. But don’t worry. The implementation of it is quite easy. To generate sprite, you should point it to your existing CSS file and the program will do the rest for you. This is great if you don’t want to lose the original CSS file and your image files.

The use of these tools doesn’t require a payment. However, some of them may ask for donations so their developers can continue offering them free of charge.