JPEG vs PNG vs WebP vs AVIF: choosing an image format that fits the picture

Four formats, four different bargains with quality, size and compatibility. This comparison explains what each format actually does to your pixels, where the commonly quoted savings come from, and how to pick per image instead of by habit.

Most format advice is inherited: photographs as JPEG, graphics as PNG, and the newer formats treated with suspicion. That advice was reasonable in 2010. Since then WebP has reached effectively universal browser support and AVIF has followed it into every major browser, and both routinely beat the older formats on file size at the same visual quality. The right question is no longer "is the new format safe?" but "what is in this particular image, and what will the format do to it?"

What follows is a per-format account — compression style, transparency, animation, and the failure modes nobody puts on the feature chart — and then a short decision procedure you can apply image by image.

The four formats, honestly described

JPEG's weakness is structural: it processes the image in 8×8 blocks and quantises frequency data per block, which is why skies band, text fringes and flat colour regions develop visible squares at low quality. PNG's weakness is the mirror image: because it may not discard a single bit, a photograph's endless tiny variations must all be stored, and a 5 MB photo stays a multi-megabyte PNG. WebP and AVIF sit between: modern codecs with intra-frame prediction and far better entropy coding, so they keep edges cleaner at sizes where JPEG falls apart.

Where the savings claims come from

Vendor studies usually quote WebP at 25–34% smaller than JPEG at equivalent quality, and AVIF frequently 40–50% smaller on photographic content at low-to-medium quality — but "equivalent quality" is doing heavy lifting in those sentences, because quality is measured by perceptual metrics (such as SSIM or butteraugli) rather than by eye at the exact size the image will be displayed. Your mileage will vary by image: a soft, noisy photo compresses differently from a crisp product shot on a white background.

The practical move is not to trust percentages but to test on your own images: convert three representative files to each candidate format at a quality setting you find acceptable on screen, and compare sizes. Ten minutes of testing on real content beats any benchmark, including the ones in this article.

A decision procedure that works per image

1. Does it contain text, sharp line art or a logo? Keep edges sacred: PNG if the file stays small, lossless WebP or AVIF if it does not. Never JPEG — fringing around letters is its signature failure.
2. Is it a photograph or rich gradient? AVIF first where your pipeline supports it, WebP as the universal fallback, JPEG only for maximum compatibility (email clients, ancient software).
3. Does it need transparency? JPEG is out. PNG for small graphics, WebP/AVIF for anything photographic with a cut-out edge. More on alpha in the transparency article linked below.
4. Is it a screenshot? Treat it like line art if it is mostly UI and text; treat it like a photo only if it is a screenshot of a photo.
5. Will anything outside a browser open it? If the file must survive design tools, office software or a client's PowerPoint, ship PNG or JPEG alongside any modern format.

Serving more than one format

The <picture> element exists precisely for this: list AVIF first, then WebP, then a JPEG or PNG fallback, and every browser takes the first it understands. The cost is storage and build complexity, not user experience — visitors only ever download one file. For images inside CSS or as icons, the choice is simpler: SVG beats all four for anything drawn from shapes, and favicons and logos are usually shapes. Reach for a raster format when the content is genuinely photographic or painterly, not before.

Mistakes and pitfalls

Converting everything to PNG "for quality"

PNG preserves quality perfectly and file size catastrophically. A photograph converted to PNG keeps every pixel and multiplies the download several times over — the reader gains nothing visible and pays in load time.

Re-saving a JPEG as WebP at quality 100

Converting a lossy file cannot restore what was already discarded, and a near-lossless re-encode of a JPEG often produces a file larger than the original with the same artefacts baked in. Always convert from the original master, never from another lossy copy.

Judging formats at 400% zoom

Artefacts invisible at display size do not matter; artefacts visible at 400% zoom and nowhere else matter even less. Compare candidates at 100%, at the size and on the kind of screen your audience actually uses.

Common questions

Can my browser save AVIF?

Almost certainly not through the standard canvas API: browsers decode AVIF but the canvas can only encode JPEG, PNG and WebP. AVIF production belongs in a dedicated encoder or a server pipeline, which is why this site's converter offers the other three.

Is WebP support really universal now?

For practical purposes, yes — every major browser has supported it for years, including Safari since version 14. The holdouts are not browsers but other software: some office tools, older design apps and a few social platforms still prefer JPEG or PNG uploads.

What about JPEG XL?

Technically impressive, but browser support stalled — Chrome removed its experimental implementation and Safari's support is partial. Until that changes, it is a specialist format rather than a web default, however good its compression is.

To wrap up

Formats are bargains, not religions. Decide what each image contains, what it must survive and who must open it, and the format mostly chooses itself — with WebP as the modern default, AVIF where you can produce it, PNG for the sharp and small, and JPEG for the places the modern web has not reached yet.