JPEG, WebP y AVIF - Diferencias y cómo elegir el formato de imagen adecuado

Cómo funcionan JPEG, WebP y AVIF y en qué destaca cada uno

Al elegir un formato de compresión de imagen, los tres que más dudas generan son JPEG, WebP y AVIF. Los tres se usan sobre todo para compresión con pérdida, es decir, para reducir el archivo manteniendo un aspecto casi idéntico, pero nacieron en épocas distintas y con mecanismos internos diferentes, así que se distinguen en los tipos de imagen que manejan bien y en las funciones que ofrecen.

JPEG tiene una larga historia y se abre prácticamente en cualquier entorno. La guía de tipos de archivo de imagen de MDN (actualizada en agosto de 2026) sigue describiéndolo como la opción más popular para la compresión con pérdida de imágenes fijas. También enumera todas las versiones de Chrome, Edge, Firefox, Opera y Safari como compatibles. Divide la imagen en bloques de 8x8 píxeles, convierte cada uno en componentes de frecuencia y guarda con menor precisión el detalle de alta frecuencia que el ojo apenas percibe para ahorrar espacio. Es adecuado para fotografías de tonos continuos, pero no puede almacenar transparencia (canal alfa) y, con una compresión fuerte, tiende a mostrar bordes de bloque visibles y manchas alrededor del texto.

WebP fue desarrollado por Google y aplica a imágenes fijas la codificación de fotogramas clave del códec de vídeo VP8. Como usa codificación predictiva, estimando cada bloque a partir de sus vecinos y guardando solo la diferencia, tiende a ser más pequeño que JPEG a la misma calidad, y admite los modos con pérdida y sin pérdida, además de transparencia y animación. La documentación oficial de WebP de Google (actualizada en agosto de 2025) indica que las imágenes WebP sin pérdida son un 26% más pequeñas que los PNG. Según el mismo documento, las imágenes con pérdida son entre un 25% y un 34% más pequeñas que los JPEG comparables a calidad equivalente. Una limitación es que una imagen WebP puede tener como máximo 16383 píxeles por lado (FAQ de WebP, actualizada en febrero de 2026).

AVIF son las siglas de AV1 Image File Format, definido por la Alliance for Open Media (AOMedia); empaqueta la codificación de imagen fija del códec de vídeo AV1 en un contenedor de la familia HEIF (especificación AVIF v1.2.0, octubre de 2025). Al usar bloques de tamaño variable mayores que los 8x8 de JPEG junto con una predicción avanzada, resulta eficiente en zonas de color plano y en imágenes grandes. Además, admite profundidades de color de 8, 10 y 12 bits, transparencia, HDR y secuencias de imágenes (animación) (MDN, actualizada en agosto de 2026). Que sea libre de regalías es otra razón por la que su adopción en la web ha crecido.

En resumen: JPEG cuando la compatibilidad es lo primero, WebP cuando se busca un equilibrio entre compatibilidad y compresión, y AVIF cuando lo que más importa es el ratio de compresión y las funciones. Las secciones siguientes muestran cómo se reflejan estas diferencias en la calidad, el tamaño de archivo, el soporte en navegadores y los usos.

Calidad frente a tamaño de archivo - Qué determina la eficiencia de compresión

Una cifra única como "AVIF es un X% más pequeño que JPEG" varía en realidad mucho según las condiciones. Incluso dentro de un mismo formato, el ratio de compresión sube y baja con el ajuste de calidad, el contenido de la imagen, la resolución y la implementación del codificador y sus parámetros, así que, cuando veas un número, comprueba las condiciones que hay detrás.

Ajuste de calidad: En la compresión con pérdida, bajar el parámetro de calidad reduce el archivo, pero pasado cierto punto la degradación se hace visible. El parámetro de calidad significa algo distinto en cada formato, de modo que dar a JPEG y a WebP el mismo valor de calidad no produce la misma calidad visual. Una comparación justa exige igualar primero la calidad, con una métrica como SSIM o por inspección visual, y comparar después los tamaños.

Contenido de la imagen: Las zonas suaves, como los degradados del cielo o la piel, son fáciles de predecir y se comprimen bien en todos los formatos. Las texturas finas, como telas, vetas de madera o grava, son difíciles de predecir; el ratio baja y una compresión fuerte puede aplanar el detalle hasta dar un aspecto de pintura. En capturas de pantalla con texto y líneas nítidas, JPEG tiende a producir ringing, una mancha en forma de halo alrededor de los bordes, y necesita un ajuste de calidad alto para conservar el mismo aspecto.

