AVIF o WebP: qué formato de imagen elegir en 2026

En una tienda online o en cualquier web con fotos, las imágenes son casi siempre lo que más pesa de la página. Un catálogo de producto puede cargar veinte o treinta fotos por pantalla, y si cada una pesa de más, la página tarda, el visitante se impacienta y Google lo nota. Por eso elegir bien el formato de imagen no es un detalle técnico menor: es una de las palancas más directas para que tu web vaya rápida.

Durante años el rey fue el JPG, acompañado del PNG para transparencias. Hoy hay opciones que comprimen mucho mejor manteniendo la misma calidad visible: WebP, ya universal, y AVIF, más nuevo y más eficiente. También asoma JPEG XL, prometedor pero con soporte todavía irregular. La pregunta práctica es cuál usar en 2026 para tu caso concreto.

En esta guía comparamos AVIF, WebP, JPEG XL, JPG y PNG por tres criterios que importan de verdad: cuánto comprimen sin degradar la imagen, en qué navegadores funcionan y cómo afectan a la velocidad real de carga. Verás una regla sencilla para decidir según tu tipo de contenido, cómo montar un fallback con la etiqueta picture para que ningún visitante se quede sin ver la foto, y qué gana cada uno en las métricas de Core Web Vitals que Google usa para posicionar. Sin exageraciones y con recomendaciones que puedes aplicar hoy.

WebP es el formato que hoy puedes usar prácticamente sin pensarlo. Lo desarrolló Google, lleva más de una década madurando y a día de hoy lo entienden todos los navegadores modernos: Chrome, Firefox, Edge, Safari y sus versiones móviles. Si tu prioridad es que la foto se vea en cualquier dispositivo sin complicaciones, WebP es la apuesta segura.

Qué ofrece WebP

• Compresión con y sin pérdida. Puede sustituir tanto al JPG (con pérdida) como al PNG (sin pérdida), cubriendo los dos casos con un solo formato.
• Transparencia. Soporta canal alfa, así que reemplaza al PNG en logos e imágenes con fondo transparente, pero pesando mucho menos.
• Animación. Puede animarse como un GIF, con muchísimo menos peso.
• Ahorro típico. Frente a un JPG de calidad equivalente, un WebP suele pesar entre un 25 y un 35 por ciento menos. Frente a un PNG, el ahorro es aún mayor.

Por qué sigue siendo la elección por defecto

La virtud de WebP no es ser el que más comprime, sino el equilibrio. Comprime bastante mejor que el JPG, lo entiende todo el mundo y las herramientas para generarlo están por todas partes: Photoshop lo exporta de forma nativa, cualquier plugin de tienda online lo genera automáticamente y hay servicios de conversión por lotes. No tienes que preocuparte por si un visitante con un móvil antiguo verá un hueco en blanco, porque el soporte es total.

Para la inmensa mayoría de tiendas, migrar el catálogo de JPG a WebP es la mejora de rendimiento con mejor relación entre esfuerzo y resultado. Reduces el peso de las páginas de golpe, mejoras los tiempos de carga y no rompes nada. Es el primer paso que recomendamos a cualquiera antes de plantearse formatos más nuevos.

Cuándo WebP se queda corto

WebP tiene un límite. En imágenes muy detalladas o con degradados suaves, si aprietas mucho la compresión pueden aparecer pequeños artefactos o bandas. Y aunque comprime mejor que el JPG, no llega al nivel de AVIF. Si tu web maneja miles de fotos y cada kilobyte cuenta para las métricas de velocidad, ahí es donde entra en juego el formato siguiente.

AVIF es el formato que aprieta más. Se basa en la tecnología de compresión de vídeo AV1 y consigue archivos notablemente más ligeros que WebP con la misma calidad percibida. Si tu objetivo es exprimir al máximo la velocidad y el ahorro de datos, AVIF es la referencia actual.

Las ventajas de AVIF

