Advertisement

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.

No substantive revision date is recorded for this legacy guide.Check product changes

Was this guide helpful?

Your answer stays in this browser and sends no network request.