Features
Compare formats
Encode the same image as PNG, WebP, AVIF, and JPEG side-by-side. Pick the right format for size and quality.
What it does
Drop an image and the Compare Formats tool encodes it four times (once each as PNG, WebP, AVIF, and JPEG) at a matched quality target. The result is a side-by-side panel showing:
- The encoded image at full size (so you can inspect quality)
- The output file size in KB or MB
- The compression ratio vs. the original
Useful when you're shipping artwork to a website and need to pick the format that gives the best size/quality trade-off for that specific image. The answer is not the same for every image. A photo of a face compresses very differently from a flat-colour logo or a screenshot of text.
How the comparison is fair
All four encoders are pinned to the same perceptual quality target rather than a raw bitrate:
- WebP / AVIF / JPEG at quality 85 (a common web sweet spot).
- PNG is always lossless: its "quality" knob is the level of DEFLATE optimisation (level 9 by default).
If you want to compare at a different target, the quality slider changes all three lossy encoders together. PNG is unaffected (it's lossless either way).
What the numbers usually look like
For a typical photographic image at quality 85:
- PNG ≈ 100 % (baseline)
- JPEG ≈ 25–35 %
- WebP ≈ 18–28 %
- AVIF ≈ 12–20 %
For artwork with sharp edges (logos, UI screenshots):
- PNG ≈ 100 %
- JPEG ≈ 70–90 % (and visibly degraded around edges)
- WebP-lossless ≈ 75 %
- AVIF ≈ 40–60 %
Use the comparison to confirm. Your image may have surprising results.
Quality vs. file size
Click any of the encoded panels to flip into the visual-comparison mode: a slider drags between the original and the encoded version, so you can see exactly where compression artefacts start to appear.
For photographs, the eye usually cannot distinguish quality 85 WebP/AVIF from the original. For sharp typography or thin lines (UI screenshots), you may want to go higher or stick to PNG / WebP-lossless.
Browser support note
AVIF encoding uses a WebAssembly encoder (@jsquash/avif style). It is slower than the other three but produces the smallest files. On older devices the AVIF encode can take several seconds. Give it time.
Privacy
All encoding happens in your browser. No file is uploaded.
Related
- Format converter: bulk-convert without comparison
- Image compressor: fine-tune one format
- File size management
- Supported formats
Was this guide helpful?
Your answer stays in this browser and sends no network request.