Formatos de imagen web: JPEG, PNG, WebP, AVIF, SVG. Guía completa

Por qué importa la elección del formato de imagen

Las imágenes representan entre el 50 y el 70 % del peso total de una página web media. Elegir el formato incorrecto puede inflar innecesariamente tu sitio, degradar la experiencia de usuario y perjudicar tu posicionamiento en los motores de búsqueda.

Desde 2021, Google incorpora los Core Web Vitals en su algoritmo de clasificación. Entre estas métricas, el Largest Contentful Paint (LCP) mide el tiempo que tarda en renderizarse el elemento visible más grande de la página, con frecuencia una imagen. Usar un formato inadecuado puede elevar tu LCP de 1,5 segundos a más de 4 segundos, lo cual es descalificador.

Pero el rendimiento no es la única consideración. Según tu caso de uso, puede que necesites:

• Transparencia para un logotipo colocado sobre un fondo de color o fotográfico.
• Una fotografía de alta calidad sin artefactos de compresión visibles.
• Un gráfico escalable que se mantenga nítido a cualquier resolución de pantalla.
• Máxima compatibilidad con navegadores para audiencias en dispositivos más antiguos.

Esta guía cubre los seis formatos de imagen web esenciales, JPEG, PNG, WebP, AVIF, GIF y SVG, para que puedas tomar la decisión correcta en todo momento.

JPEG: el veterano de la fotografía

El formato JPEG (Joint Photographic Experts Group) fue estandarizado en 1992. A pesar de su antigüedad, sigue siendo uno de los formatos más utilizados en la web, especialmente para fotografías.

Cómo funciona la compresión JPEG

JPEG utiliza compresión con pérdida. El algoritmo analiza la imagen, identifica regiones de color similar y descarta los detalles imperceptibles para el ojo humano. El grado de pérdida se controla mediante un parámetro de calidad (normalmente de 0 a 100).

A calidad 80, una fotografía JPEG suele ser visualmente indistinguible del original, pero pesa entre 5 y 10 veces menos. Por debajo de calidad 50, aparecen artefactos de bloque visibles, especialmente alrededor de los bordes nítidos.

Casos de uso ideales para JPEG

• Fotografías: retratos, paisajes, fotos de productos
• Imágenes con degradados complejos: atardeceres, cielos nublados
• Imágenes que no requieren transparencia
• Máxima compatibilidad: compatible con el 100 % de los navegadores, sistemas y dispositivos

Limitaciones de JPEG

• Sin transparencia: el fondo siempre es opaco
• Sin animación
• Pérdida generacional: cada nuevo guardado amplifica los artefactos
• Inadecuado para texto y gráficos: los bordes nítidos se difuminan

PNG: compresión sin pérdida y transparencia

El formato PNG (Portable Network Graphics) fue creado en 1996 como alternativa libre de patentes al GIF. Ofrece compresión sin pérdida y soporte completo de transparencia, lo que lo convierte en la opción preferida para gráficos web.

PNG-8 vs PNG-24 vs PNG-32

• PNG-8: paleta de hasta 256 colores, archivos muy pequeños, ideal para iconos simples
• PNG-24: 16 millones de colores, sin canal alfa
• PNG-32: 16 millones de colores con transparencia alfa completa

Transparencia alfa: la característica estrella de PNG

La transparencia alfa permite que cada píxel tenga un nivel de opacidad entre 0 (completamente transparente) y 255 (completamente opaco). Esto hace que PNG sea indispensable para:

• Logotipos sobre fondos de color o fotográficos
• Iconos con esquinas redondeadas o sombras
• Elementos gráficos superpuestos
• Capturas de pantalla con áreas transparentes

WebP: el formato moderno de Google

Desarrollado por Google y lanzado en 2010, WebP fue diseñado para reemplazar tanto a JPEG como a PNG en la web. Ofrece una compresión superior tanto en modo con pérdida como sin pérdida, y también admite transparencia y animación.

Ventajas de WebP frente a JPEG y PNG

• 25–35 % más pequeño que JPEG con calidad visual equivalente
• 26 % más pequeño que PNG en modo sin pérdida
• Transparencia alfa con un coste adicional insignificante
• Soporte de animación, mucho más eficiente que GIF
• Compresión con pérdida y sin pérdida en un único formato

Compatibilidad con navegadores en 2026

WebP es ahora compatible con más del 97 % de los navegadores modernos, incluyendo Chrome, Firefox, Safari (desde iOS 14 / macOS Big Sur), Edge y Opera. En 2026, ya no es necesario un fallback JPEG para la mayoría de audiencias.

AVIF: el formato de nueva generación

AVIF (AV1 Image File Format) es el formato de imagen web más reciente. Basado en el códec de vídeo AV1 desarrollado por la Alliance for Open Media, lleva la eficiencia de compresión incluso más allá que WebP.

Rendimiento de compresión

