WebP vs AVIF vs JPEG XL: qué formato usar en 2026
Los tres prometen imágenes más ligeras que JPEG y PNG, pero no son intercambiables. Esta guía resume sus diferencias reales y cómo combinarlos.
Resumen rápido
- AVIF: la mejor compresión que puedes servir hoy a casi todos los navegadores. Úsalo como formato principal para fotografías.
- WebP: compatibilidad universal y codificación rápida. El mejor respaldo de AVIF y una opción sólida por sí solo.
- JPEG XL: técnicamente el más completo, pero con soporte limitado en navegadores. Útil para archivo y como fuente adicional en
<picture>.
Si solo tienes tiempo para una decisión: genera AVIF + WebP (o AVIF + JPEG si necesitas compatibilidad con software antiguo) y sirve ambos con <picture>.
Cómo comprimen
Los tres formatos se basan en ideas parecidas —dividir la imagen en bloques, transformarlos al dominio de frecuencias y descartar la información que el ojo percibe menos—, pero con herramientas de generaciones distintas.
WebP (2010) deriva del codec de vídeo VP8. Usa bloques de tamaño fijo, predicción intra-cuadro y un filtro de desbloqueo que suaviza los bordes entre bloques. Su modo con pérdida siempre reduce la resolución del color a la mitad (4:2:0).
AVIF (2019) usa AV1, un codec de vídeo mucho más moderno. Admite bloques de tamaños variables (desde 4×4 hasta 128×128), decenas de modos de predicción, filtros de restauración y profundidad de 10 o 12 bits. Por eso destaca a calidades medias y bajas: donde JPEG muestra bloques y WebP emborrona, AVIF mantiene bordes limpios.
JPEG XL (2021) se diseñó específicamente para imágenes. Combina una transformada variable (VarDCT) con un modo modular sin pérdida, decodificación progresiva real y la posibilidad de recomprimir un JPEG existente sin pérdida ahorrando en torno a un 20 %.
Tamaño de archivo
Las cifras exactas dependen de cada imagen, pero en fotografía, a igual calidad percibida, el orden habitual es:
| Formato | Tamaño relativo a JPEG (MozJPEG) |
|---|---|
| JPEG | 100 % |
| WebP | 70-80 % |
| JPEG XL | 55-70 % |
| AVIF | 50-65 % |
La ventaja de AVIF crece cuanto más agresiva es la compresión. A calidades muy altas (casi sin pérdida), JPEG XL suele igualarlo o superarlo.
En gráficos planos —capturas, diagramas, iconos—, el ganador cambia: WebP sin pérdida y JPEG XL sin pérdida suelen superar a AVIF, y ambos mejoran a PNG.
Calidad visual y artefactos
Cada formato falla de forma diferente cuando se le exige demasiado:
- JPEG: bloques de 8×8 y "mosquitos" alrededor de los bordes.
- WebP: pérdida de textura fina, aspecto "plástico" y color sangrado en bordes saturados por el 4:2:0.
- AVIF: suavizado de texturas muy finas (hierba, tejidos) a calidades bajas, aunque los bordes se mantienen nítidos.
- JPEG XL: degradación más gradual y parecida al ruido, menos llamativa.
Para capturas de pantalla o imágenes con texto, el submuestreo de color importa más que el formato. AVIF y JPEG XL admiten 4:4:4; WebP con pérdida no, por eso para texto conviene WebP sin pérdida.
Velocidad de codificación y decodificación
WebP es el más rápido de codificar con diferencia. AVIF es el más lento: una foto grande puede tardar varios segundos con esfuerzo alto. JPEG XL se sitúa entre ambos y es muy rápido de decodificar.
Para un sitio web, el tiempo de codificación solo importa al publicar. La decodificación sí afecta al usuario, pero en los tres formatos es lo bastante rápida en dispositivos actuales como para no ser un problema.
Compatibilidad en 2026
| Formato | Chrome / Edge | Firefox | Safari | Cobertura aproximada |
|---|---|---|---|---|
| WebP | Sí | Sí | Sí (14+) | ~97 % |
| AVIF | Sí (85+) | Sí (93+) | Sí (16.4+) | ~95 % |
| JPEG XL | En desarrollo | En desarrollo | Sí (17+) | Limitada |
Fuera del navegador, WebP y AVIF se abren en Windows 11, macOS reciente, Android e iOS. JPEG XL tiene buen soporte en editores profesionales (Photoshop, GIMP, Affinity) pero no en todos los visores.
Qué formato usar en cada caso
| Caso | Recomendación |
|---|---|
| Imagen principal (hero) | AVIF 55-65 + WebP o JPEG de respaldo |
| Fotos de producto | AVIF 60-65 + WebP |
| Miniaturas y listados | WebP 75-80 (el ahorro extra de AVIF es pequeño en imágenes pequeñas) |
| Capturas y UI | WebP sin pérdida, o AVIF 4:4:4 a calidad alta |
| Logotipos | SVG; si es mapa de bits, WebP sin pérdida |
| Archivo fotográfico | JPEG XL sin pérdida o recompresión de JPEG |
| Email, documentos, redes | JPEG optimizado con MozJPEG |
Cómo servirlos juntos
El elemento <picture> permite ofrecer varios formatos y dejar que el navegador elija el primero que soporte:
<picture>
<source type="image/avif" srcset="foto.avif">
<source type="image/webp" srcset="foto.webp">
<img src="foto.jpg" width="1600" height="900" alt="Descripción">
</picture>
El orden importa: de más eficiente a más compatible. Si incluyes JPEG XL, ponlo primero; Safari lo usará y el resto de navegadores lo ignorará. En la guía sobre el elemento picture explicamos los detalles.
Preguntas frecuentes
¿AVIF siempre es mejor que WebP?
En fotografía a calidades medias, casi siempre. En imágenes pequeñas, gráficos planos o cuando necesitas codificar muy rápido, WebP puede ser la mejor opción.
¿Merece la pena usar JPEG XL en una web?
Solo como fuente adicional dentro de <picture>. Por sí solo, la mayoría de usuarios no podría verlo.
¿Necesito seguir generando JPEG?
Si tu público usa navegadores modernos, AVIF + WebP es suficiente. JPEG sigue siendo útil para Open Graph (algunas redes no aceptan formatos modernos), emails y descargas.
¿Qué calidad equivale entre formatos?
Como orientación: AVIF 60 ≈ JPEG XL 75-80 ≈ WebP 80 ≈ JPEG 85. Compruébalo siempre con tus propias imágenes en el comparador.