WebP and AVIF are the two modern image formats worth targeting for the web. Both beat JPEG and PNG substantially. The honest answer to “which one” is: it depends on the image — and you don’t have to choose per file by hand. This guide explains the trade-offs, then shows how to route each source format to the right target automatically.
The short answer
- AVIF compresses harder — typically smaller than WebP at matched quality, especially on photos and on images with transparency.
- WebP encodes much faster, is a little lighter than AVIF on opaque (no-alpha) images, and has the longer track record of support.
- Both are supported in all current major browsers, so for most sites the decision is about size vs encode time, not compatibility.
The trade-offs in detail
| WebP | AVIF | |
|---|---|---|
| Compression (photos) | Good (≈25–35% under JPEG) | Better (often smaller than WebP) |
| Transparency (alpha) | Supported | Supported, and smaller than WebP |
| Opaque images | Slightly lighter than AVIF | Can be heavier than WebP |
| Encode speed | Fast | Noticeably slower |
| Browser support | Universal | All current major browsers (Safari since 16) |
Two practical takeaways fall out of this:
- Transparent images → AVIF. AVIF preserves an alpha channel at a smaller size than WebP. A transparent logo PNG is the textbook AVIF win.
- Opaque photos → WebP or AVIF. WebP is often lighter on images with no transparency, and encodes far faster. AVIF wins on raw size if you can afford the slower encode.
That’s why “always AVIF” is wrong: on opaque content, AVIF can produce a larger file than WebP while costing more encode time.
Let the tool decide per file
Choosing per image by hand doesn’t scale. assetopt’s web-perf preset makes the content-aware decision for you in one line of config:
{ "preset": "web-perf" }Under the hood it routes:
| Source | Target | Why |
|---|---|---|
| JPEG | WebP | WebP beats JPEG on virtually every photo |
| Opaque PNG | WebP | Lighter than AVIF when there’s no alpha |
| Transparent PNG | AVIF | Preserves alpha at a smaller size |
| WebP / AVIF | unchanged | Already optimal |
The PNG decision is transparency-aware: assetopt reads the image’s alpha channel and sends opaque PNGs to WebP, transparent ones to AVIF — automatically, no per-file rules.
npm install -g @assetopt/cli
assetopt analyze ./images # dry-run: see the routing + savings, writes nothing
assetopt optimize ./imagesForcing one format everywhere
If you specifically want everything as AVIF (you control the HTML and can serve it), the max-compression preset routes all formats to AVIF at an aggressive quality:
{ "preset": "max-compression" }Or target WebP across the board with a formatMatrix:
{ "images": { "formatMatrix": { "jpeg": "webp", "png": "webp" } } }A caveat about serving
Converting to WebP/AVIF only helps if the browser actually requests the new file. If your HTML hard-codes .jpg/.png in <img> tags, either update the markup, use a <picture> element with fallbacks, or keep formats intact and just recompress (outputFormat: "keep"). See optimize images before deploying for that trade-off.