La web tiene más formatos de imagen que nunca, y eso es una buena noticia. Cada uno está pensado para un trabajo distinto, y elegir bien puede hacer tus páginas mucho más ligeras sin que nadie lo note. Esta es la referencia práctica de los siete formatos que importan en 2026: JPG, PNG, WebP, AVIF, SVG, GIF y HEIC.
JPG / JPEG — El estándar para fotos
Lanzado en 1992, sigue siendo el formato universal para fotografías. Compresión con pérdida, color de 24 bits, sin transparencia. Soporte 100 % en navegadores. Para imágenes de tono continuo (fotos, degradados) sigue siendo excelente, aunque WebP y AVIF ya lo superan en tamaño con la misma calidad.
Úsalo cuando: necesitas máxima compatibilidad, envías fotos por correo o exportas desde una cámara. Evítalo para: logos, capturas, bordes nítidos o cuando necesitas transparencia.
Lee también: JPG vs PNG: ¿Qué formato usar?
PNG — Sin pérdida y con transparencia
Creado en 1996 para reemplazar a GIF. Compresión sin pérdida, transparencia con canal alfa, perfecto para gráficos. La contra es el tamaño: una foto en PNG suele pesar mucho más que la misma foto en JPG.
Úsalo cuando: necesitas transparencia, guardas logos o iconos, haces capturas o trabajas con gráficos nítidos. Evítalo para: fotos en sitios en producción — convierte primero a WebP.
WebP — El estándar moderno pragmático
Desarrollado por Google y estable desde 2010, es el formato que debería mover la mayoría de imágenes web en 2026. Soporta compresión con y sin pérdida, transparencia y animación. Suele pesar bastante menos que PNG y alrededor de un 25 % menos que JPG con la misma calidad. Soporte de navegadores 97 %+.
Úsalo cuando: publicas en la web. Es la opción más segura como formato único en 2026. Evítalo para: adjuntos de email (algunos clientes aún fallan) y masters de archivo.
Lee también: PNG vs WebP: por qué WebP es el futuro
AVIF — Campeón del ancho de banda
Basado en el códec de vídeo AV1, es el más pequeño de los formatos modernos. Suele superar a WebP por más de un 20 % al mismo nivel de calidad, soporta HDR y gama amplia, transparencia y animación. Soporte de navegadores 95 %+ desde 2025. Pega: la codificación es más lenta y no todas las herramientas de edición lo soportan aún.
Úsalo cuando: el ancho de banda importa (móvil, sitios con muchas imágenes). Sirve AVIF primero, WebP segundo, JPG/PNG al final con <picture>. Evítalo para: flujos internos que aún no lo adoptaron.
SVG — Vectorial, resolución infinita
SVG es distinto: es XML que describe formas, no una rejilla de píxeles. Logos, iconos, gráficos e ilustraciones se ven nítidos a cualquier zoom. Bien hecho pesa muy poco. Se puede estilar con CSS y animar con JS.
Úsalo cuando: tienes logos, iconos, infografías o cualquier ilustración plana. Pásalos siempre por un optimizador SVG antes de publicar. Evítalo para: fotografías (son píxeles, no vectores).
GIF — Animaciones legacy
GIF es de 1987. Soporta animación, pero es ineficiente: paleta de 256 colores, archivos grandes, sin audio real. En 2026 casi siempre conviene servir MP4, WebP animado o AVIF animado.
Úsalo cuando: la plataforma destino (algunas apps de chat) sólo acepta GIF. Evítalo para: casi todo en un sitio moderno bajo tu control.
Lee también: GIF vs MP4: ¿Cuál usar?
HEIC / HEIF — El formato del iPhone
Lo usa el iPhone por defecto desde iOS 11. Pesa la mitad que un JPG equivalente y soporta HDR y Live Photos. Lado malo: soporte limitado en navegadores y herramientas de escritorio.
Úsalo cuando: capturas con iPhone y guardas en iCloud. Evítalo para: publicar en la web. Convierte a JPG o WebP con nuestra herramienta HEIC → JPG.
Casos de uso lado a lado
- Foto hero en una landing → AVIF + WebP + JPG fallback en
<picture> - Logo en el header → SVG (PNG fallback si no queda otra)
- Captura de UI en docs → WebP sin pérdida (o PNG si necesitas máxima compatibilidad)
- Foto de producto en e-commerce → AVIF + WebP, con lazy load
- Demo animada → MP4 (autoplay, muted, loop) — nunca GIF
- Firma de email → JPG (compatibilidad universal) o PNG con transparencia
- Master de fotógrafo → RAW original + copia JPG. PNG sólo para gráficos.
El patrón moderno con picture
El elemento <picture> es tu aliado. Sirve formatos modernos a navegadores modernos y degrada con elegancia:
<picture>
<source srcset="/photo.avif" type="image/avif">
<source srcset="/photo.webp" type="image/webp">
<img src="/24picture/photo.jpg" alt="..." width="1600" height="1067" loading="lazy" decoding="async">
</picture>El navegador recorre la lista y usa el primer formato que entiende. El <img> final es el fallback universal.
Matriz rápida de decisión
- Foto, web → AVIF (con WebP/JPG fallback)
- Foto, archivo → JPG alta calidad
- Logo / icono / ilustración → SVG
- Captura UI → WebP sin pérdida o PNG
- Imagen transparente, web → WebP
- Animación → MP4 (o WebP animado)
- Captura iPhone → HEIC, convertir a WebP/JPG para web
Las herramientas que vas a usar
- JPG → PNG para añadir transparencia
- PNG → WebP para enviar gráficos
- HEIC → JPG para fotos de iPhone
- Compresor para cualquier formato
- Optimizador SVG para logos e iconos
- Conversión por lotes para carpetas enteras
Consejo: estandariza un formato de producción por tipo de activo. Fotos → AVIF/WebP. Gráficos → SVG o WebP sin pérdida. Animaciones → MP4. Lo demás es fallback o caso límite.
Conclusión
Los formatos no son una religión: son una caja de herramientas. JPG y PNG cargan con el pasado, WebP y AVIF cargan con el presente, SVG cubre todo lo geométrico y GIF es casi historia. Elige bien y tus páginas serán rápidas, tus visuales se verán nítidos y tu factura de ancho de banda bajará.
