WebP and AVIF are modern image formats that offer better compression than JPEG and PNG. They reduce page size and speed up loading. This article compares the formats, covers browser support, and offers practical implementation recommendations.
Comparing the formats
| Format | Compression | Transparency | Animation | Support |
|---|---|---|---|---|
| JPEG | Baseline | No | No | All browsers |
| PNG | Lossless | Yes | No | All browsers |
| WebP | 25–35% smaller than JPEG | Yes | Yes | All modern browsers |
| AVIF | 50% smaller than JPEG | Yes | Yes | Chrome, Firefox, Safari 16+ |
WebP was developed by Google, while AVIF is based on the AV1 video codec. Both support lossy and lossless compression.
WebP: features and usage
Advantages
- 25–35% smaller than JPEG at the same quality
- Supports transparency (alpha channel)
- Supports animation (an alternative to GIF)
- Supported by all current browsers (Chrome, Firefox, Safari, Edge)
Disadvantages
- Older browsers (IE11) do not support it, so a fallback is needed
- Decodes more slowly than JPEG (the difference is imperceptible on modern devices)
Converting to WebP
Online: Image Compressor on reChecker — compression with format selection.
Command line (cwebp):
cwebp -q 80 input.jpg -o output.webpCMS plugins:
- WordPress: ShortPixel, Imagify, Smush
- Other options: configure at the CDN or build level
AVIF: features and usage
Advantages
- 50% smaller than JPEG at comparable quality
- Better compression than WebP
- Supports HDR and a wide color gamut
Disadvantages
- Slow encoding (decoding is optimized in browsers)
- Support: Chrome 85+, Firefox 93+, Safari 16+, Edge 85+
Converting to AVIF
Command line (avifenc from libavif):
avifenc --min 20 --max 30 input.jpg output.avifOnline: Various converters are available; supported in ImageMagick 7+.
Choosing a format strategy
Prioritize support
- AVIF for browsers that support it
- WebP for other modern browsers
- JPEG/PNG as a fallback for older browsers
Implementing with picture
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Описание изображения">
</picture>The browser selects the first supported format. Order: AVIF → WebP → JPEG.
Quality and compression settings
WebP
-q 80— a good balance of quality and file size for photographs-q 90— high quality, larger file size-lossless— lossless (for graphics with sharp edges)
AVIF
- Quality is set within a range (for example, min 20, max 30)
- A lower value means a smaller file and lower quality
- For the web, usually 25–35
Impact on performance and SEO
- Smaller file size means faster loading and better LCP
- Core Web Vitals are considered in rankings
- Check: Web Vitals on reChecker
- Image analysis: reChecker image check
CDN and automatic conversion
Many CDNs (Cloudflare, imgix, KeyCDN) support automatic conversion to WebP/AVIF based on the Accept header:
Accept: image/avif,image/webp,image/*The server delivers the optimal format without changing the markup — just use one URL in src.
Implementation checklist
| Action | Check |
|---|---|
| Convert to WebP | Compare file size before and after |
| Add AVIF | For browsers that support it |
| Add a JPEG/PNG fallback | Check in older browsers |
| Add width/height attributes | To prevent CLS |
| Add alt text | For all images |
Learn more about image optimization in the image optimization guide. For lazy loading, see the article on lazy loading.
Build integration
For static sites and applications, WebP/AVIF conversion can be part of the build:
// Пример с sharp (Node.js)
const sharp = require('sharp');
await sharp('input.jpg')
.webp({ quality: 80 })
.toFile('output.webp');
await sharp('input.jpg')
.avif({ quality: 35 })
.toFile('output.avif');Next.js, Gatsby, and other frameworks have plugins for automatic conversion during the build.
Comparing quality at different compression levels
| Format | Quality 80 | Quality 60 | Quality 40 |
|---|---|---|---|
| JPEG | Baseline size | -25% | -40% |
| WebP | -30% of JPEG | -45% | -55% |
| AVIF | -50% of JPEG | -60% | -70% |
Visual testing is recommended: these figures are averages, and results depend on the image type.
Frequently asked questions
Do I need to support fallbacks for older browsers?
For most websites in 2026, no. IE11 and older versions of Safari account for less than 1% of traffic. If your audience uses older devices, keep a picture element with a fallback.
Which is better: WebP or AVIF?
AVIF offers better compression at the same quality. WebP has broader support. It is recommended to use both with picture: AVIF for browsers that support it, and WebP for other modern browsers.
Does the format affect indexing in Google Images?
No. Google indexes images in any format. Alt text, context, and content quality are more important.
Conclusion
WebP and AVIF significantly reduce image file sizes while preserving quality. It is recommended to use picture with source for AVIF and WebP, with a JPEG/PNG fallback. Check the results with the image check and Image Compressor on reChecker.