NSS BG

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

← Back to Help Center