JPG vs PNG vs WebP vs AVIF: which should you use?

Pick the wrong image format and you either get a blurry mess or a file five times bigger than it needs to be. Here's the simple decision framework — plus what each format is actually good at.

The one-line rule

Photographs → JPG (or WebP/AVIF). Graphics, text and transparency → PNG (or WebP/AVIF). That single sentence handles most decisions. The rest of this guide explains why, and when the modern formats are worth switching to.

JPG — built for photographs

JPG uses lossy compression tuned for the way human eyes work: it discards detail we barely notice. On a photo — thousands of subtly different colours and gradients — that's brilliant, giving small files that still look great. On a screenshot of text, the same compression smears fuzzy artefacts around every sharp edge.

Use JPG for: camera photos, realistic images, anything headed somewhere that doesn't support newer formats. Avoid it for logos, line art, or anything needing transparency (JPG has none).

PNG — sharp graphics and transparency

PNG is lossless: every pixel is preserved exactly. That makes edges razor-sharp, which is perfect for logos, icons, screenshots and diagrams. It also supports a full alpha channel — proper transparency — so it's the classic choice for a cut-out subject or a logo on any background.

The trade-off is size. A photograph saved as PNG can be many times larger than the same photo as JPG, with no visible benefit. Reach for PNG when you need crisp edges or transparency — not for photos.

WebP and AVIF — the modern all-rounders

WebP and AVIF are newer formats that do both jobs better. Each supports lossy and lossless modes plus transparency, and both compress dramatically smaller than the format they replace:

• WebP typically saves 25–35% versus JPG at the same quality, and beats PNG for transparent graphics. Supported by every current browser.
• AVIF compresses even harder — often 50% smaller than JPG — with excellent quality, though encoding is slower and support, while now broad, is slightly behind WebP.

For anything that lives on the web, converting your JPGs and PNGs to WebP is one of the easiest page-speed wins available. Keep an original in the classic format for maximum compatibility, and serve the modern one where you can.

A quick decision table

Whatever you land on, you can convert between all of them and then compress the result to squeeze out the last few kilobytes — all locally, all watermark-free.