Which image format for which content — measured on four content types

Measured 2026-07-23 · Chrome 148 on macOS; the browser canvas encoders — the exact code path our image tools use. Dataset A: four 1200×800 images generated deterministically (photo-like gradient + speckle, text-heavy UI screenshot, flat-colour illustration, and a logo on a fully transparent background). Lossy formats at quality 85; PNG lossless.

Question: At one comparable quality setting, how do JPEG, WebP and PNG compare across the four kinds of picture people actually convert — and what does each cost you in transparency?

Findings

• WebP was smaller than JPEG on all four content types at the same quality setting: 31% smaller on the photo, 35% on the screenshot, 36% on the transparent logo and 57% on the flat illustration.
• PNG is the wrong tool for photographs by a wide margin — 1,022 KB against 43 KB for JPEG-85, roughly 24x larger. For the text-heavy screenshot the gap collapses to 1.7x (176 KB vs 105 KB), and PNG keeps every letter pixel-perfect, which is the case where that premium is worth paying.
• For transparency the choice is really two-way: JPEG silently flattened the logo onto a background (transparency lost), while WebP kept the alpha channel at a third of PNG's size (11.9 KB vs 36.6 KB).
• The browser cannot ENCODE AVIF at all: requesting an image/avif blob from the canvas returns an image/png blob instead. That is exactly why this site offers no "convert to AVIF" tool — and why our encoder verifies the returned blob type and raises an explicit error rather than handing you a mislabelled file. We convert FROM AVIF (avif-to-jpg, avif-to-png) using the browser's decoder, which is widely supported.

The data

⬇ Download raw data (CSV) ⬇ Download report (JSON)

Method

1. Generate dataset A deterministically in the browser — no randomness, no external images, no network — so anyone can reproduce byte-identical inputs.
2. Encode each image to JPEG (q85), WebP (q85) and lossless PNG with the canvas encoder our tools use.
3. Record exact output bytes and whether the format carried the alpha channel.
4. Separately probe whether the browser can encode AVIF at all, by requesting an image/avif blob and checking the type that comes back.
5. Download /labs/run-image-labs.js and paste its contents into the DevTools console on any page of this site.

Limitations

• Deterministic synthetic sources, not photographs: absolute byte counts differ for real photos, though the ordering between formats holds.
• One browser (Chrome 148). Safari and Firefox ship different encoders and will produce different bytes.
• Byte size and alpha behaviour only — this study makes no perceptual-quality claim beyond the encoder setting used.

Takeaway

Use WebP wherever the destination supports it — it won on every content type here, and it is the only lossy format in this set that preserves transparency. Keep PNG for text-heavy screenshots and pixel-perfect work, and reach for JPEG only when maximum compatibility matters. AVIF is a decode-only story in the browser today.

← All Labs reports · standards in the testing methodology