CSS Sprite Sheet Generator

How to make a sprite sheet

1. Drop your images on the drop zone, or click it to choose them. PNG, SVG, WebP, JPG and the other formats your browser can read are accepted, up to 500 images. Each file appears in the Images list with its size; the × button removes one image and Remove all images clears the list.
2. Pick a Layout: Grid, Packed (smallest sheet), Horizontal strip or Vertical strip. With Grid, Columns (0 = automatic) sets the number of columns.
3. Set the Padding (px) between sprites (2 by default) and tick Power-of-two size (256, 512, 1024…) if your engine or GPU needs it.
4. Choose the Data file: CSS (background-position classes), JSON (frame map) or CSS and JSON. Adjust the File name and the CSS class prefix (both “sprite” by default).
5. Check the preview, the Sheet size and the Space used, then click Download ZIP (PNG + data) or Download PNG only. The Generated code can also be copied directly.

Images are decoded in your browser and nothing is uploaded. An SVG without its own width and height is rasterized with its longer side at 256 px.

Choosing a layout

• Grid gives every image a cell the size of the largest image. With automatic columns the grid is roughly square. It is simple and predictable, and ideal when all sprites have the same size, like a tile set.
• Packed (smallest sheet) uses shelf packing: images are sorted tallest first and placed left to right in rows. The tool tries many sheet widths and keeps the one with the smallest area, taking power-of-two rounding into account when that option is on. Best for icons of mixed sizes.
• Horizontal strip and Vertical strip put the images in one row or column in the order you added them. That is what many animation players expect for frames.

The sheet cannot exceed 16,384 px per side or about 16.7 megapixels, the limit browsers can draw.

Using the CSS

The CSS contains a base class with the sheet as background-image and no-repeat, then one class per sprite named from its file: home.png becomes sprite-home. Names are lowercased, accents are removed, other characters become hyphens, and duplicates get -2, -3.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

Each sprite class sets width, height and a background-position with negative offsets. A sprite at x = 40, y = 20 gets background-position: -40px -20px: the whole sheet is shifted 40 px left and 20 px up inside the element, so only that sprite shows through the element’s box. Padding keeps neighbouring sprites from bleeding in when the page is zoomed or a texture is filtered.

High-DPI screens: draw your images at twice their display size, generate the sheet, then add background-size set to half of the sheet size to the base class, and halve the widths, heights and offsets. The tool does not generate this; it is a manual tweak.

Are sprites still useful with HTTP/2?

Sprites were invented to save HTTP requests. With HTTP/2 multiplexing, many small files load almost as fast as one, so the gain for websites is much smaller, and SVG icons or icon fonts are often better for scalable icons. Sprite sheets remain the standard for 2D games and animation frames: one texture means fewer GPU texture switches and one file to load.