How we fit a 10-fighter fighting game into 1 MB

Devlog · November 14, 2026

Ninja Fighters is one HTML file: ten hand-drawn fighters, ten stages, music, effects and a tournament mode. It used to be a 2.98 MB file that took 2.07 MB to download. Today it is a 1.03 MB download. Here is what worked.

1. Palette-quantized lossless WebP sprites

The fighter art was the biggest cost: 1.91 MB of PNG. Lossy WebP blurred the pixel detail, so instead we reduced each sprite sheet to a 255-colour palette with no dithering, then saved it as lossless WebP. Sprites dropped to 0.67 MB with no visible change.

2. Minify everything, ship one file

The readable source stays readable. A build step runs esbuild over the CSS and JavaScript, squeezes the HTML whitespace and strips test hooks. One request, no bundler runtime.

3. Load what the player turned on

Announcer voice clips only load if the announcer is switched on. Web fonts preload without blocking the first paint, and the stage art redraws once they arrive.

4. Brotli at the edge

Cloudflare Pages serves the file with Brotli compression. Base64 image data compresses poorly, which is why shrinking the images themselves mattered most.

5. Cheap canvas wins

The main canvas is created opaque (alpha:false), so the browser skips compositing work. A ten-fighter tournament frame takes about 6.7 ms on a laptop, well inside the 16.7 ms budget for 60 fps.

Results

Try it: the whole game loads in about a second on a fast connection. Play Ninja Fighters.