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:formatsContinue verifying
Technical analysis: perceptual compression versus RGB differences
When analyzing lossy output formats like JPEG and WEBP (when the browser supports it), a crucial technical distinction exists between mathematical pixel variance and human visual perception. In this benchmark, both JPEG at 80% and WEBP at 80% altered over 95% of pixels by a small margin, yet the mean absolute RGB difference remained below 2.0 on an 8-bit scale of 0 to 255. In normal viewing conditions on standard sRGB displays, subtle color shifts of 1 or 2 levels across adjacent pixels are practically imperceptible to the naked eye.
JPEG achieves its substantial file reduction (over 70% smaller than the uncompressed PNG in this sample) by converting RGB data into the YCbCr color space, downsampling chroma channels (typically 4:2:0), and applying Discrete Cosine Transform (DCT) quantization across 8×8 pixel blocks. High-frequency visual details that human vision is least sensitive to are quantized first, producing compact files with negligible perceived degradation.
WEBP, when supported by the client browser, improves on legacy DCT by employing intra-frame predictive coding borrowed from the VP8 video codec. By predicting pixel blocks from adjacent neighbor pixels and encoding only the residual error, WEBP achieved the smallest file footprint in this test. PNG, by contrast, preserves exact original values through reversible filtering and DEFLATE compression, making it essential for line art, text overlays, and transparency.
Questions about this format comparison
- Is JPEG always smaller than PNG?
- In this photograph test it was. In other images it may not be: PNG excels with flat color areas, icons, and screenshots, and can be smaller than JPEG on graphics while avoiding compression ringing artifacts. One image sample does not form a universal rule.
- Why did PNG not change any pixel values?
- Because PNG uses lossless DEFLATE compression. It reorganizes binary data patterns without discarding frequency information. JPEG and lossy WEBP discard subtle high-frequency data to achieve lower byte sizes, which produces the measured RGB difference.
- Which format should I select for general web use?
- It depends on the destination. Photos for web publishing without transparency perform well in JPEG or WEBP (when browser encoding is supported). Transparency requires PNG or modern AVIF. The table above documents the exact byte and quality trade-offs for this image.
- Why is WEBP export conditional on browser support?
- Decoding capability does not guarantee encoding: WEBP output appears only when the browser supports canvas.toBlob('image/webp') encoding, avoiding corrupt exports.
- How can I reproduce this exact comparison on my system?
- Clone the project repository, start the local development server, and run the automated comparison command (npm run comparison:formats). It will export the source image via headless Chromium and output pixel-by-pixel differential metrics into a reproducible JSON report.
- How can I convert images between these formats directly?
- You can convert between JPEG, PNG, AVIF, and other formats using our in-browser Convert image format tool.
Explore the Files & Formats Topic Hub
Complete guides and tools for format conversion, KB compression, and EXIF metadata removal.