WebP, AVIF, JPEG or PNG: Choosing an Image Format on Purpose
By ABD Web Tools Editorial · 2026-02-02 · 7 min read
Images are usually the heaviest thing on a page, and format choice is the lever with the best ratio of effort to payoff. The decision is not complicated once you separate the question of what is in the image from the question of what the page needs from it.
Start with the content of the image
Photographs contain smooth gradients and noise, and they tolerate lossy compression well. Flat graphics — logos, icons, screenshots of text — contain hard edges and flat colour, and lossy compression makes those edges fuzzy in a way readers notice immediately.
That single distinction decides most cases before you consider anything else.
The four formats and what each is good at
Modern browsers support all four; the question is which fits the content.
- AVIF: smallest files for photographs, excellent quality at low bitrates, slower to encode.
- WebP: near-universal support, good on both photos and graphics, supports transparency.
- JPEG: the safe fallback for photographs when maximum compatibility matters.
- PNG: lossless, ideal for flat graphics, screenshots and anything needing crisp edges or transparency.
Advertisement
A practical serving strategy
Use a picture element with AVIF first, WebP second and a JPEG or PNG fallback last. The browser picks the first format it understands, so you get modern compression without abandoning older clients.
Pair that with responsive sizes so a phone never downloads a 2,000-pixel-wide desktop asset, and set explicit dimensions to prevent layout shift while the file loads.
Choosing a quality level
For photographs, quality 75–82 in JPEG or WebP is usually indistinguishable from the original at normal viewing sizes and cuts file size dramatically. AVIF holds up at lower settings still. Compare crops side by side at full size before committing to a site-wide setting; images with fine texture, such as fabric or foliage, degrade earliest.
Formats you can mostly ignore
GIF is a poor choice for anything but tiny legacy animations — a short muted video file is smaller and smoother. SVG is excellent, but it is a vector format for illustrations and icons rather than a competitor to the four above. HEIC is a camera format; convert it before publishing, because browser support is limited.
Frequently asked questions
Is AVIF ready for production?
Yes, in all current major browsers. Keep a WebP or JPEG fallback in the same picture element for older clients and for tools that fetch images directly.
Does converting a JPEG to WebP lose more quality?
Re-encoding a lossy file always loses a little. Convert from the original source whenever you have it rather than from an already compressed copy.
What size should a hero image be?
Aim for under 200 KB after compression, with the largest served width matching your widest layout container rather than the original camera resolution.
Should every image be lazy-loaded?
No. Lazy-load images below the fold, but load the hero eagerly — lazy-loading it delays your largest contentful paint.
Advertisement
