WebP vs AVIF: the modern image formats explained
What WebP and AVIF do for your Core Web Vitals, where they're supported today, and when sticking with JPG is still the right call.
WebP is the safe, fast default; AVIF is the heavier-compressing option that costs more CPU time to produce — and for most photo-heavy pages, the difference shows up directly in your Largest Contentful Paint. You can see it on your own images in under a minute with the image converter: upload a JPG, export it as WebP and AVIF, and compare file sizes side by side. Everything runs in your browser, so nothing gets uploaded anywhere.
WebP: the format that just works
WebP has been stable for years and every current browser — desktop and mobile — decodes it natively. It compresses noticeably better than JPEG at equivalent visual quality, supports transparency the way PNG does, and handles animation like GIF but at a fraction of the file size. Encoding is fast, roughly on par with JPEG, so converting a large batch of product photos or blog images doesn't introduce any meaningful delay. If you only adopt one modern format and want the one with the fewest surprises, it's WebP.
AVIF: better compression, slower to produce
AVIF is built on the AV1 video codec, repurposed for still images. Its compression algorithm is meaningfully more sophisticated than WebP's, and on large photographs and smooth gradients it typically lands well below WebP in file size at comparable quality. The cost shows up at encode time: generating an AVIF takes noticeably more computation than generating a WebP or a JPEG, which you'll feel if you're batch-converting a large image library or working with high-resolution originals. Decoding — the browser actually rendering it on screen — carries almost none of that overhead; there, WebP and AVIF are close to indistinguishable.
Where each one actually wins
AVIF pulls ahead as images get bigger and more visually complex: photography, hero banners, backgrounds with gradients. On small icons, flat-color UI screenshots, or anything low-resolution, that advantage shrinks and sometimes vanishes — the format's per-file overhead starts to outweigh what the extra compression buys you. For that category of graphic, it's worth asking whether you need a pixel format at all: an icon rebuilt as a vector with the SVG converter usually beats all three raster formats on size and scales without losing sharpness.
The real payoff: Core Web Vitals and LCP
On most pages, the largest visible image on load — the hero shot, the header photo, the main illustration — is what determines LCP (Largest Contentful Paint), one of the Core Web Vitals metrics Google uses to score loading experience. A lighter file for that one element arrives sooner, which improves LCP — not because WebP or AVIF are magic, but because there are fewer bytes to transfer and decode before the browser can paint. The effect is most visible on slow connections and with large images; on a 3 KB icon, the choice of format barely moves the needle for LCP.
Before chasing the perfect codec, get the dimensions right first: serving a 2000px-wide image into a 400px container hurts LCP far more than which format that image is in. If you haven't already matched your image dimensions to where they actually render, resizing them usually delivers a bigger, simpler win than any format change.
The <picture> fallback pattern
The correct way to ship modern formats without leaving anyone behind is the <picture> element: you list sources in order of preference and a final <img> that acts as the safety net. The browser walks through each <source> top to bottom and uses the first one it understands, falling back to the <img> if it recognizes none of them.
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="Photo description" />
</picture>With this pattern you never have to trade compatibility for compression: every visitor gets the best format their browser supports, no JavaScript and no server-side content negotiation required.
The friction nobody mentions in the "just use WebP" posts
Migrating isn't free in every context, and it's worth being upfront about where it bites:
- Older desktop software: outdated photo editors, some OS-level image viewers, and legacy design tools still can't open AVIF, and a few still choke on WebP too.
- Email clients: WebP and AVIF support across email clients is inconsistent; for images embedded in an email, JPEG or PNG remains the safer bet.
- End-user downloads: if your workflow involves someone downloading the image expecting a JPG — a product catalog, a press kit, a social media asset — handing them a bare AVIF creates real friction, regardless of how technically superior the format is.
- Legacy upload forms: old validation logic that only whitelists
image/jpegorimage/pngrejects modern formats outright until someone updates it.
The fix isn't avoiding WebP and AVIF — it's not assuming every context supports them. For content rendered on your own site, the <picture> pattern solves it. For files people download and reuse outside your control, JPG is still the safest bet.
Not everything needs to migrate
If an image is already small, if the byte savings are marginal relative to your page's total weight, or if the file is headed somewhere you don't control, forcing a migration to AVIF or WebP adds complexity without a clear payoff. The useful question isn't "should I use modern formats" — it's "does this specific image, in this specific context, actually benefit from them." For most photography on a website, yes. For a 16×16 icon or a file a user is going to reopen in software you don't control, probably not.
Convert and compare in under a minute
The best way to decide is with your own images, not generic numbers. Open the image converter, upload a photo that's representative of your site, and export all three versions — JPG, WebP, AVIF — to compare file size and visual quality directly. If a file is already in a heavy format and you just want it smaller without switching formats, the image compressor does exactly that. Both tools run in your browser — nothing is uploaded to a server, so you can work with photos that carry metadata or other sensitive information without worrying about where they end up.
Frequently asked questions
Is AVIF always smaller than WebP?
Not always. On large photos and images with smooth gradients, AVIF usually wins by a clear margin at comparable visual quality. On small icons and flat-color graphics, the gap narrows and sometimes disappears — the format's overhead starts to matter more than what its compression saves.
Why does AVIF take longer to encode than WebP?
AVIF is built on the AV1 video codec adapted for still images, and its compression algorithm is considerably more complex than WebP's. That complexity is exactly what buys the better compression ratio, but it costs real CPU time at encode. Decoding — actually displaying the image in a browser — is fast for both.
Do all browsers support AVIF now?
Every major current browser — Chrome, Edge, Firefox, and recent Safari versions — supports AVIF. The real gap isn't the browser your visitors use; it's older desktop software, some OS-level image viewers, and certain email clients that still don't open it.
Should I convert everything to AVIF?
No. It makes the most sense for photography, hero images, and anything with gradients. For UI icons, screenshots with flat color blocks, or very small images, the size advantage over WebP shrinks, and sometimes PNG is still the simpler choice for that specific case.
What breaks if I only ship AVIF or WebP with no fallback?
Anyone on outdated software — an old image editor, a legacy CMS upload form that only accepts JPEG, some email clients — can't open the file. If your workflow includes someone downloading the image expecting a JPG (a product photo, a social media asset), handing them a bare AVIF creates real friction, even though it's technically the 'better' format.
How do I serve WebP or AVIF with automatic JPG fallback?
With the HTML <picture> element: list an AVIF source, then a WebP source, then a plain <img> in JPG as the fallback. The browser tries each <source> in order and uses the first format it recognizes, falling back to the JPG if it recognizes none of the modern ones.
Convert your images to WebP or AVIF
Compare all three formats with your own photo. Free, local, and unlimited.
Open image converter →Related tools
- Convert images — JPG, PNG, WebP, and AVIF, right in your browser.
- Compress images — Shrink file size without changing format.
- Resize images — Fix dimensions before worrying about format.
- Convert to SVG — For icons and graphics where a vector beats any raster format.
You might also like: converting HEIC to JPG.