Guía de referencia

WebP, AVIF, JPEG, PNG: la guía completa de formatos de imagen 2026

No hay un formato de imagen mejor. Hay formatos adecuados para usos específicos. Confundir los dos cuesta peso, calidad o compatibilidad, a veces los tres a la vez.

11 min de lectura WebP, AVIF, JPEG, PNG: guía de formatos 2026

En résumé

En 2026, WebP es el formato versátil recomendado: 25 a 35% más ligero que JPEG, soporte universal, transparencia incluida. AVIF ofrece 20 a 50% ganancia adicional pero implica decodificación más lenta en dispositivos antiguos. JPEG sigue siendo el valor seguro para archivos. PNG se impone siempre que transparencia sin pérdida sea necesaria.

97 %

Soporte de navegador WebP

Can I Use, mayo 2026

~94 %

Soporte de navegador AVIF

Can I Use, mayo 2026

25–35 %

Ganancia promedio WebP vs JPEG

Google Developers: Estudio WebP

20–50 %

Ganancia AVIF vs WebP por contenido

Benchmarks AOM / estudios independientes 2023-2024

Por qué el formato realmente marca diferencia

Una foto JPEG 200 KB puede descender a 130 KB en WebP y 90 KB en AVIF. Mismo contenido visual, misma percepción de calidad para el ojo: tres pesos muy diferentes por códec utilizado.

Déf

Códec

Algoritmo de codificación y decodificación para archivo de imagen (o video). El códec determina cómo se comprimen datos de píxeles, con o sin pérdida de información. JPEG, WebP y AVIF usan códecs diferentes: por eso producen resultados diferentes en el mismo contenido.

Aussi appelé : formato de codificación, algoritmo de compresión

La elección de formato impacta tres cosas concretas:

Peso de página. Una página con 20 imágenes JPEG promedio de 200 KB representa 4 MB de transferencia. Las mismas imágenes en AVIF pueden descender por debajo de 2 MB. En móvil 4G, eso es la diferencia entre una página cargando en 2 segundos y una en 5.

LCP. Largest Contentful Paint está directamente atado al peso de imagen principal. Google lo mide, los motores de búsqueda lo contabilizan. Cortar una imagen hero de 300 KB a 150 KB mejora mecánicamente esta puntuación.

Calidad percibida. Reducir peso no necesariamente degrada la imagen, siempre que elijas el códec correcto para el contenido correcto. Un algoritmo de compresión adecuado al contenido preserva detalles mejor que reducción de calidad cruda.

JPEG: ¿aún relevante en 2026?

JPEG tiene 30 años. Es el formato que hizo las fotos digitales compartibles en la era del módem 56K. Su lógica central no ha cambiado: comprimir una foto eliminando detalles que el ojo percibe menos.

Qué JPEG hace bien

100% de compatibilidad de navegador. Cada herramienta, CMS, plataforma social, cámara lo lee sin excepción. Un archivo JPEG compartido en WhatsApp, publicado en WordPress o importado en Photoshop nunca planteará problema de compatibilidad.

Los codificadores JPEG modernos (mozjpeg, libjpeg-turbo) mejoran además la compresión sobre el codificador original. En la práctica, un JPEG recodificado con mozjpeg a calidad 80 es a menudo 20 a 30% más ligero que un JPEG estándar a calidad 80, sin diferencia visible.

Qué JPEG no hace

Sin canal alfa. Cualquier imagen con transparencia exportada como JPEG verá transparencia reemplazada por fondo blanco (o negro, según la herramienta). Este es el límite principal.

Sin animación nativa. Y cuando se empuja compresión, aparecen artefactos de bloqueo: esas zonas pixeladas alrededor de bordes que señalan compresión excesivamente agresiva.

¿Cuándo usar JPEG en 2026?

Cuando compatibilidad absoluta toma prioridad y conversión automática no está disponible. Para archivos de fotos. Para exportaciones de cámaras digitales que aún no han adoptado otro formato. Para CMS que aún no tienen pipeline de conversión WebP/AVIF.

PNG: cuándo la calidad incompromiso prevalece

PNG comprime sin pérdida. Cada píxel decodificado es idéntico al original, ninguna información se pierde durante codificación. No es una ventaja universal: es una ventaja precisa para casos de uso precisos.