• Compresión superior. Frente a un JPG equivalente, un AVIF puede pesar hasta un 50 por ciento menos, y suele quedar por debajo del WebP también. En fotos grandes el ahorro es enorme.
• Mejor con degradados. Maneja los cielos, las sombras suaves y las transiciones de color sin las bandas que a veces afean al JPG o al WebP muy comprimido.
• Alto rango dinámico y color amplio. Soporta HDR y espacios de color amplios, útil para fotografía de calidad.
• Transparencia. Igual que WebP, admite canal alfa, así que también sustituye al PNG.

El estado del soporte en 2026

La buena noticia es que el soporte de AVIF ha crecido mucho. Chrome, Firefox y Edge lo entienden desde hace tiempo, y Safari lo admite en sus versiones recientes tanto en escritorio como en móvil. Esto significa que la gran mayoría de tus visitantes verá AVIF sin problema. La cautela es que todavía queda una fracción de navegadores antiguos o entornos concretos que no lo soportan, y por eso AVIF casi nunca se sirve solo: se acompaña de un fallback a WebP o JPG.

El coste de AVIF

AVIF tiene un precio, y no es el visitante quien lo paga sino tu proceso de trabajo. Codificar a AVIF es más lento y consume más máquina que codificar a WebP. En un catálogo de miles de imágenes, generar los AVIF puede llevar bastante más tiempo de proceso. Además, no todas las herramientas antiguas lo exportan, aunque las versiones recientes de Photoshop y la mayoría de servicios modernos ya lo hacen. En la práctica, el flujo habitual es generar AVIF como opción principal y WebP como respaldo, sirviendo a cada navegador el mejor formato que entienda.

Para decidir bien hay que conocer también a los demás jugadores y, sobre todo, cómo servir varios formatos a la vez sin dejar a nadie fuera.

Los otros formatos, en breve

• JPEG XL. Técnicamente brillante: comprime muy bien, admite conversión sin pérdida desde JPG y tiene características avanzadas. Su problema en 2026 sigue siendo el soporte irregular en navegadores, lo que lo deja fuera como opción principal para la web pública. Vale la pena vigilarlo, pero todavía no apostar todo a él.
• JPG. El veterano. Universal, entendido por absolutamente todo, pero con la peor compresión de la lista. Sigue siendo el fallback último perfecto, el formato que garantiza que cualquier dispositivo, por antiguo que sea, verá la imagen.
• PNG. Insuperable para transparencias nítidas, capturas de pantalla y gráficos con texto, donde la compresión sin pérdida importa. Para fotografía pesa demasiado; ahí WebP o AVIF lo superan claramente.

El fallback con la etiqueta picture

La forma correcta de aprovechar los formatos modernos sin romper nada es la etiqueta HTML picture. Funciona así: le das al navegador varias opciones ordenadas de mejor a peor, y él elige la primera que entiende. Ningún visitante se queda sin imagen porque, si no soporta AVIF ni WebP, cae al JPG de siempre.

La estructura es sencilla. Dentro de picture pones varias fuentes source, cada una con su tipo de formato, y al final una etiqueta img normal con el JPG como red de seguridad:

1. Primera source: el AVIF, la opción más ligera.
2. Segunda source: el WebP, para quien no entienda AVIF.
3. Etiqueta img final: el JPG, que sirve como respaldo universal y además define el texto alternativo y las dimensiones.

El navegador lee de arriba abajo y se queda con la primera fuente compatible. Un móvil moderno recibe el AVIF ligerísimo; uno más antiguo recibe el WebP; y un dispositivo muy viejo recibe el JPG. Todos ven la foto, cada uno con el formato más eficiente que su navegador soporta.

El detalle que no debes olvidar

Incluye siempre los atributos de ancho y alto en la etiqueta img. Esto reserva el espacio de la imagen antes de que cargue y evita que el contenido salte mientras se descarga, uno de los problemas que Google penaliza con la métrica de estabilidad visual. Un fallback bien montado con dimensiones declaradas te da lo mejor de todos los mundos: máxima compresión donde se puede y compatibilidad total en todas partes.