Spritesheet generator with a real packer

For icons on a normal website, usually not — and that is the honest answer this page leads with. The 2004 argument was request count: HTTP/1.1 allowed about six parallel connections per host, so 40 icons meant seven rounds of queuing. HTTP/2 multiplexes all 40 over one connection and the queue disappears. What survives the change is narrower: a canvas or WebGL renderer batches draw calls when every quad samples one texture, an animation frame sequence has to be one image to be driven by steps(), and a single sheet decodes once instead of 40 times, which matters more than transfer on a low-end phone. If your case is a set of interface icons, an inline SVG sprite is the better tool.

The sheet is being sampled at a fractional scale, so the pixel at the frame boundary is a blend of your sprite and whatever sits next to it. It happens on a 1.25 or 1.5 device pixel ratio, inside a CSS transform, and in any WebGL texture with linear filtering. Spacing alone moves the neighbor out of reach but replaces it with transparency, which fringes the edge dark once alpha is premultiplied. The fix that works is bleed: this page repeats each sprite's own edge row and column outward into the gap, so the half-pixel the sampler steals is the sprite's own color.

The to-position must be the full sheet width, not the width minus one frame. With steps(n) the browser holds n discrete values between the from and to positions and never renders the to position itself, so -(n × frameWidth) yields exactly frames 0 through n-1. Subtracting one frame first, which reads more intuitively, plays the last frame twice and drops the first. The animation this page emits uses the full width, and the live preview steps through the same stride so the two cannot disagree.

No, and not because it would be hard. Every packer written for game engines rotates, and the atlas format records rotated: true so the renderer can undo it in the shader. CSS has no equivalent: background-position can only translate the image, so a rotated frame would be unusable from a stylesheet. Rotation would buy a few percent of occupancy in exchange for output half this page's audience could not use, so every frame here is axis-aligned and the JSON records rotated: false.

That means the originals were compressing better separately than they do together, which is the standard result for photographs and for PNGs that were each quantized to their own small palette. A 32-color icon saved on its own carries a 32-entry palette at roughly 1 byte per pixel; merge 40 of them and the combined image needs true color, so every pixel costs 4 bytes before deflate sees it. The stats line above the preview compares the two totals for exactly this reason — when the sheet is bigger, the set is not worth sheeting.

Not for CSS, and not for WebGL 2 or any modern GPU. The power-of-two checkbox exists for WebGL 1 and OpenGL ES 2, where a non-power-of-two texture cannot use mipmaps or repeat wrapping, and for a handful of older mobile drivers that quietly fall back to a slower path. Turning it on rounds both sides up to the next power of two, and a sheet that came out 565×632 becomes 1024×1024 — the same artwork at 30% occupancy instead of 89%. Leave it off unless a renderer is actually asking for it.

The JSON is for renderers that draw sprites themselves rather than through a stylesheet — Phaser, PixiJS, a plain canvas loop, or your own WebGL quad batcher. It is the TexturePacker hash layout: each frame keyed by original filename, with frame, spriteSourceSize and sourceSize rectangles, plus a meta block naming the image and the scale. The frame rectangles are the identical numbers the CSS turns into negative offsets, so the two outputs can never drift apart.