Qué PNG hace bien

Transparencia perfecta vía canal alfa de 8 bits. Logos en fondo coloreado, iconos en fondo variable, imágenes con bordes suaves: PNG es el formato nativo para estos usos. La transparencia se codifica píxel por píxel, sin artefacto de compresión.

Texto y gráficos. Capturas de pantalla, diagramas, ilustraciones vectoriales rasterizadas mantienen contornos nítidos. JPEG sistémicamente borra bordes rectos.

Sin pérdida para originales. Cuando una imagen sirve como fuente de trabajo (para ser retocada, recortada, re-exportada) PNG preserva toda información.

Qué PNG no hace

Las fotos en PNG son pesadas. Una foto de 3 megapíxeles en PNG puede exceder 5 MB. PNG no está diseñado para compresión de fotos: es un formato sin pérdida, no un formato ligero para imágenes fotográficas.

¿Cuándo usar PNG en 2026?

Logos, iconos, ilustraciones con transparencia. Capturas de pantalla. Imágenes de origen guardadas para procesamiento posterior. Cualquier contenido donde la precisión de píxel importa más que el peso.

WebP: el formato versátil web moderno

Google publicó WebP en 2010. Tomó una década para ser universalmente adoptado, Safari solo añadió soporte en 2020. Hoy, el soporte excede 97% de navegadores. Es el único formato moderno que combina compresión con pérdida, sin pérdida, transparencia alfa y animación en un contenedor.

Qué WebP hace bien

En modo con pérdida, WebP es 25 a 35% más ligero que JPEG con calidad percibida equivalente. Para una foto, eso es significativo. Para un portafolio de 50 imágenes, eso es reducción de tamaño de página visible en métricas de Core Web Vitals.

En modo sin pérdida, WebP promedios 26% más ligero que PNG per estudio comparativo de Google Developers. Transparencia preservada, peso reducido.

La versatilidad es real: un formato único puede reemplazar JPEG y PNG en la mayoría de casos de uso web.

Qué WebP no hace perfectamente

La decodificación WebP consume ligeramente más CPU que JPEG en algunos dispositivos antiguos. La diferencia es marginal en hardware reciente.

En el lado del navegador, iPhones antiguos bajo iOS 13 o Android muy antiguo no soportan WebP. En la práctica, estos dispositivos representan menos del 5% del tráfico web global en 2026.

¿Cuándo usar WebP en 2026?

Para casi todas las imágenes web destinadas a navegadores modernos. Fotos, ilustraciones, imágenes de producto, capturas: WebP es la opción predeterminada cuando compatibilidad máxima y peso reducido son ambos prioridades.

AVIF: el retador que cumple sus promesas

AVIF se basa en el códec AV1, desarrollado por la Alliance for Open Media (Google, Mozilla, Microsoft, Netflix, Apple entre otros). Donde WebP es evolución de VP8, AVIF usa tecnología de compresión de siguiente generación.

Qué AVIF hace mejor que WebP

La compresión es superior. En fotos, AVIF produce archivos 20 a 50% más ligeros que WebP con calidad visual comparable. La diferencia es más notable en imágenes complejas con muchos detalles o degradados.

AVIF soporta HDR (High Dynamic Range) y espacios de color extendidos (P3, Rec. 2020). Para imágenes de alta fidelidad destinadas a pantallas modernas, eso es una ventaja que WebP no puede igualar.

Qué AVIF aún no hace perfectamente

La decodificación es más lenta. En dispositivos antiguos sin decodificación AV1 por hardware, renderizar una página con muchas imágenes AVIF puede ser más lento que con WebP. La decodificación AVIF por CPU es significativamente más costosa que WebP sin aceleración de hardware, la diferencia es medible en dispositivos pre-2020.

La compatibilidad de navegador está en ~94% vs 97% para WebP. Safari añadió soporte en iOS 16 y macOS Ventura, aún representando flota significativa de dispositivos Apple antiguos fuera de alcance.

La codificación es lenta. Generar un archivo AVIF toma 5 a 10 veces más que WebP con calidad equivalente. Para pipeline de build Astro o conversión on-the-fly de CDN, ese es un costo a anticipar.

¿Cuándo usar AVIF en 2026?

