Choosing an Image Format: JPEG, PNG, WebP or AVIF

Choosing an image format used to be a two-way decision: JPEG for photographs, PNG for everything with transparency. That is no longer true, and the old rules now cost you file size rather than saving it.

The four formats that matter

Why WebP replaced the old rule of thumb

WebP does lossy compression at sizes typically 25–35% smaller than an equivalent-quality JPEG, and it supports an alpha channel, which JPEG never did. That removes the main reason people reached for PNG on the web. It is supported in every current browser, including Safari from 14 onward.

The practical consequence: for a photograph that needs transparency, the old answer was a workaround (PNG, and accept a much larger file, or JPEG plus a clever mask). The current answer is WebP, which does it properly and smaller.

When AVIF is worth it, and when it is not

AVIF generally produces files 20–50% smaller than WebP at comparable quality — sometimes better. The catch is encoding cost: AVIF is slow to generate, which matters if you are converting thousands of files at once. Decoding is well supported in current browsers, but older ones need a fallback.

A practical approach for a website: use <picture> with an AVIF source, a WebP source, and a JPEG or PNG fallback. Browsers pick the first format they understand, so modern browsers get AVIF, slightly older ones get WebP, and everything else gets the legacy format.

Do not put a JPEG inside a PNG

A frequent mistake is taking a JPEG and saving it as PNG “to improve quality”. It cannot. The lossy artefacts are already baked in; PNG will faithfully store them, at a much larger file size. Converting a lossy format to a lossless one never recovers detail — it only ever costs bytes.

The reverse direction is fine and useful: PNG to WebP or PNG to JPEG reduces size, because you are moving to a more efficient encoding. Just accept that the lossy step is a one-way decision.

Screenshots and flat graphics

Sharp-edged graphics — screenshots, diagrams, UI mockups, logos — fare badly under lossy compression, because the artefacts cluster around exactly the edges you care about. For these, use WebP in lossless mode: it is typically 20–30% smaller than a PNG of the same image with no quality loss at all. If you need the smallest possible file and can accept slight softening, lossy WebP at a high quality setting (90+) is usually still acceptable.

Resize before you compress

The single largest saving available is usually not the format at all. A 4000-pixel-wide photograph displayed at 800 pixels is being thrown away by the browser after download — you paid for four times the pixels you needed. Resize to the dimensions actually displayed, then compress. Doing it in that order reliably beats anything format choice can offer.

Keep one thing in mind: for high-DPI displays, serve roughly twice the CSS pixel dimensions, and let the browser downscale. Serving exactly the CSS size looks soft on a Retina screen.

A decision list

1. Photograph, no transparency? WebP (lossy). AVIF if you can afford the encode time.
2. Photograph, needs transparency? WebP. This is the case that used to be awkward and no longer is.
3. Screenshot, diagram, or logo? WebP lossless.
4. Needs to animate? WebP or AVIF, not GIF.
5. Must work in something ancient? JPEG for photos, PNG for graphics — and use it as the fallback in a <picture> element rather than as the only option.
6. Already a JPEG and you want to save it as PNG? Don’t.

Trying it on your own images

You can check the size difference on your own files with the ImagePress compressor. It runs the encoders in your browser, so your images are never uploaded, and it shows the before/after size as you adjust quality. Because your photos stay on your device, it is also safe to use on material you would not put through a third-party service.