WebP vs AVIF vs JPEG vs PNG: qué formato de imagen elegir y cómo reducir el tamaño

En 2026, los cuatro formatos siguen siendo útiles, pero para tareas distintas:

• AVIF suele ganar en tamaño de transferencia para fotografías e imágenes complejas.
• WebP ofrece un excelente equilibrio entre compresión, funciones, compatibilidad y coste de implantación.
• JPEG continúa siendo el fallback más seguro para fotografía y sistemas con requisitos desconocidos.
• PNG sigue teniendo sentido para gráficos raster sin pérdida, capturas de interfaz, detalles de píxel y transparencia precisa.

TL;DR: para fotografías, sirve AVIF primero, WebP después y conserva JPEG como fallback. Para capturas, gráficos sencillos y transparencia, compara WebP o AVIF sin pérdida con PNG. Para iconos y logotipos, normalmente SVG es mejor que cualquiera de estos formatos raster.

Funciones, compatibilidad y recomendaciones verificadas el 23 de julio de 2026.

Diferencias principales

AVIF admite compresión con y sin pérdida, transparencia, animación, HDR y amplia gama de color. WebP combina modos con y sin pérdida, canal alfa y animación. PNG es sin pérdida y admite transparencia parcial, pero suele ser demasiado pesado para fotografías.

Elección rápida según el recurso

La mejor política se basa en el tipo de recurso, no en una regla de convertir todo a AVIF.

1. JPEG: todavía útil, pero rara vez la mejor opción principal

JPEG fue creado para fotografías. Usa compresión con pérdida y elimina información menos perceptible para el ojo humano. Así consigue archivos mucho menores que PNG, pero una compresión excesiva produce bloques visibles, cambios de color y pérdida de detalle.

Ventajas

• compatibilidad casi universal,
• fallback fiable para fotografía,
• codificación y decodificación rápidas,
• JPEG progresivo,
• herramientas maduras como MozJPEG.

El JPEG progresivo muestra primero una versión aproximada en toda la superficie y va aumentando su calidad. Puede ser ligeramente menor que JPEG baseline y ofrecer una mejor percepción en conexiones lentas.

Limitaciones

• sin canal alfa,
• sin animación,
• compresión destructiva,
• texto, líneas finas e interfaces generan artefactos con rapidez,
• volver a guardar reduce la calidad,
• WebP y AVIF suelen ser menores con calidad visual comparable.

Un estudio oficial del equipo WebP obtuvo archivos WebP entre un 25 y un 34% menores que JPEG con SSIM comparable. No es una garantía universal: influyen la fuente, la versión del codificador, la configuración y la métrica utilizada.

Cuándo elegir JPEG

• cuando un único archivo debe funcionar en el mayor número de sistemas,
• cuando no controlas el cliente que recibe la imagen,
• para CMS antiguos, correo, documentos o plataformas externas,
• como fallback dentro de <picture>,
• cuando todavía no existe una pipeline AVIF/WebP.

En un frontend moderno controlado, normalmente conviene servir formatos modernos primero.

2. PNG: fidelidad, nitidez y transparencia a cambio de tamaño

PNG utiliza compresión sin pérdida y conserva los píxeles. También admite un canal alfa con muchos niveles de transparencia.

Ventajas

• texto, líneas y elementos UI muy nítidos,
• transparencia alfa completa,
• sin pérdida generacional,
• compatibilidad universal,
• buen formato de referencia raster.

Limitaciones

• las fotografías suelen ser mucho mayores que JPEG, WebP o AVIF,
• PNG clásico no es animado; APNG es la variante animada,
• raster escala peor que SVG,
• metadatos, canales o paletas inadecuados aumentan el archivo,
• la transparencia ya no justifica automáticamente usar PNG.

web.dev señala que PNG casi nunca es la opción correcta para entregar fotografías. Los gráficos semitransparentes simples deben compararse con WebP o AVIF.

Cuándo sigue ganando PNG

• capturas con texto pequeño y líneas finas,
• copia raster sin pérdida,
• plataforma que acepta PNG pero no WebP/AVIF,
• paleta de colores pequeña,
• reproducción perfecta prioritaria,
• fuente para futuras codificaciones.

Para logotipos, iconos, gráficos e ilustraciones simples, prueba SVG primero.

3. WebP: el formato predeterminado más práctico

Google desarrolló WebP como alternativa más eficiente a JPEG y añadió después modo sin pérdida, transparencia y animación. Puede sustituir fotos JPEG, muchos PNG y algunas animaciones GIF.

Ventajas