Resolución: Los bloques grandes de tamaño variable que usa AVIF pueden representar de una vez amplias zonas planas, por lo que tiende a ganar más en imágenes grandes. En miniaturas pequeñas la diferencia entre formatos tiende a reducirse, así que conviene comprobarlo por tamaños.

Codificador y ajuste de velocidad: Incluso con el mismo formato, los resultados cambian según la implementación del codificador y su ajuste de velocidad (effort). En general, cuanto más tiempo busca el codificador, mejor es el ratio; dar prioridad a la velocidad lo reduce. La codificación AVIF tiende a tardar más que la de JPEG o WebP, lo que es aceptable para conversiones por lotes en tiempo de compilación. En cambio, al convertir justo después de una subida, puede exigir ajustar la velocidad o aplazar el trabajo. El coste de decodificación (visualización) también varía según el formato, así que en páginas con muchas imágenes conviene combinar decoding="async" con la carga diferida.

La conclusión: lee cualquier cifra de compresión como un ejemplo bajo sus propias condiciones y verifícala con tus propias imágenes. Los pasos se describen más abajo en "Probar con tus propias imágenes".

Soporte en navegadores hoy y cómo ofrecer alternativas

Un ratio de compresión alto no sirve de nada si el navegador del visitante no puede mostrar la imagen. Según los datos de caniuse (actualizados en agosto de 2026), el soporte ponderado por cuota de uso global es de alrededor del 96% para WebP. AVIF ha alcanzado alrededor del 95%, y las versiones actuales de Chrome, Edge, Firefox y Safari muestran ambos formatos.

Sin embargo, el momento en que llegó ese soporte difiere. En los mismos datos, Safari obtuvo soporte completo de WebP en la versión 16.0 (las versiones 14.0 a 15.6 requerían macOS 11 o posterior) y soporte completo de AVIF en la versión 16.4. Por eso, los visitantes con un Safari anterior necesitan una alternativa. El AVIF animado (secuencias de imágenes) llegó más tarde que las imágenes fijas; los datos marcan Safari 16.1 a 16.3 y Firefox 93 a 112 como compatibles solo con imágenes fijas (Safari 16.0 y anteriores no admiten AVIF en absoluto).

La respuesta práctica es el elemento picture: enumera los candidatos desde el formato más nuevo hacia abajo y coloca JPEG o PNG al final. El navegador elige el primer source que puede mostrar, así que no hace falta escribir código que detecte el soporte y ramifique.

<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="Descripción de la foto">
</picture>

Algunas CDN y servicios de transformación de imágenes leen la cabecera Accept de la petición y devuelven el mejor formato desde el servidor. Esto permite migrar sin cambiar el HTML, pero conviene tener en cuenta en el diseño que la caché queda entonces dividida por cabecera Accept.

Elegir según el uso - Fotos, ilustraciones, transparencia y animación

Qué formato encaja depende del tipo de imagen. Así conviene pensar cada caso de uso.

• Fotos: El terreno clásico donde la compresión con pérdida funciona bien. El patrón básico es una configuración de tres niveles con AVIF como primera opción, WebP como segunda y JPEG como alternativa final. En fotos con mucha textura, bajar demasiado la calidad de AVIF puede aplanar el detalle, así que empieza con un ajuste de calidad conservador y afina a ojo.
• Ilustraciones y diseño plano: Las grandes zonas de color uniforme permiten que la codificación predictiva de WebP y AVIF funcione bien. Cuando no se admiten manchas en las líneas, elige en su lugar un modo sin pérdida, con WebP sin pérdida (a menudo más pequeño que PNG) o PNG.
• Capturas de pantalla e imágenes con texto: Mantener nítidos los bordes del texto es la prioridad principal. Si optas por pérdida, evita JPEG y usa WebP o AVIF a alta calidad; en caso contrario, elige PNG o WebP sin pérdida.
• Imágenes transparentes (iconos, fotos de producto recortadas): JPEG no puede almacenar transparencia, así que PNG fue durante mucho tiempo la opción por defecto. Tanto WebP como AVIF ofrecen compresión con pérdida con canal alfa, por lo que migrar desde PNG suele producir una gran reducción de tamaño, y las imágenes de producto de las tiendas en línea merecen abordarse primero.
• Animación: El WebP animado es el sustituto habitual del GIF, y la guía de MDN también recomienda considerar WebP, AVIF o APNG para animación. Las secuencias de imágenes AVIF están contempladas en la especificación, pero, como se indicó en la sección anterior, el soporte de los navegadores llegó en momentos distintos, así que para clips largos considera también un elemento video con MP4 o WebM.
• HDR y alta profundidad de bits: El formato para el que la guía de MDN (actualizada en agosto de 2026) enumera profundidades de color de 8, 10 y 12 bits y soporte HDR es AVIF; WebP es de 8 bits. Para usos que valoran el rango tonal, como la publicación de obra fotográfica, esta es una razón para elegir AVIF.

