Step 1: Select Images

Select multiple images which have been sliced already. You can also drag & drop them.

~ OR ~

Drop files here
Note that you should select double sized images if you will generate retina sprite. It will be downsampled for standard resolution.

Step 2: Select Sequence Algorithm

Select one of the sequence algorithms for sprite generation: left-right, top-down, diagonal and alt-diagonal.

Select best algorithm that suits your image structure and design logic.
Hint: If you will use your images in a horizontally flexible layout, you should use diagonal algorithm for allowing it to exceed a fixed width.
Inspired by SpriteSmith.

Step 3: Select Resolution

With retina mode, you can generate both standard and retina images and CSS codes which are ready to use in your project.

What's CSS sprite images?

Generation of sprite images and css background positioning is a modern web development technique. Advantages of this technique are: bandwidth saving, decreasing http requests for images, preventing flicker on hover images and etc.

Why to auto generate sprite images? Is it really necessary?

Automation of the sprite creation process makes it possible to update your collection easily on a revision. You don't need to use a graphical design tool (like photoshop) or a source file (psd) for a task like this.

What about algorithms? Which algorithm should I select?

Select best algorithm that suits your needs and fits in your web design. These are algorithms that currently being used on several platforms (Grunt, node.js and etc) for automating sprite generation process.