AVIF (AV1 Image File Format) e WebP sao dois formatos modernos de imagem raster que comprimem muito melhor que JPEG e PNG. WebP foi lancado pelo Google em setembro de 2010, baseado no codec VP8, e alcancou suporte total em navegadores modernos quando o Safari adicionou no iOS 14 (setembro 2020). AVIF foi padronizado pela Alliance for Open Media em fevereiro de 2019, baseado no codec AV1, e alcancou amplo suporte quando o Safari 16 adicionou em setembro de 2022. AVIF comprime fotos 20 a 30 por cento menores que WebP na mesma qualidade visual e 50 por cento menores que JPEG. WebP e 25 a 35 por cento menor que JPEG. Ambos suportam transparencia, animacao e compressao sem perdas. AVIF tambem suporta HDR, 10 e 12 bits e gamut amplo. Codificacao WebP e 10 a 20 vezes mais rapida que AVIF.
Diferenca de tamanho na pratica
| Formato | Foto Q 75 a 80 | vs JPEG | vs WebP |
|---|---|---|---|
| JPEG | 180 KB | base | +60 por cento |
| WebP lossy | 110 KB | -39 por cento | base |
| AVIF | 75 KB | -58 por cento | -32 por cento |
| JPEG XL | 80 KB | -55 por cento | -27 por cento |
Suporte de navegadores
| Navegador | WebP | AVIF |
|---|---|---|
| Chrome | v9 (fev 2011) | v85 (ago 2020) |
| Firefox | 65 (jan 2019) | 93 (out 2021) |
| Safari | 14 (set 2020) | 16 (set 2022) |
| Edge | 18 (nov 2018) | 121 (jan 2024) |
| Cobertura (caniuse 2025) | 97 por cento | 94 por cento |
Servir AVIF com fallback WebP
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Foto" width="1200" height="800" loading="lazy">
</picture>Conversao
cwebp -q 80 hero.jpg -o hero.webpavifenc --min 25 --max 35 hero.jpg hero.avif- Sharp, ImageMagick 7.0.25+, libvips, Squoosh.
- CDNs com conversao on the fly: Cloudflare Images, Cloudinary, imgix, Bunny Optimizer, Statically.
WordPress
WordPress 5.8 (jul 2021) WebP, WordPress 6.5 (abr 2024) AVIF. Plugins: ShortPixel, EWWW Image Optimizer, Imagify, Smush, Converter for Media, Optimole. Cloudflare Polish converte no edge.
Quando AVIF, quando WebP
- AVIF para herois e fotos grandes em build.
- WebP para long tail e uploads.
- Ambos via
picture. - Sem AVIF para icones < 5 KB.
- Nada para SVG e GIF animado.
JPEG XL e HEIC
JPEG XL padronizado em 2022 (ISO/IEC 18181). Chrome removeu em 2023, Safari 17 (set 2023). HEIC e proprietario Apple, sem suporte web.
Desvantagens do AVIF
- Codificacao lenta.
- Decodificacao mais pesada em moveis antigos.
- Suporte em email limitado.
- Previews em redes sociais (Facebook, LinkedIn) muitas vezes precisam de JPEG.
Como o InspectWP ajuda?
InspectWP analisa cada imagem e reporta formato, tamanho e se AVIF ou WebP economizaria banda.