Formatos de imagen explicados: JPEG, PNG, WebP, GIF, SVG, AVIF

Última actualización: June 27, 2026

No hay un único mejor formato de imagen; cada uno existe porque resuelve un problema diferente. JPEG comprime fotografías, PNG preserva bordes nítidos y transparencia, WebP y AVIF reducen las fotos aún más, SVG escala sin píxeles, y GIF anima. Elegir el correcto es una decisión de contenido, no una preferencia. Esta guía cubre lo que hace cada formato, con tamaños de archivo reales medidos a partir de una imagen fuente.

Respuesta rápida: ¿qué formato debo usar?

Empareja el formato con el contenido de la imagen y dónde se mostrará:

Para el desglose detallado de formato versus formato, consulta la comparación AVIF vs WebP vs JPEG.

¿Cómo se comparan los formatos?

Las diferencias de tamaño de archivo son grandes y consistentes. Medido en una fotografía de 1400×933:

Los 853 KB de PNG destacan: el almacenamiento sin pérdida de calidad (lossless) de una fotografía cuesta aproximadamente 8× más que JPEG y 19× más que AVIF. Por eso PNG es incorrecto para fotos de página completa aunque técnicamente sea capaz de almacenarlas.

JPEG — el caballo de batalla fotográfico

JPEG (1992) es el formato con pérdida de calidad (lossy) para fotografías. Elimina detalles de alta frecuencia que el ojo apenas ve, razón por la cual reduce drásticamente las fotos pero desenfoca texto nítido y líneas delgadas.

• Mejor para: fotografías, gradientes, escenas complejas del mundo real.
• Evitar para: texto, capturas de pantalla de UI, arte lineal nítido, cualquier cosa que necesite transparencia (JPEG no tiene canal alfa).
• Cuidado con: artefactos visibles de bloqueo 8×8 por debajo de la calidad ~70.

Utiliza una calidad de 80–85 para fotos web. Consulta cómo comprimir JPEG.

PNG — bordes nítidos y transparencia

PNG es sin pérdida de calidad (lossless) y admite un canal alfa completo, por lo que preserva cada píxel y cualquier transparencia. El costo es el tamaño del archivo: no comprime bien las fotografías.

• Mejor para: gráficos con bordes nítidos, texto, logos, capturas de pantalla de UI, imágenes transparentes.
• Evitar para: fotografías de página completa (usa WebP/AVIF/JPEG en su lugar — consulta la tabla anterior).
• Cuidado con: archivos enormes en fotografías. Reduce con PNG-8 (≤256 colores) para gráficos planos.

Para detalles sobre transparencia, consulta cómo hacer imágenes transparentes.

WebP — el valor predeterminado web moderno

WebP (2010) hace tanto pérdida de calidad como sin pérdida de calidad, admite alfa y supera a JPEG en un ~25–35% con calidad igualada. El soporte de navegadores modernos es de ~98%.

• Mejor para: fotografías web e imágenes web transparentes donde importan los bytes.
• Evitar para: email y clientes muy antiguos (usa fallback JPEG/PNG).
• Sirve con: un fallback JPEG/PNG en un elemento <picture>.

AVIF — las fotos más pequeñas

AVIF (2019) utiliza herramientas intraframe del códec de video AV1 y supera a WebP en otro 20–30%. El soporte es de ~96% y está creciendo.

• Mejor para: fotografías donde importan los bytes más pequeños (imágenes hero, LCP).
• Evitar para: cuando no puedes permitirte una codificación lenta, o para los navegadores muy antiguos (usa el fallback <picture>).
• Cuidado con: el desenfoque de texturas finas a calidad muy baja (<q40).

SVG — vectores que escalan

SVG es un formato vectorial: almacena formas, no píxeles, por lo que escala a cualquier tamaño sin perder nitidez y es diminuto para arte simple.

• Mejor para: logos, iconos, ilustraciones simples, cualquier cosa que deba escalar.
• Evitar para: fotografías (SVG no puede representarlas eficientemente).
• Cuidado con: la complejidad: un SVG detallado puede ser grande; rasteriza si es necesario.

GIF — legado de animación

GIF anima y admite transparencia de 1 bit, pero está limitado a 256 colores y es mucho más grande que los formatos animados modernos para el mismo contenido.

• Mejor para: nada moderno — reemplázalo con WebP o AVIF animados.
• Evitar para: cualquier cosa crítica en color (límite de 256 colores) o sensible al tamaño.
• Cuidado con: archivos grandes; un GIF de 3 segundos a menudo es más grande que el MP4 del mismo clip.

¿Cómo elegir bajo presión?

Usa este breve flujo de decisión:

