User Rating 0.0 ★★★★★

Total Usage 0 times

Category Image Editors

Drop PNG, JPG, GIF, or WebP images here

or click to browse · max 50 files · 10 MB each

CSS Class Prefix e.g. icon, sprite, img

Padding (px)

Max Sheet Width (px)

Output Format

Layout

Retina @2x

Cache-bust Digest

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

CSS sprite sheets reduce HTTP requests by combining multiple images into a single file. Each element references the combined image via background-position offsets. Incorrect offset calculations produce cropped or misaligned icons - a defect that compounds across responsive breakpoints and retina displays. This tool implements a shelf bin-packing algorithm to compute optimal placement, generating pixel-accurate CSS with width, height, and negative background-position values for every sprite. Retina output doubles the source canvas and emits a background-size declaration scaled to 50% of the physical sheet dimensions.

The packing algorithm sorts images by descending height and assigns them to horizontal shelves. This heuristic does not guarantee globally optimal area but typically achieves 85 - 95% fill rates for icon sets of similar aspect ratio. Padding between sprites prevents texture bleeding at fractional zoom levels. Note: input images must share a consistent visual language (size, padding) for the resulting sprite to be practical in production CSS. The tool processes everything client-side - no images leave the browser.

Formulas

Each sprite's CSS declaration is computed from its packed position on the composite canvas:

background-position = −x −y

Where x and y are the top-left coordinates of the sprite within the sheet, in px.

The shelf packing algorithm determines placement:

{

x = shelfX if shelfX + w + pad ≤ maxWx = 0, new shelf, otherwise

Where shelfX is the current horizontal cursor, w is the image width, pad is the configured padding, and maxW is the maximum sheet width.

For retina output, the 2x sheet uses native pixel dimensions, while the CSS references logical dimensions:

background-size = sheetW2 × sheetH2

Where sheetW and sheetH are the physical pixel dimensions of the 2x canvas.

The FNV-1a hash for cache-busting digest is computed over the raw RGBA pixel buffer:

hash = FNV1a(pixelData) ≡ n∏i=0 (hash &xor; byte_i) × 16777619

Where the initial offset basis is 2166136261 and multiplication wraps at 2³².

Reference Data

Parameter	Default	Range	Description
Padding	2px	0 - 50px	Space between sprites to prevent bleed at sub-pixel rendering
CSS Class Prefix	`icon`	Any valid CSS ident	Base class for all sprites, e.g. `.icon`, `.icon-name`
Retina (@2x)	Off	On / Off	Generates a second sheet at double resolution with media query
Layout	Horizontal shelves	Horizontal / Vertical	Shelf packing direction
Output Format	PNG	PNG / WebP	Sprite sheet image format
Max Sprite Width	2048px	256 - 8192px	Maximum canvas width before wrapping to next shelf
Max Images	50	1 - 50	Browser memory constraint for canvas compositing
Max File Size	10MB	Per image	Prevents excessive memory allocation on decode
Supported Formats	PNG, JPG, GIF, WebP	-	Raster formats decodable by browser Canvas
Filename Sanitization	Auto	-	Strips non-alphanumeric chars, lowercases for CSS class names
Bin Packing Algorithm	Shelf (NFDH)	-	Next Fit Decreasing Height - simple, fast, good average fill
Fill Efficiency (typical)	85 - 95%	-	Depends on variance in image dimensions
background-size (retina)	50% of 2x sheet	-	Ensures retina image renders at 1x logical size
Cache Busting	FNV-1a hash suffix	On / Off	Appends content hash to filename for CDN invalidation

Frequently Asked Questions

Shelf packing (Next Fit Decreasing Height) sorts sprites by height and places them left-to-right on horizontal rows. When a sprite exceeds the remaining shelf width, a new shelf begins below. This runs in O(n log n) time but can waste vertical space when sprite heights vary significantly. Optimal rectangle packing (e.g., Guillotine or Skyline algorithms) achieves tighter fills but at higher computational cost. For typical icon sets with 50 or fewer images of similar dimensions, shelf packing achieves 85 - 95% fill efficiency, which is sufficient for production use.

Without padding, sub-pixel rendering and browser zoom levels can cause adjacent sprite pixels to bleed into the visible area. A padding of 2px is the practical minimum for standard displays. If your sprites will be rendered at fractional CSS sizes (e.g., inside flex containers with percentage widths), increase padding to 4 - 8px. Retina displays double the physical pixels, so 2px logical padding becomes 4px physical - generally safe for 2x screens.

The tool generates two canvases. The 1x sheet uses images at their uploaded size. The 2x sheet also uses images at their uploaded size but the CSS sets background-size to half the sheet's pixel dimensions. This means on a 2x device, the browser fetches the larger image but renders it at logical 1x dimensions, resulting in sharp rendering. You must ensure your source images are already at 2x resolution for this to be effective.

Shelf packing groups images into rows based on the tallest image in each row. If you mix a 16px icon with a 512px banner, the short icon's row inherits the banner's height, wasting significant vertical space. Sort your source images by intended use case: group icons together and large assets separately. Alternatively, reduce the maximum sheet width to force more wrapping and reduce per-shelf waste.

The output is plain CSS with class selectors. You can copy it directly into a .scss or .less file. To convert to a SASS mixin pattern, replace the base class background-image declaration with a mixin and @include it in each sprite class. The background-position values remain identical regardless of preprocessor - they are absolute pixel offsets.

FNV-1a is a non-cryptographic hash with a 32-bit output space (4.29 × 10⁹ values). Collision probability is low for typical use but not zero. It is suitable for CDN cache busting - where a collision merely serves a stale asset - but not for security-sensitive deduplication. For stronger guarantees, use the browser SubtleCrypto API to compute SHA-256, though this tool prioritizes speed for interactive feedback.