Fija las prioridades de migración según el impacto y el esfuerzo. Para muchos sitios el orden eficiente es (1) imágenes transparentes (sustituyendo PNG), (2) imágenes hero y LCP, (3) el gran volumen de fotos y (4) pasar a AVIF las ilustraciones y capturas de pantalla que ya están en WebP.

Probar con tus propias imágenes - Squoosh, cwebp y avifenc

Como la diferencia entre formatos depende de la imagen y de los ajustes, lo fiable es elegir unas cuantas imágenes que realmente sirvas en tu sitio y probarlas antes de adoptar un formato. A continuación, dos maneras de hacerlo, de la más sencilla a la más avanzada, y un principio para comparar los resultados de forma justa.

En el navegador (Squoosh): Squoosh (squoosh.app) comprime imágenes en el navegador y permite comparar el resultado con el original mientras cambias el códec y la calidad. El tamaño de archivo se muestra sobre la marcha, lo que lo hace muy adecuado para encontrar la calidad más baja que todavía se ve aceptable. No requiere instalación.

En la línea de comandos (cwebp / avifenc): cwebp, incluido en libwebp, recibe una calidad de 0 a 100 mediante -q (valor por defecto 75; documentación de cwebp, actualizada en agosto de 2025). Con -lossless pasa al modo sin pérdida. avifenc, incluido en libavif, también acepta una calidad mediante -q (README de libavif). Exporta la misma imagen a varios niveles de calidad y tabula el tamaño frente al aspecto, y los ajustes adecuados para tus imágenes quedarán claros.

cwebp -q 75 input.png -o output.webp
avifenc -q 75 input.png output.avif

Comparar a calidad igualada: Para una comparación justa, decide si igualar el tamaño de archivo y comparar el aspecto, o igualar el aspecto y comparar el tamaño. Las métricas de calidad como SSIM son una opción, pero al final la comprobación visual al tamaño real de visualización es la fiable. Texto, piel, degradados del cielo y textura fina son las cuatro zonas donde la degradación aparece primero, así que revísalas con atención.

Los números que obtengas en esta fase solo valen para tus imágenes y tus ajustes. No es extraño que discrepen de las cifras comparativas publicadas en otros sitios; basar las decisiones en tus propias mediciones es el camino seguro.

Resumen - Un camino de decisión cuando hay dudas

Por último, este es el camino de decisión en orden.

• Si la compatibilidad es lo primero y quieres el mínimo esfuerzo, mantén JPEG (fotos) y PNG (transparencia, texto) y limítate a revisar los ajustes de calidad.
• Si quieres una gran reducción con una operación sencilla, pasa a WebP y conserva JPEG / PNG como alternativas en un elemento picture.
• Si quieres ir más lejos, o necesitas HDR o alta profundidad de bits, haz de AVIF la primera opción con una alternativa de tres niveles hacia WebP y JPEG, y absorbe el mayor tiempo de codificación en el procesamiento por lotes en tiempo de compilación.
• Para animación, usa WebP animado por defecto y sustitúyelo por un elemento de vídeo en los clips largos.

En todas las fases, las claves de una migración sin sorpresas son verificar la calidad y el tamaño con tus propias imágenes antes de adoptar un formato y mantener en funcionamiento los entornos antiguos mediante las alternativas de picture. El soporte de formatos y los codificadores siguen evolucionando, así que consulta de vez en cuando caniuse y la documentación oficial en busca de novedades.