Published by @SoNiceInfo at 9/21/2026
The short answer to WebP vs AVIF is to export both and serve them with the <picture> element. List AVIF first, WebP second, and JPEG or PNG as the final fallback: supporting browsers get the smallest file, and everything else still gets a normal image. If you can only ship one format, pick WebP for compatibility and encode speed, or AVIF for maximum savings and for HDR and 10/12-bit depth.
WebP is Google's image format based on the VP8 video codec; AVIF is an image format based on the AV1 video codec. Both support lossy and lossless compression, transparency, and animation. They differ in compression efficiency, bit depth, and encode speed.
| Feature | JPEG | WebP | AVIF |
|---|---|---|---|
| Compression (lossy, same quality) | Baseline | ~25–35% smaller | ~50% smaller |
| Lossless compression | No | Yes (~26% smaller than PNG) | Yes |
| Transparency / animation | No | Yes | Yes |
| 10-bit / 12-bit depth | No | No (8-bit) | Yes |
| HDR / wide gamut | No | Limited | Full support |
| Encode speed | Fast | Fast | Markedly slower |
| Maximum dimensions | 65,535 × 65,535 px | 16,383 × 16,383 px | Handles larger images than WebP |
| Progressive rendering | Yes | No | No |
| Browser support | All | All major browsers (Safari on macOS 11 / iOS 14 and later) | All major browsers (Safari on macOS 13 / iOS 16 and later) |
Compression figures are rules of thumb from published comparison studies and vary with image content and encoder settings.
Here is what happened when I converted a 1600×1064 px JPEG photo (230 KB) with the command-line encoders on a Mac.
# WebP (cwebp 1.6.0)
cwebp -q 80 in.jpg -o out.webp # 230 KB -> 112 KB
# AVIF (avifenc 1.4.2)
avifenc -q 60 -s 6 in.jpg out.avif # 230 KB -> 108 KBBoth came out at less than half the size of the original JPEG. Keep in mind that this is a single image, and the two quality settings are not matched for visual quality. Quality values mean different things in different encoders, so for a real site the reliable approach is to compare the converted images by eye before settling on a setting.
To convert a folder of PNG, JPG, HEIC, or GIF files to WebP on your Mac, WebP Converter., a batch WebP converter for Mac, is free to start.
To convert PNG, JPG, and HEIC files to AVIF in bulk, try AVIF Converter., a batch AVIF converter for Mac. It is also free to start.
List <source> elements inside <picture> from top to bottom and the browser picks the first format it supports. The final <img> is the fallback, so an image is shown in every environment.
<picture>
<source type="image/avif" srcset="/images/photo.avif" />
<source type="image/webp" srcset="/images/photo.webp" />
<img src="/images/photo.jpg" alt="Describe the photo" width="1600" height="1064" loading="lazy" />
</picture>Setting width and height prevents layout shift (CLS) while the image loads. Do not add loading="lazy" to an above-the-fold image that is your LCP element.
WordPress accepts WebP uploads since version 5.8 and AVIF uploads since version 6.5. Images you uploaded earlier as JPEG or PNG are not replaced automatically, so existing assets still need to be converted and swapped in. AVIF handling also requires the server's image library to support AVIF.
The quickest route is a GUI app. Drag and drop images or whole folders to convert them in bulk, and check the quality before and after by eye before you export. In all three apps the conversion happens on your Mac, and nothing has to be uploaded.
On the command line, install cwebp and avifenc with Homebrew.
brew install webp libavifThe step-by-step guides are in separate articles.
All conversion happens on your Mac
<picture> element. With a large catalog, AVIF's encode time adds up, so a practical split is WebP for the bulk of product images and AVIF for key visuals and featured images.Export both and serve them with the picture element: AVIF first, WebP second, JPEG or PNG as the final fallback. If you can only pick one, choose WebP for compatibility and encode speed, or AVIF for the largest file-size savings and for HDR and 10/12-bit depth.
As a rule of thumb at comparable quality, WebP is about 25–35% smaller than JPEG and AVIF is about 50% smaller than JPEG. The actual gap depends heavily on the image and the encoder settings. AVIF tends to win on photos and smooth gradients, while small icons and simple graphics may show almost no difference.
An img tag that points only at an AVIF file shows nothing in a browser without AVIF support. With a picture element that lists AVIF, WebP, and JPEG sources in that order, the browser picks the first format it supports, so every visitor gets an image.
Encoding is markedly slower than WebP or JPEG, there is no progressive rendering, and older operating systems and apps may not open the files. In a workflow that converts many images on every build, the encode time becomes noticeable.
On the command line, use cwebp for WebP and avifenc for AVIF, both available from Homebrew. For batch conversion in a GUI without uploading anything, WebP Converter. and AVIF Converter. each handle one format, and Image Tool+ exports both from a single app.
<picture> element with AVIF → WebP → JPEG/PNG, in that order.