1. ¿Es una fotografía? → WebP/AVIF (con fallback JPEG).
2. ¿Necesita transparencia? → PNG o WebP (alfa).
3. ¿Es un logo/icono/ilustración que escala? → SVG.
4. ¿Es texto/UI nítido? → PNG.
5. ¿Es una animación? → WebP/AVIF animados, no GIF.
6. ¿Es para email? → JPEG o PNG (sin WebP/AVIF).

Para casi cualquier fotografía web la respuesta es ahora "WebP o AVIF con un fallback JPEG". JPEG solo permanece debido a la compatibilidad universal, no porque sea la mejor opción.

¿Cómo servir múltiples formatos?

Usa el elemento <picture> para que cada navegador obtenga el mejor formato que soporte:

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

El navegador elige el primer tipo que admite e ignora el resto. Mantén siempre un <img> real con un src JPEG como fallback final. Consulta la guía de formatos de imagen en MDN para la tabla actual de soporte por navegador.

Errores comunes

• Usar PNG para fotografías. Funciona, pero el archivo es 8–19× más grande de lo necesario.
• Usar JPEG para texto o logos. La compresión desenfoca los bordes nítidos. Usa PNG o SVG.
• Servir un formato sin fallback. AVIF/WebP necesitan un fallback JPEG para clientes antiguos.
• Animar con GIF. WebP/AVIF animados son mucho más pequeños y admiten más colores.
• Ignorar SVG para logos. Un logo rasterizado está borroso en alta DPI; SVG se mantiene nítido a cualquier tamaño.

Preguntas frecuentes

¿Qué formato de imagen debo usar?

JPEG para fotografías, PNG para gráficos con bordes nítidos o transparencia, WebP como el valor predeterminado web moderno (más pequeño que ambos), AVIF para las fotos más pequeñas en navegadores modernos, y SVG para logos e iconos. Empareja el formato con el contenido.

¿Es WebP mejor que JPEG?

Para la entrega web, sí: WebP es un 25 a 35 por ciento más pequeño con calidad igual y está soportado en todos los navegadores actuales. Mantén JPEG solo como fallback para navegadores muy antiguos. Consulta la guía del convertidor WebP.

¿Cuándo debo usar AVIF?

Cuando puedes codificarlo y tu audiencia está compuesta principalmente por navegadores modernos: AVIF es aproximadamente un 50 por ciento más pequeño que JPEG. La contrapartida es una codificación más lenta y lagunas en navegadores más antiguos. Envía AVIF con un fallback WebP a través de un elemento <picture>.

¿Soporta PNG la transparencia?

Sí: PNG tiene un canal alfa completo, razón por la cual es el formato para gráficos y logos con transparencia. JPEG no admite transparencia. WebP y AVIF también admiten alfa, en tamaños más pequeños para entrega web.

¿Qué formato es más pequeño para fotos?

AVIF (el más pequeño en navegadores modernos), luego WebP, luego JPEG. PNG es el más grande para fotos porque es lossless. Para la entrega web, WebP es el valor predeterminado seguro; AVIF cuando puedes codificarlo y tu audiencia está en navegadores modernos.

¿Cuál es el formato de imagen más pequeño?

AVIF para fotos en navegadores modernos (aproximadamente un 50 por ciento más pequeño que JPEG), luego WebP. PNG es el más grande para fotos porque es lossless. Para gráficos con transparencia, WebP o AVIF superan a PNG. Empareja el formato con el contenido y el soporte de navegador de tu audiencia.

¿Cuál es la diferencia entre lossy y lossless?

Lossless (PNG, WebP sin pérdida) preserva cada píxel exactamente e invierte perfectamente: no se pierde calidad. Lossy (JPEG, WebP con pérdida, AVIF) descarta detalles que el ojo nota menos para reducir el archivo, y la pérdida es permanente. Lossy gana en tamaño para fotos; lossless gana en calidad para gráficos, texto y maestros que vas a editar de nuevo. Elige por contenido.

¿Cuál es el formato más pequeño para gráficos con transparencia?

WebP o AVIF, ambos admiten un canal alfa y comprimen mucho más pequeño que PNG. Para logos e iconos en navegadores modernos, WebP o AVIF reducen drásticamente el tamaño del archivo comparado con PNG mientras mantienen la transparencia. Sirvelos con un fallback PNG a través de un elemento <picture> para navegadores más antiguos que carezcan de soporte.

Créditos de imagen

• Comparación del tamaño de formato y gráfico de barras — generado por el autor a partir de una fotografía estilo comercio electrónico (Pexels #16675632, foto de Mikael Blomkvist) para mostrar tamaños de archivo reales medidos en PNG, JPEG, WebP y AVIF.