AVIF y WebP: cómo elegir el formato de imagen correcto
AVIF, WebP o los antiguos JPEG y PNG: qué formato conviene a cada imagen y cómo la conversión automática acelera de verdad un sitio web.
Equipo de rabbitclipPublicación: 5 min. de lectura
En breve
AVIF conviene a las imágenes con mucho contenido fotográfico, WebP a todo lo que necesite amplio soporte de navegadores con transparencia, y JPEG o PNG quedan como reserva para los navegadores antiguos que no leen ninguno de los dos. Servir los tres a la vez se hace con la etiqueta picture o mediante conversión automática en el servidor; la persona que visita el sitio no hace nada extra, su navegador simplemente recibe el archivo más pequeño que puede leer.
Cuando la página de galería de una cadena de spas carga como una serie de JPEG en alta resolución, la aparición puede tardar varios segundos. Si esas mismas imágenes se sirven como AVIF o WebP, el peso del archivo baja de forma notable; según las mediciones de web.dev, las imágenes WebP sin pérdida son un 26 % más ligeras que un PNG, y el WebP con pérdida resulta entre un 25 y un 35 % más ligero que un JPEG equivalente.
¿Qué son AVIF y WebP, y en qué se diferencian del JPEG?
AVIF es un formato de imagen de código abierto construido sobre el códec de vídeo AV1; produce un archivo mucho más pequeño con la misma calidad visual que el JPEG. WebP, desarrollado por Google, admite compresión con y sin pérdida además de transparencia; su soporte en navegadores es más amplio que el de AVIF.
Ambos están pensados para sustituir a los antiguos JPEG y PNG, pero no son intercambiables. AVIF comprime más pero tarda más en codificarse; WebP se codifica más rápido y funciona en más navegadores. La mayoría de los sitios sirven ambos, en un orden de prioridad.
¿Qué formato conviene a cada imagen?
El formato correcto depende de qué es realmente la imagen: una fotografía, un logo, un icono y una animación dan mejor resultado cada uno en un formato distinto.
- fotos y fotos de producto: AVIF primero, WebP como reserva
- logos e iconos transparentes: WebP, porque admite transparencia tanto con pérdida como sin ella
- dibujos sencillos y gráficos de color plano: SVG, sin necesidad de ningún formato de mapa de bits
- animaciones cortas: un WebP animado en lugar de un GIF
Cómo configurar la conversión automática
La vía más simple es la etiqueta picture; al navegador se le ofrecen AVIF, luego WebP, luego JPEG en orden, y elige el primero que sabe leer. La configuración puede hacerse en uno de tres niveles.
- en un sitio con Next.js, el componente Image integrado genera el formato correcto por petición de forma automática, sin configuración extra
- en WordPress o un sitio estático, herramientas como sharp o squoosh-cli generan copias en AVIF y WebP durante el build
- a nivel de CDN, un servicio de imágenes elige el formato por sí mismo con una opción como format=auto, según lo que admita el navegador que hace la petición
- en las tres vías el JPEG o PNG original se mantiene como reserva, de modo que ningún navegador se queda nunca sin imagen
¿Por qué sigue siendo necesaria una reserva?
AVIF y WebP funcionan en la gran mayoría de navegadores actuales, pero versiones antiguas usadas en redes corporativas, algunos clientes de correo o vistas previas dentro de una aplicación pueden no reconocer ninguno de los dos formatos. Una imagen AVIF publicada sin reserva simplemente no aparece en esos clientes; se convierte en un icono roto.
La guía de formatos de imagen de MDN recomienda por eso una reserva junto a cada formato nuevo; la etiqueta picture o la negociación de contenido en el servidor hace esa reserva automática, sin tener que subir cada imagen dos veces a mano.
Entrega automática de formato a nivel de CDN y hosting
Dejar la conversión en manos del CDN en lugar del proceso de build tiene la ventaja de que la imagen origen queda intacta mientras el formato servido se adapta solo al navegador. Los servicios de optimización de imágenes de Cloudflare hacen esto con una opción como format=auto; un navegador que admite AVIF recibe AVIF, uno que no, recibe WebP en su lugar.
Lo que conviene vigilar es qué servicio se usa realmente; Cloudflare retiró su antiguo servicio Polish para zonas nuevas durante 2026 y dirige las configuraciones nuevas hacia Image Resizing y Cloudflare Images. El servicio que hay detrás de un sitio decide directamente si AVIF siquiera se ofrece.
Errores frecuentes
Configurar una conversión una vez no cierra el tema; tres errores siguen apareciendo con regularidad.
- publicar AVIF sin reserva, perdiendo la imagen por completo en clientes antiguos
- dejar la compresión en el ajuste más agresivo sin comprobar la calidad a simple vista
- subir una imagen origen mucho más grande que su tamaño de visualización real, lo que infla el archivo sea cual sea el formato
- convertir el formato pero no fijar el ancho y el alto en el HTML, lo que provoca saltos de diseño mientras carga la página
Elegir entre AVIF y WebP no es un truco de velocidad por sí solo; el formato correcto solo compensa junto al tamaño adecuado y una reserva. Una primera llamada con rabbitclip es una buena forma de medir cuánto peso de imagen está frenando de verdad su sitio.
Preguntas frecuentes
¿Es AVIF siempre mejor que WebP?
En cuanto a tamaño de archivo, normalmente sí, pero tarda más en codificarse y funciona en menos navegadores. La mayoría de los sitios sirven ambos, con AVIF primero.
¿Deben abandonarse por completo PNG y JPEG?
No, deben quedar como reserva. Los navegadores y clientes antiguos todavía los necesitan.
¿Cambiar el formato de imagen afecta al SEO?
No de forma directa, pero páginas más rápidas mejoran las puntuaciones de Core Web Vitals y, de forma indirecta, las señales de experiencia de usuario.
¿Cuándo conviene usar SVG en su lugar?
En logos, iconos y dibujos de color plano; al ser vectorial y no de mapa de bits, se mantiene nítido a cualquier tamaño y suele ser más ligero también.
