¿Qué son AVIF y WebP en comparación?

AVIF (AV1 Image File Format) y WebP son dos formatos modernos de imagen rasterizada que comprimen mucho mejor que JPEG y PNG. WebP fue lanzado por Google en septiembre de 2010 basado en el codec de video VP8 y alcanzo soporte total en navegadores modernos cuando Safari lo anadio en iOS 14 (septiembre 2020). AVIF fue estandarizado por la Alliance for Open Media en febrero de 2019 basado en el codec AV1 y obtuvo soporte amplio cuando Safari 16 lo anadio en septiembre de 2022. AVIF comprime fotos 20 a 30 por ciento mas pequenas que WebP a la misma calidad visual y 50 por ciento mas que JPEG. WebP es 25 a 35 por ciento mas pequeno que JPEG. Ambos soportan transparencia, animacion y compresion sin perdida. AVIF anade HDR, profundidad 10 y 12 bits y gamut amplio. La codificacion WebP es 10 a 20 veces mas rapida que AVIF, lo que importa en sitios que reescalan al subir. Una foto de producto puede pesar 180 KB en JPEG, 110 KB en WebP y 75 KB en AVIF a la misma calidad.

Diferencia de tamano en la practica

Soporte de navegadores

Como servir AVIF con 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>

Como convertir

• cwebp -q 80 hero.jpg -o hero.webp
• avifenc --min 25 --max 35 hero.jpg hero.avif
• Sharp (Node.js), ImageMagick 7.0.25+, libvips, Squoosh.
• CDN al vuelo: Cloudflare Images, Cloudinary, imgix, Bunny Optimizer, Statically.

WordPress y AVIF/WebP

WordPress 5.8 (jul 2021) anadio WebP. WordPress 6.5 (abr 2024) anadio AVIF. Plugins de conversion: ShortPixel, EWWW Image Optimizer, Imagify, Smush, Converter for Media, Optimole. Cloudflare Polish convierte en el edge.

Cuando AVIF, cuando WebP

• AVIF para heros y fotos grandes, generado en build.
• WebP para long tail e imagenes subidas por usuarios.
• Ambos via picture es la solucion estandar.
• Evita AVIF en iconos menores a 5 KB.
• No uses ninguno para SVG ni GIFs animados.

JPEG XL y HEIC

JPEG XL (ISO/IEC 18181, 2022) comprime parecido a AVIF, codifica mas rapido. Chrome lo retiro en 2023, Safari 17 (sep 2023) lo soporta. HEIC es propietario de Apple, no soportado en web.

Desventajas de AVIF

• Codificacion lenta.
• Decodificacion mas costosa en moviles antiguos.
• Soporte irregular en email.
• Previews sociales (Facebook, LinkedIn) a menudo necesitan JPEG.

Como ayuda InspectWP?

InspectWP analiza cada imagen y reporta formato, tamano y si conviene servir como AVIF o WebP.