Convert Images to AVIF — and When AVIF Beats WebP

You switched your site to WebP last year and shaved a third off your image weight. Now your Lighthouse report is nudging you toward AVIF, and you are not sure it is worth another migration. This guide shows you how to convert images to AVIF in the browser, where AVIF genuinely beats WebP on file size, where WebP still wins, and how to ship AVIF safely so no visitor ever sees a broken image.

#TL;DR

• AVIF is built on the AV1 video codec and usually beats WebP on lossy file size.
• Convert images to AVIF locally in the browser — no upload, no account.
• AVIF wins on photos, gradients, and HDR; WebP wins on encode speed.
• Serve AVIF through <picture> with a WebP and JPG fallback for full coverage.
• AVIF ships in Chrome, Firefox, Safari, and Edge as of 2026.

#What is AVIF, and how is it different from WebP?

Both AVIF and WebP are modern raster formats designed to replace JPEG and PNG with smaller files. They get there in different ways, and the differences matter once you start chasing the last few kilobytes.

#AVIF is AV1 wrapped in a HEIF container

AVIF is an encoding based on the open-source AV1 video codec, standardized by the Alliance for Open Media. Mechanically, an AVIF file is an AV1-compressed image bytestream stored inside a HEIF container, as the AVIF specification describes. WebP, by contrast, derives from the older VP8 video codec for lossy mode and uses WebP lossless for the rest. The newer codec is the main reason AVIF squeezes more out of the same picture.

#What AVIF adds over WebP

AVIF carries features WebP simply does not have. Per web.dev's AVIF guide, the format adds High Dynamic Range and wide color gamut, film grain synthesis, and progressive decoding. It also supports a full alpha channel for transparency and animation. If you are storing photographs with bright highlights or wide-gamut color, AVIF can represent them; WebP clamps to 8-bit sRGB.

#Where WebP still wins

WebP is not obsolete. It encodes far faster than AVIF, which matters when you process images on the fly. Its decoder has been in browsers longer, so reach is marginally wider. And for short animations, WebP tooling is still more mature. The honest framing is not "AVIF replaces WebP" but "AVIF is the smaller file when you can afford the encode time."

#How to convert images to AVIF

You do not need a build pipeline or a desktop app to make AVIF files. The fastest path is a browser tool; the most controllable is a command-line encoder.

#Convert a single image in the browser

The simplest option is a client-side converter. Open the iKit Image Format Converter, drop in a JPG or PNG, choose AVIF as the output format, and download the result. Because the conversion runs entirely in your browser with WebAssembly, the original file never leaves your machine — useful when the image is a product mockup or a private screenshot you would rather not upload anywhere.

#Batch convert without uploading

When you have a folder of hero images to migrate, converting one at a time is tedious. A batch-capable browser tool lets you queue many files and download them together. If your goal is purely to shrink existing assets rather than change format, the iKit Image Compressor handles JPG, PNG, and WebP in bulk and zips the output. For dimension changes before conversion, resize first with the iKit Image Resizer so you are not encoding pixels you will throw away.

#Choosing a quality level with avifenc

For full control, use avifenc from the reference libavif implementation. AVIF uses a quantizer scale where a lower cq-level means higher quality. The web.dev team recommends this as a sensible starting point:

avifenc \
  --min 0 --max 63 \
  -a end-usage=q \
  -a cq-level=18 \
  -a tune=ssim \
  photo.jpg photo.avif

A cq-level near 18 is a good balance for photos. Raise it toward 30 for thumbnails where small artifacts will not be noticed, and add --jobs 8 to use multiple threads and speed up encoding.

#When does AVIF beat WebP?

The "AVIF vs WebP" question only has a useful answer once you look at what is actually in the image. The codec advantage shows up unevenly.

#Photographs and smooth gradients

