WebP and AVIF explained
Images are usually the heaviest thing on a web page, so the promise of “same quality, 30% smaller” gets attention. WebP and AVIF both make that promise. Both deliver, up to a point — and both come with trade-offs that the marketing copy tends to skip.
This guide is about deciding when the conversion is worth doing, and when it is effort for nothing.
The short version
| JPG | WebP | AVIF | |
|---|---|---|---|
| Released | 1992 | 2010 | 2019 |
| Typical size vs JPG | baseline | 25–35% smaller | 40–50% smaller |
| Transparency | No | Yes | Yes |
| Animation | No | Yes | Yes |
| Browser support | Universal | Universal (modern) | All modern browsers |
| Encoding speed | Very fast | Fast | Slow |
| Support outside browsers | Universal | Good | Patchy |
What the savings actually look like
The commonly quoted figures — 30% for WebP, 50% for AVIF — are averages across test corpora. Real results vary enormously with image content, and it is worth knowing which direction:
- Photographs with smooth gradients (skies, skin, bokeh backgrounds) are where AVIF pulls furthest ahead. Its handling of gradients avoids the banding JPG produces at the same file size.
- Detailed, noisy images (foliage, gravel, fabric texture) compress less well in every format, and the gap between them narrows.
- Flat graphics, logos and screenshots are a different game entirely — there the comparison is against PNG, and WebP’s lossless mode typically beats PNG by around 20–25%.
The honest way to find out is to convert a few of your real images and compare. Our JPG to WebP and JPG to AVIF tools run in your browser, so testing a handful of files costs nothing and takes seconds.
Browser support is no longer the problem
This used to be the main objection and it has quietly stopped being true.
WebP is supported by every browser in current use — Chrome, Firefox, Edge and Safari (since Safari 14, released 2020). Unless you have data showing meaningful traffic from very old devices, you can serve WebP without a fallback.
AVIF is supported by Chrome, Firefox, Edge and Safari 16+ (2022). Coverage is now high but not quite universal; on a site with a long tail of older iOS devices you may still want a fallback.
The standard way to handle any doubt is to let the browser choose:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description">
</picture>The browser takes the first format it understands. Older ones fall through to the JPG and nothing breaks.
Where these formats actually hurt
Encoding cost. AVIF is computationally expensive to encode — noticeably so. Compressing a large photo can take several seconds rather than milliseconds. For a batch of a few dozen images that is fine. For a site that generates images on demand, it is a real infrastructure cost, and it is why many CDNs charge more for AVIF transforms.
Life outside the browser. This is the trap people fall into. WebP and AVIF are web formats, and support elsewhere is thin: many desktop editors, print services, upload forms and older operating systems will not take them. Saving an image from a website and finding you have a .webp your software refuses to open is one of the most common image complaints there is — which is exactly why the reverse conversion exists (WebP to JPG, AVIF to JPG).
Not a substitute for the basics. Converting a 4000-pixel-wide image to AVIF and serving it into a 400-pixel slot still wastes most of those bytes. Resizing to the dimensions you actually display is a bigger win than any format change, and the two compound. Resize first, then convert.
A practical rule
Serving images on a website you control: use AVIF with a WebP fallback if you can automate the encoding, or just WebP if you want something simple and fast that works everywhere. Either is a solid improvement over JPG.
Sending a file to another person: use JPG. Compatibility beats compression when you do not control the other end.
Archiving originals: keep whatever the camera produced. Do not re-encode your archive into a lossy format to save disk space — storage is cheaper than the detail you throw away.
Logos, screenshots, anything with sharp edges or transparency: PNG or lossless WebP, not JPG or lossy AVIF. See PNG vs JPG vs WebP for how to choose.
Converting back
Because these are web-first formats, you will regularly need to go the other way — you saved an image from a site and now need it in something your software understands. Both conversions are lossy-to-lossy, so the result is re-encoded rather than restored, but at a high quality setting the difference is not visible.
One detail worth knowing: JPG has no alpha channel, so any transparency in a WebP or AVIF is filled in — with white, in our tools — when you convert to JPG. If you need the transparency, convert to PNG instead.
Summary
WebP is the safe, easy win: universally supported, meaningfully smaller than JPG, fast to encode. AVIF compresses better still and is the right choice when you can absorb the encoding time and are serving to modern browsers. Neither belongs in an email attachment or an upload form — for handing files to people, JPG is still the format that always works.