Para imágenes hero y LCP críticas, donde ganancia de peso justifica tiempo de codificación. Para sitios dirigidos a dispositivos recientes (smartphones 2021+, computadoras 2020+). Como complemento a WebP vía elemento HTML <picture> con respaldo.

WebP vs AVIF: ¿cuál elegir?

WebP vs AVIF

★ Recommandé

WebP

8.8/10

+Soporte universal: 97% de navegadores
+Codificación rápida
+Versátil: con pérdida, sin pérdida, transparencia, animación
+Bajo costo de CPU en decodificación
−Compresión menos eficiente que AVIF en fotos complejas
−Sin soporte nativo HDR

La opción segura para todos los proyectos web en 2026.

AVIF

9.2/10

+Compresión superior: 20 a 50% más que WebP
+Soporte HDR y espacios de color extendidos
+Mejor calidad a bitrate muy bajo
−Soporte en ~94%: respaldo aconsejado para ~6% de navegadores
−Codificación lenta
−Decodificación más costosa en dispositivos antiguos

Mejor opción técnica: respaldo obligatorio de WebP.

La estrategia práctica para 2026: servir AVIF a navegadores compatibles, respaldo WebP, JPEG como último recurso. El elemento <picture> maneja esta cascada nativamente:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descripción de imagen" loading="lazy">
</picture>

En el lado del navegador, cada cliente automáticamente elige el mejor formato que soporta. Sin lógica JavaScript necesaria.

JPEG XL: un formato para vigilar

JPEG XL en 2026: prometedor pero aún no para producción

JPEG XL (.extensión jxl) ofrece rendimiento de compresión excepcional (mejor calidad que AVIF en cierto contenido) y soporta conversión sin pérdida desde JPEG sin pérdida de calidad. Chrome removió su soporte experimental en 2022, luego lo reintrodujo tras flag en 2024. Safari ha soportado JPEG XL desde Safari 17. Firefox desde versión 128.

En la práctica, el soporte global permanece alrededor del 25% en 2026, Chrome aún no soporta JPEG XL nativamente, excluyendo aproximadamente 65% del tráfico de navegador. Para proyectos de producción, JPEG XL aún requiere respaldo. Vale la pena vigilar para 2027.

Tabla de decisión por caso de uso

¿Qué formato para tu caso de uso?

Formato	Foto/toma	Ilustración	Transparencia	Animación	Soporte navegador	Recomendado para
JPEG	✅ Nativo	⚠️ Artefactos	❌ No	❌ No	100 %	Archivos, CMS heredado, exportaciones de cámara
PNG	❌ Demasiado pesado	✅ Perfecto	✅ Alfa	❌ No	100 %	Logos, iconos, capturas, imágenes de origen
WebP	✅ Excelente	✅ Muy bueno	✅ Alfa	✅ Sí	97 %	Todas las imágenes web: opción predeterminada
AVIF	✅ Compresión máxima	✅ Excelente	✅ Alfa	✅ Sí	~94 %	Imágenes LCP críticas, sitios con dispositivos recientes
GIF	❌ No recomendado	⚠️ Limitado	⚠️ 1 bit	✅ Nativo	100 %	Animaciones simples heredadas: prefiere WebP/AVIF animado
SVG	❌ N/A	✅ Vector	✅ Nativo	✅ CSS/SMIL	99 %	Logos, iconos, gráficos escalables

Datos mayo 2026, soporte de navegador: caniuse.com

❌ Idée reçue

WebP es siempre mejor que JPEG.

✅ Réalité

WebP es mejor en compresión, no necesariamente en resultado final. Un JPEG recodificado con mozjpeg puede igualar un WebP ingenuamente codificado. El códec importa tanto como el formato, y la calidad del codificador a menudo importa más que la elección de formato.

Source : Mozilla Engineering Blog — codificador mozjpeg / Kornel Lesiński, 2023

Cómo convertir tus imágenes

La conversión manual imagen por imagen no es escalable. Enfoques concretos:

En pipeline de build (Astro, Next.js, Nuxt)

Astro maneja conversión automática vía @astrojs/image o componente nativo <Image /> desde Astro 3. Establecer format: "avif" con respaldo format: "webp" es suficiente para la mayoría de proyectos estáticos. La conversión ocurre en generación — sin costo de servidor en producción.