This is AVIF's home turf. On photos, web.dev and Netflix have both reported greater than 50% savings versus JPEG, and AVIF's median compression lands well ahead of WebP for the same quality target. Gradients and skies, where WebP tends to show banding, stay smooth in AVIF thanks to AV1's better handling of low-frequency detail.

#Flat graphics, logos, and line art

Here the gap narrows. For a flat logo or a UI screenshot with sharp text, lossless encoding matters more than codec cleverness, and WebP lossless or PNG often matches AVIF while encoding instantly. If you only need to drop a transparent PNG's weight, converting to WebP — covered in our PNG to WebP guide — is frequently the simpler win.

#Encoding speed and animation

AVIF's quality comes from a heavier encoder. If you generate images at request time or have thousands to process in a CI job, WebP's speed can outweigh AVIF's smaller output. For animation, WebP remains the more predictable choice in 2026 despite AVIF supporting animated sequences in spec.

A quick rule of thumb for choosing:

• Photo or gradient, served statically: AVIF, with a WebP fallback.
• Logo, icon, or screenshot: PNG or WebP lossless.
• Images encoded on the fly under time pressure: WebP.
• HDR or wide-gamut source: AVIF, no contest.

#How to serve AVIF with a WebP fallback

AVIF support is broad but not universal, so never ship it as a bare <img src>. A browser that cannot parse the encoding will discard the file and render nothing. The <picture> element solves this by letting the browser pick the first format it understands.

#The picture element

List your sources from smallest-but-newest to most-compatible. The browser walks them top to bottom and stops at the first type it supports, falling back to the <img> at the end:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Mountain at dawn"
       width="1200" height="630">
</picture>

#MIME types and the type attribute

The type attribute uses the format's MIME type — image/avif for AVIF and image/webp for WebP, as listed in the MDN image file type guide. Get these strings exactly right; a typo means the browser skips a source it could have used and serves a larger fallback.

#Testing browser support

Before relying on AVIF, confirm coverage for your audience on Can I use AVIF. AVIF has shipped in Chrome and Opera since 2020, Firefox since 2021, and Safari since 2022, so the <picture> fallback only kicks in for a small slice of older clients — but that slice is exactly why you keep the JPG safety net.

#Common pitfalls when converting to AVIF

A few mistakes turn an "AVIF saved 40%" win into a regression.

#Re-encoding an already-lossy file

Converting a JPG to AVIF re-compresses pixels that JPEG already degraded. You still gain on size, but start from the highest-quality original you have — the camera RAW or PNG export — when possible, rather than a thrice-saved JPG.

#Forgetting that AVIF strips metadata differently

Re-encoding drops or rewrites EXIF data, including orientation and color profile. Check that portrait photos do not rotate and that wide-gamut color is tagged, especially if you are converting in a batch.

#Shipping AVIF without a fallback

It bears repeating: a lone AVIF <img> is a broken image for any visitor whose browser cannot decode it. Always pair AVIF with <picture> and a WebP or JPG fallback.

#References

• Using AVIF to compress images on your site — web.dev guide; cited for >50% JPEG savings, AVIF features, and the avifenc settings.
• Image formats: AVIF — web.dev; cited for browser-support timeline and codec background.
• Image file type and format guide — MDN; used for MIME types and the HEIF-container description.
• AV1 Image File Format (AVIF) specification — Alliance for Open Media; primary spec for the container and bytestream.
• Can I use: AVIF image format — current browser-support data referenced for the fallback strategy.

#Related on iKit

• Settle the PNG vs JPG vs WebP vs AVIF question for any image — the full format face-off if you are still deciding which target to convert to.
• Convert PNG to WebP and cut image size by about a third — the WebP fallback path, and when WebP is the simpler choice over AVIF.
• Convert JPG to PNG and when you actually shouldn't — the reverse direction, for when you need lossless edges instead of smaller files.
• Convert PNG to JPG without a black background — how transparency behaves across format conversions, a gotcha that also bites AVIF alpha.
• Compress PNG images without losing quality — when shrinking a PNG beats changing its format entirely.