Sprite sheets explained: one image, many sprites

A sprite sheet is one image containing many smaller images, plus a map of where each one sits. A game draws a character's walk cycle by showing different rectangles of the same sheet; a web page shows a dozen icons from one file by shifting which part is visible. The sprite sheet generator builds the sheet and both kinds of map, and this guide explains what each part does.

What a sprite sheet is

The word sprite comes from early computer graphics, where it meant a small image moved independently over a background. A sheet, also called a texture atlas, packs many of them into a single bitmap. On its own the sheet is just a picture; what makes it useful is the accompanying data that names each sprite and gives its rectangle: x and y position, width and height. Software then copies or displays only that rectangle.

Why pack images together

In games the reason is the graphics card. Switching from one texture to another between draw operations has a cost, and drawing many sprites from one texture lets an engine batch them into fewer calls. Animation frames on one sheet also load as a single asset. On the web, sprites became popular when every image was a separate HTTP request and browsers opened only a few connections at once, so twenty icons in one file loaded noticeably faster. HTTP/2 made many small requests cheaper and SVG icons replaced many bitmap sprites, so CSS sprites matter less than they did, but they remain a neat way to ship a set of small raster images or animation frames as one file.

Grid packing

The generator places images on an even grid. Every cell is the size of the largest image, the number of columns defaults to the square root of the image count rounded up, and optional padding (2 pixels by default) surrounds every cell. Ten 64 by 64 icons with automatic columns make a grid of 4 columns and 3 rows; with 2-pixel padding the sheet is 4 × 64 + 5 × 2 = 266 pixels wide and 3 × 64 + 4 × 2 = 200 pixels tall. Grids are predictable and ideal for animation frames of the same size. The trade-off is wasted space when sizes vary a lot. Dedicated tools such as TexturePacker use bin-packing instead, fitting rectangles tightly, trimming transparent borders and even rotating sprites to save space, at the cost of a less readable sheet.

Sprites in CSS

On a web page, a sprite is an element with a fixed width and height whose background image is the whole sheet, shifted with background-position so the right rectangle shows through. The offsets are negative because you move the sheet up and left behind the element. In the ten-icon example, the second icon sits 2 + 64 + 2 = 68 pixels from the left and 2 pixels from the top, so its class sets width and height to 64px and background-position to -68px -2px. The generator writes one class per image, named from your file names with a prefix you choose. For sharp results on high-density screens, build the sheet from images at twice the display size and set background-size to half the sheet's dimensions; the generator does not do that scaling for you.

The JSON map for game engines

Game engines and animation libraries read sprite positions from data files rather than CSS. A widely supported layout is the TexturePacker JSON hash: a frames object keyed by sprite name, each entry holding a frame rectangle with x, y, w and h, and a meta block giving the image file name, the sheet size, the pixel format and the scale. Phaser, PixiJS and other frameworks load this format directly. The generator writes the frame rectangles and meta block; it does not write trimming or rotation fields because it never trims or rotates images.

Practical tips

• Use PNG with transparency for sprites so the background shows through.
• Keep padding of at least a pixel or two. When a game scales or filters a texture, neighbouring pixels blend, and without a gap the edge of one sprite bleeds into the next.
• Name files in order, such as walk-01 to walk-08, so animation frames stay in sequence.
• Mind the size. Keeping a sheet within about 4,096 pixels on each side stays inside the texture limits of older graphics hardware and browsers.

To preview frames as an animation before building a sheet, drop them into the GIF maker. The image resizer helps if your source images need a consistent size first, and App icon sizes explained: every size, and why there are so many covers icon dimensions for apps. Nothing is uploaded.