• modos con y sin pérdida,
• transparencia,
• animación,
• soporte muy amplio en navegadores actuales,
• ecosistema maduro en CMS, bibliotecas y CDN de imágenes,
• normalmente menor que JPEG o PNG,
• codificación más sencilla y a menudo más rápida que AVIF.

Limitaciones

• sin renderizado progresivo,
• algunos sistemas antiguos todavía exigen JPEG o PNG,
• un valor de “quality” no es comparable entre formatos,
• WebP no siempre es menor que AVIF,
• WebP sin pérdida no siempre supera a un PNG muy optimizado.

Cuándo elegir WebP

WebP es ideal cuando quieres:

• reducir fotografías rápidamente,
• mantener transparencia,
• cubrir casi todos los navegadores actuales con una variante moderna,
• procesar localmente o bajo demanda,
• limitar el número de formatos en producción,
• equilibrar calidad, tamaño y coste de codificación.

El Conversor y optimizador de imágenes de POLPROG procesa PNG, JPG y WebP localmente en el navegador, con conversión, compresión, redimensionado y eliminación de metadatos.

4. AVIF: menor transferencia y funciones modernas

AVIF se basa en AV1 y el contenedor HEIF. Admite compresión con y sin pérdida, transparencia, animación, HDR y amplia gama de color.

Ventajas

• gran eficiencia de compresión,
• buena calidad con bitrate bajo,
• modos con y sin pérdida,
• transparencia y animación,
• imágenes de 8, 10 y 12 bits, HDR,
• soporte en todos los navegadores principales actuales,
• muy buenos resultados en fotografías, degradados e imágenes complejas.

AVIF pertenece a Baseline desde enero de 2024, por lo que está disponible en versiones actuales de los principales motores.

Limitaciones

• sin renderizado progresivo,
• codificación potencialmente más costosa que JPEG o WebP,
• calidad y tamaño muy dependientes de codificador, velocidad y subsampling,
• algunas plataformas todavía rechazan .avif,
• gráficos pequeños pueden no superar a SVG, PNG o WebP,
• una mala configuración puede suavizar texturas y texto pequeño.

MDN indica que AVIF puede comprimir algo mejor que WebP, pero no dispone de renderizado progresivo. No existe un porcentaje fijo válido para todos los archivos.

Cuándo implantar AVIF

• cuando las imágenes representan gran parte de la transferencia,
• cuando hay muchas fotos hero o de producto,
• cuando existe una pipeline automatizada,
• cuando los recursos se codifican una vez y se sirven muchas veces,
• cuando importan HDR, gama amplia o mayor profundidad,
• cuando se puede conservar WebP/JPEG como fallback.

5. ¿AVIF siempre es menor que WebP?

No. web.dev lo considera el candidato más eficiente para catálogos fotográficos, con WebP como fallback moderno y JPEG como opción más fiable. El resultado depende de:

• contenido y resolución,
• ruido,
• texto y líneas finas,
• modo con o sin pérdida,
• profundidad y subsampling,
• versión del codificador,
• ajuste de velocidad,
• métrica de calidad.

Compara a calidad visual equivalente, no con el mismo número del control. quality=75 no significa lo mismo en JPEG, WebP y AVIF.

6. Core Web Vitals y LCP

Un formato moderno puede reducir el tiempo de descarga y mejorar la parte de LCP vinculada a transferencia. No soluciona descubrimiento tardío, servidor lento, dimensiones incorrectas o renderizado por JavaScript.

Para una imagen LCP:

• no uses loading="lazy",
• colócala pronto en HTML,
• considera fetchpriority="high",
• define width y height,
• usa srcset y sizes,
• evita redirecciones y dependencias,
• no descargues variantes no utilizadas.

web.dev desaconseja lazy loading en imágenes visibles inicialmente, especialmente candidatas a LCP. fetchpriority="high" puede ayudar a priorizarlas.

Consulta también Auditoría de sitios web en 2026 y Core Web Vitals en la práctica.

7. Implementación correcta con <picture>

<picture>
  <source
    type="image/avif"
    srcset="/images/hero-800.avif 800w,
            /images/hero-1280.avif 1280w,
            /images/hero-1920.avif 1920w"
    sizes="100vw"
  >
  <source
    type="image/webp"
    srcset="/images/hero-800.webp 800w,
            /images/hero-1280.webp 1280w,
            /images/hero-1920.webp 1920w"
    sizes="100vw"
  >
  <img
    src="/images/hero-1280.jpg"
    srcset="/images/hero-800.jpg 800w,
            /images/hero-1280.jpg 1280w,
            /images/hero-1920.jpg 1920w"
    sizes="100vw"
    width="1920"
    height="1080"
    fetchpriority="high"
    alt="Panel de análisis del rendimiento del sitio web"
  >