Vía CDN con transformación on-the-fly

Cloudflare Images, Cloudinary e imgix automáticamente sirven el formato óptimo per Accept header del navegador. La URL de origen permanece una sola imagen; el CDN maneja formato por cliente. Adecuado para sitios con muchas imágenes subidas dinámicamente.

Vía herramientas locales

Squoosh (navegador, 100% local) compara visualmente formatos antes de exportar. Sharp (Node.js) e ImageMagick (CLI) procesan lotes de imágenes en masa. En la práctica, para un proyecto Astro estático, estas herramientas raramente se necesitan — el pipeline de build lo maneja.

Convierte una imagen directamente sin instalación: usa Impmage: 100% local, ningún dato enviado

Preguntas frecuentes

¿Cuál es el mejor formato de imagen para la web en 2026? ▾

WebP es el predeterminado: 97% de soporte, 25 a 35% más ligero que JPEG, transparencia incluida. Para las imágenes más críticas (LCP, hero), AVIF ofrece 20 a 50% ganancia adicional — con respaldo obligatorio de WebP vía elemento <picture>. No hay formato universalmente óptimo: la opción correcta depende del tipo de imagen, audiencia objetivo, y pipeline disponible.

¿WebP realmente reemplaza JPEG y PNG? ▾

Sí, para casi todos los usos web. WebP cubre fotos (compresión con pérdida), ilustraciones y logos (compresión sin pérdida), e imágenes con transparencia (canal alfa). La única excepción: soporte en dispositivos muy antiguos o CMS que no manejan WebP — en esos casos, respaldo JPEG o PNG sigue siendo necesario.

¿Es AVIF mejor que WebP? ▾

Técnicamente sí, en términos de compresión: AVIF produce archivos 20 a 50% más ligeros que WebP con calidad visualmente comparable dependiendo del tipo de contenido. Pero el soporte de navegador es ~94% vs 97% para WebP, y la decodificación es más costosa en CPU en dispositivos antiguos. La estrategia recomendada es servir AVIF a navegadores compatibles y respaldo WebP — no elegir uno u otro.

¿Qué formato para una imagen con transparencia? ▾

PNG para transparencia sin pérdida (logos, iconos, capturas con fondo transparente). WebP o AVIF para compresión con transparencia — el canal alfa es soportado en ambos formatos y permite archivos mucho más ligeros que PNG en imágenes complejas. JPEG no soporta transparencia.

¿Soportan todos los navegadores AVIF en 2026? ▾

La mayoría, pero no todos. Chrome (desde v85), Firefox (v93+), Edge y Safari (desde iOS 16 / macOS Ventura) soportan AVIF. Los dispositivos Apple antiguos bajo iOS 15 o anteriormente no lo hacen. La cuota de mercado de estos dispositivos está declinando pero sigue siendo significativa por audiencia. Se recomienda fuertemente respaldo de WebP vía <picture>.

¿Está listo JPEG XL para producción en 2026? ▾

Aún no para despliegue sin respaldo. El soporte global permanece alrededor del 25% en 2026 — Chrome aún no soporta JPEG XL nativamente, excluyendo la mayoría del tráfico de navegador. Para proyectos de producción, AVIF o WebP permanecen como opciones confiables. JPEG XL vale la pena vigilar para su rendimiento y transición lossless de JPEG.

¿Qué formato de imagen es el más ligero? ▾

AVIF es generalmente el más ligero para fotos con calidad percibida equivalente. Para imágenes con trazos nítidos y colores sólidos (logos, iconos, ilustraciones), SVG es imbatible porque es vectorial y escalable sin aumento de peso. Para casos intermedios (capturas, ilustraciones rasterizadas), WebP sin pérdida a menudo es más ligero que PNG.

¿Cómo convierto fácilmente imágenes a WebP o AVIF? ▾

Varios enfoques dependiendo del contexto: Squoosh (en línea, 100% local en navegador) para conversiones manuales con vista previa de calidad. Componente <Image /> de Astro para pipeline de build automático. Cloudflare Images o Cloudinary para conversión on-the-fly de CDN. Línea de comando: Sharp (Node.js) o ImageMagick para conversiones en masa.