• 45–55 % más pequeño que JPEG con calidad visual equivalente
• 20–30 % más pequeño que WebP en la mayoría de los casos
• Soporte nativo para HDR y gama de colores amplia (Display P3, Rec. 2020)
• Excelente representación de degradados y detalles finos sin artefactos de bloque JPEG

Compatibilidad con navegadores en 2026

AVIF es compatible con Chrome (v85+), Firefox (v93+), Safari (v16.4+), Edge (v121+) y Samsung Internet, cubriendo aproximadamente el 93 % de los navegadores activos. Se recomienda un fallback WebP o JPEG para el 5–7 % restante.

GIF: el legado de la animación

El formato GIF (Graphics Interchange Format) data de 1987. Su paleta está limitada a 256 colores por fotograma y no tiene compresión entre fotogramas, lo que significa que cada fotograma se almacena casi de forma independiente. Una animación de 3 segundos a 24 fps almacena 72 fotogramas completos.

A pesar de ser técnicamente obsoleto, GIF persiste porque es el único formato animado universalmente compatible con clientes de correo electrónico (Outlook en particular no reproduce vídeo HTML5). En la web, los GIF animados deberían reemplazarse por WebP animado o un elemento HTML <video> con MP4/WebM, típicamente de 5 a 10 veces más pequeños para el mismo contenido visual.

SVG: gráficos vectoriales para la web

SVG (Scalable Vector Graphics) es fundamentalmente diferente de los demás formatos. Mientras que JPEG, PNG, WebP y AVIF son formatos ráster (cuadrículas de píxeles), SVG describe formas geométricas en XML. El resultado: una imagen SVG es perfectamente nítida a cualquier tamaño, desde un favicon de 16×16 hasta una pantalla 4K.

Ventajas de SVG

• Escalabilidad infinita: perfectamente nítido a cualquier resolución sin aumento del tamaño del archivo
• Extremadamente ligero para gráficos simples (logotipos, iconos): a menudo solo unos pocos cientos de bytes
• Estilizable con CSS: cambia los colores de los iconos sin tocar el archivo
• Animable con CSS o SMIL
• Accesible: el texto dentro de SVG es legible por los motores de búsqueda y los lectores de pantalla

Limitaciones de SVG

• Inadecuado para fotografías: las imágenes ráster complejas producen archivos SVG enormes
• Riesgo de seguridad XSS si el SVG proviene de una fuente no confiable (puede contener etiquetas de script), nunca incrustes SVG subido por usuarios sin desinfectarlo antes

Tabla de comparación completa

Esta tabla resume las características clave de cada formato para ayudarte a decidir rápidamente.

¿Qué formato debo usar? Un árbol de decisión

¿Tu imagen es vectorial (logotipo, icono, diagrama)?

→ Usa SVG. Sin debate.

¿Tu imagen es una fotografía o una imagen compleja con muchos colores?

• Si el objetivo es el máximo rendimiento: AVIF (con fallback WebP mediante <picture>)
• Si quieres simplicidad y amplia compatibilidad: WebP
• Si necesitas compatibilidad universal: JPEG

¿Tu imagen requiere transparencia?

• Prefiere WebP o AVIF para mayor rendimiento
• Usa PNG si se requiere máxima compatibilidad
• Nunca uses JPEG, no admite transparencia

¿Tu imagen es una captura de pantalla o contiene texto?

→ Usa PNG o WebP sin pérdida. La compresión con pérdida difumina los bordes nítidos, dificultando la lectura del texto.

¿Recibes fotos HEIC de un iPhone?

→ Conviértelas a JPEG o WebP antes de publicarlas en la web. Ningún navegador muestra HEIC de forma nativa.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descripción de la imagen" width="800" height="600">
</picture>

Herramientas para convertir entre formatos

Herramientas en línea

• imgpact: conversión y optimización de imágenes rápida directamente en el navegador, sin necesidad de instalación. Compatible con JPEG, PNG, WebP, AVIF y SVG.
• Squoosh (Google): herramienta en línea de código abierto para comparar visualmente formatos y ajustes de compresión en paralelo.
• Cloudinary: solución en la nube para la gestión automatizada de imágenes y la conversión de formatos al vuelo en producción.

Herramientas de línea de comandos

• ImageMagick: la referencia de código abierto para la conversión y manipulación de imágenes por lotes.
• cwebp / dwebp: las herramientas oficiales de Google para codificar y decodificar archivos WebP.
• avifenc / avifdec: codificador y decodificador AVIF de línea de comandos.
• Sharp (Node.js): librería de alto rendimiento para la transformación de imágenes en pipelines de producción.

Integraciones con CMS

• WordPress: plugins como Imagify, ShortPixel o WebP Express para conversión automática
• Shopify: conversión automática a WebP para todas las imágenes de la tienda
• Next.js / Nuxt: componente Image integrado con optimización automática y conversión de formatos