Choose PNG instead of JPEG for a crisp transparent sprite

1. Export the transparent source as PNG

1. Download the original 16 × 16 PNG and open the runnable comparison. You can also extract the project ZIP and open index.html offline.
2. Find Export the same pixels as PNG and JPEG. The fixed source is exported automatically; use Re-export locally to repeat it.
3. Under Transparent PNG, choose Download PNG. Inspect its transparent padding and soft-alpha boundary against the checkerboard.

In the inspected export, PNG retained alpha values 0, 128 and 255. The following comparison separates that transparency requirement from JPEG's color loss.

2. Compare PNG and JPEG on the same opaque surface

JPEG cannot retain this sprite's transparency. To measure codec loss separately from alpha flattening, the demo first draws the source onto an explicit white background. It exports that identical 16 × 16 canvas as both PNG and JPEG, without resizing.

1. Download White reference PNG. This is the opaque reference for the format comparison.
2. Download JPEG, quality 0.92. The browser call requests image/jpeg with quality 0.92; the demo verifies the returned format.
3. Inspect both files at their native dimensions and compare the enlarged previews. Look at the cyan details, dark eyes and pale pixels around the character.
4. Read jpegVsOpaqueReference in the measured report. It compares decoded pixel values, rather than compressed byte sizes.

These are the actual downloaded 16 × 16 exports from the recorded run, displayed at 8×. The checkerboard is a preview background. Repeat the runnable export to measure your browser.

For this fixture, JPEG changed 253 of 256 pixels. The maximum channel difference was 184, and RGB root-mean-square error was 24.8656. Independent decoding of the downloaded files agreed with the browser's measurements.

Those numbers describe this input, browser and quality setting. The encoder selected 4:2:0 chroma sampling; quality 0.92 is a request to that encoder, not a portable guarantee across browsers. A flat opaque image can produce much smaller differences.

3. Resave the decoded JPEG as PNG

The demo decodes its actual JPEG, draws those decoded pixels to a new canvas and exports PNG. Download JPEG → PNG, then compare it with both the JPEG and the opaque reference.

The resaved PNG had the same decoded pixels and artifacts as the JPEG. It was still fully opaque. PNG added no further differences in this test, but it did not recover what JPEG had discarded. Return to the original PNG or editable artwork for a clean export.

4. Keep the browser's color and alpha boundary explicit

Important limit: lossless PNG encoding does not make every browser decode/draw/export round trip identical to the original file's RGBA.

Independent decoding found 33 original-file pixel differences in this transparent browser export: red changed from 224 to 223 in all 32 partial-alpha edge pixels, and one invisible magenta pixel (255, 0, 255, 0) became transparent black (0, 0, 0, 0). Alpha remained intact. The large raw difference in the invisible pixel is not a visible color artifact.

Exported PNG versus its already-decoded canvas surface had zero differences, as did the opaque reference. This distinguishes canvas alpha/color representation from JPEG's lossy export. Keep the original asset when hidden RGB, source profiles or exact file bytes matter, and validate your full processing path.

For this transparent sprite, choose PNG from the original artwork. If a pale or dark edge is already present in that original, inspect its partial-alpha colors separately; changing file format alone will not repair them.