JPEG
17.13 kB- Size versus source
- 72.2%
- Mean RGB difference
- 0.6 / 255
- Changed RGB pixels
- 94.037%
- Configured quality
- 80%
Reproducible first-party test
JPEG, PNG, and WEBP when the browser supports output
Three files exported by the real editor from the same image, without adjustments or resizing. Compare appearance, size, and pixel differences without treating one sample as a universal rule.
Observed results
Project-owned PNG source: 23.72 kB, 1200×800 px. Percentages below compare only each output's size with that source.
PNG
30.59 kB- Size versus source
- 129%
- Mean RGB difference
- 0 / 255
- Changed RGB pixels
- 0%
- Configured quality
- not applicable
WEBP
8.65 kB- Size versus source
- 36.5%
- Mean RGB difference
- 0.549 / 255
- Changed RGB pixels
- 95.224%
- Configured quality
- 80%
How to read “changed pixels”: JPEG and WEBP can modify many pixels by a very small amount. The changed-pixel percentage must therefore be read with the mean per-channel difference, not as a percentage of quality loss.
JPEG
Useful for photographs without transparency. In this test, the 80% output was smaller than the PNG source and changed pixels through compression.
PNG
Suitable when transparency or exact pixel retention matters. For this image, it was the largest output but reproduced the source RGB without differences.
WEBP when the browser supports output
Can produce compact web files. At 80% in this test, it was the smallest output; that is not a guarantee for other images.
Method and limits
npm run dev -- --port 3218
npm run comparison:formats