</picture>

El navegador elige el primer <source> compatible. Por eso AVIF va antes de WebP y <img> aporta el fallback.

Google puede descubrir la imagen en src del elemento <img>, incluso dentro de <picture>. Google Search admite JPEG, PNG, WebP y AVIF.

Para imágenes fuera de pantalla:

<img
  src="/images/example.webp"
  width="960"
  height="640"
  loading="lazy"
  decoding="async"
  alt="Comparación del tamaño de archivos de imagen"
>

No apliques lazy loading automáticamente a hero, producto principal o candidato LCP.

8. Las imágenes responsive importan más que el formato aislado

Convertir una imagen de 2400 × 1600 a AVIF no resuelve el problema si un móvil la muestra a 360 píxeles. Servir la cantidad correcta de píxeles puede ahorrar más que cambiar el códec.

Considera:

• variantes de anchura en srcset,
• sizes correcto,
• recorte móvil específico,
• alta densidad solo donde se aprecia,
• límites de subida en CMS,
• miniaturas reales en lugar de escalar una fuente grande con CSS.

Formato, dimensiones y compresión deben tratarse como un sistema.

9. Cómo comparar calidad

1. Parte del original o de una fuente sin pérdida.
2. Genera varios niveles de calidad.
3. Revisa al tamaño final de presentación.
4. Comprueba rostros, cabello, degradados, texto, bordes y zonas oscuras.
5. Mide coste de codificación y decodificación.
6. Elige el archivo menor con calidad aceptable.
7. Repite con diferentes clases de imagen.

SSIM puede ayudar, pero no sustituye la revisión visual.

10. Errores habituales

Recodificar un JPEG ya muy comprimido

AVIF no recupera detalles perdidos. Usa el original o una fuente sin pérdida.

Un valor de calidad para todo

Retratos, capturas, fotos nocturnas y degradados reaccionan de forma distinta. Usa perfiles o control de calidad.

No definir dimensiones

Sin width y height puede aparecer CLS en cualquier formato.

Lazy loading de la imagen hero

Incluso un AVIF pequeño llegará tarde si se descubre tras el renderizado o recibe loading="lazy".

Generar demasiadas variantes

Muchas anchuras en cuatro formatos aumentan almacenamiento y build. Produce solo lo que realmente se usa.

Usar PNG para toda transparencia

WebP y AVIF también tienen alfa. Conserva PNG cuando dé mejores bordes, un archivo menor o compatibilidad necesaria.

Usar raster para iconos y logos

SVG suele ser más ligero, escalable y editable con estilos.

11. SEO de imágenes

Google Search admite los cuatro formatos. No existe un bonus de ranking documentado por usar .avif o .webp. La mejora es indirecta mediante rendimiento y experiencia.

También revisa:

• URL estable y descriptiva,
• extensión acorde al tipo real,
• MIME correcto,
• texto alternativo útil,
• contexto textual visible,
• acceso para Googlebot,
• dimensiones correctas,
• sitemap de imágenes en sitios visuales,
• metadatos de licencia cuando correspondan.

Usa Estado del sitio web para revisar técnica y velocidad, y Vista previa de Open Graph para las tarjetas sociales.

12. Política recomendada

Opción sencilla

• WebP principal,
• JPEG fallback para fotos,
• PNG para gráficos seleccionados,
• SVG para logo e iconos,
• srcset en imágenes importantes.

Opción óptima

• AVIF primero,
• WebP segundo,
• JPEG fallback,
• WebP/AVIF sin pérdida o PNG para capturas,
• anchuras automáticas,
• presupuesto de calidad y transferencia,
• seguimiento LCP y RUM.

E-commerce

• fotos de producto en AVIF y WebP,
• fallback JPEG,
• variantes grandes y miniaturas separadas,
• zoom después de interacción,
• imagen crítica sin lazy loading,
• revisar textura, color y transparencia,
• caché y CDN de imágenes.

Veredicto

AVIF es la mejor opción cuando la transferencia mínima es prioritaria y existe una buena pipeline. WebP es el mejor formato general por simplicidad, compatibilidad y compresión. JPEG sigue siendo el fallback fotográfico más seguro y PNG debe usarse conscientemente para gráficos sin pérdida y transparencia.

La estrategia recomendada:

AVIF → WebP → JPEG

para fotos y:

AVIF/WebP sin pérdida ↔ PNG

para recursos nítidos o transparentes tras comparar calidad y tamaño.