Elegir un formato de imagen solía ser sencillo: JPEG para fotos, PNG para gráficos y listo. Hoy el panorama es más matizado, y también más gratificante. Los formatos modernos como WebP y AVIF pueden reducir el peso de una imagen a la mitad o más sin ninguna pérdida de calidad visible, lo que mejora directamente la velocidad de la página, el rendimiento en buscadores y la experiencia de quienes navegan con una conexión lenta.
Esta guía explica cómo funciona en realidad cada formato de imagen web importante, cuándo conviene cada uno y cómo elegir con confianza. Está pensada para cualquiera que publique imágenes en la web (desarrolladores, diseñadores, especialistas en marketing y propietarios de tiendas) y se centra en decisiones prácticas más que en teoría.
Empieza con dos preguntas
Casi toda decisión sobre el formato se reduce a dos propiedades de tu imagen.
**¿Es una fotografía o un gráfico?** Las fotografías (tonos continuos, degradados, bordes suaves) se comprimen bien con formatos *con pérdida* que descartan detalles que el ojo apenas percibe. Los gráficos con bordes nítidos, color plano y texto (logotipos, iconos, capturas de pantalla, gráficas) necesitan compresión *sin pérdida* o un formato vectorial para mantenerse definidos.
**¿Necesitas transparencia o animación?** Un logotipo colocado sobre fondos diferentes necesita un canal alpha. Un clip corto en bucle necesita compatibilidad con animación. Estos requisitos descartan o habilitan formatos antes incluso de que el tamaño del archivo entre en la conversación.
Ten presentes esas dos respuestas mientras repasamos los formatos.
Los formatos de imagen web de un vistazo
| Formato | Compresión | Transparencia | Animación | Compatibilidad con navegadores | Ideal para |
|---|---|---|---|---|---|
| JPEG (JPG) | Con pérdida | No | No | Universal | Fotografías donde importa la compatibilidad |
| PNG | Sin pérdida | Sí (alpha) | No | Universal | Logotipos, iconos, capturas de pantalla, gráficos planos |
| WebP | Con y sin pérdida | Sí (alpha) | Sí | Todos los navegadores modernos | Una opción moderna por defecto para fotos y gráficos |
| AVIF | Con y sin pérdida | Sí (alpha) | Sí | La mayoría de los navegadores modernos | Máxima eficiencia para fotos e imágenes principales |
| SVG | Vectorial (sin pérdida) | Sí | Sí | Universal | Logotipos, iconos e ilustraciones que deben escalar |
| GIF | Sin pérdida, 256 colores | 1 bit | Sí | Universal | Animaciones simples heredadas |
JPEG (JPG): el formato fotográfico universal
JPEG ha sido el formato fotográfico por defecto durante tres décadas, y su mayor fortaleza es la compatibilidad universal. Todos los navegadores, sistemas operativos, cámaras y herramientas de edición lo leen sin problemas.
JPEG utiliza compresión con pérdida: descarta el detalle de alta frecuencia al que la visión humana es menos sensible y almacena el resto de forma compacta. Con ajustes de calidad alta la pérdida es invisible; lleva la compresión demasiado lejos y obtendrás artefactos cuadriculados y halos alrededor de los bordes.
Sus limitaciones importan tanto como su alcance. JPEG no admite transparencia, por lo que cualquier área transparente se convierte en un fondo sólido, y tiene dificultades con los bordes nítidos y el texto. Usa JPEG cuando una fotografía deba abrirse en cualquier sitio sin riesgo de compatibilidad. Si tienes gráficos o necesitas transparencia, mejor convierte JPG a PNG.
PNG: cuando necesitas transparencia o detalle perfecto al píxel
PNG es sin pérdida: reproduce cada píxel exactamente como se guardó, sin artefactos de compresión. Eso lo convierte en la herramienta adecuada para logotipos, iconos, capturas de pantalla, diagramas y cualquier gráfico con bordes nítidos o grandes áreas de color plano. También admite transparencia alpha completa, por lo que las imágenes se asientan limpiamente sobre cualquier fondo.
La contrapartida es el tamaño del archivo. Para las fotografías, un PNG puede ser varias veces más grande que un JPEG equivalente de alta calidad. La regla práctica es sencilla: PNG para gráficos y transparencia, no para fotos. Cuando un PNG fotográfico ralentiza una página, convierte PNG a JPG o, mejor aún para la web, convierte PNG a WebP. Para profundizar, consulta JPG vs PNG.
WebP: la opción moderna práctica por defecto
WebP, desarrollado por Google, es el formato al que la mayoría de los sitios deberían recurrir primero hoy en día. Admite compresión con y sin pérdida, transparencia alpha completa y animación, cubriendo casi todos los casos de uso en un solo formato. Google indica que las imágenes WebP con pérdida suelen ser entre un 25 y un 34 por ciento más pequeñas que los JPEG comparables, y que el WebP sin pérdida suele ser alrededor de un 26 por ciento más pequeño que el PNG.
La compatibilidad ya no es un obstáculo: WebP funciona en todos los navegadores principales actuales, incluido Safari desde la versión 14. Para la inmensa mayoría de las audiencias puedes servir WebP directamente, y por eso es una opción por defecto sensata tanto para fotos como para gráficos. Para adoptarlo, convierte JPG a WebP o convierte PNG a WebP. Para una explicación más completa, lee Qué es WebP.
AVIF: el más eficiente, con algunas contrapartidas
AVIF es el formato más reciente de uso generalizado, construido sobre el códec de vídeo AV1 de la Alliance for Open Media. Es el campeón de la eficiencia: con una calidad visual comparable, los archivos AVIF suelen tener alrededor de la mitad del tamaño de un JPEG y son notablemente más pequeños que un WebP. Además, gestiona el alto rango dinámico (HDR), las gamas de color amplias, la transparencia y la animación.
Hay dos contrapartidas prácticas. La codificación es más lenta y exigente que la de JPEG o WebP, lo que importa con lotes grandes. Y aunque la compatibilidad ya es amplia (Chrome, Firefox, Edge y Safari 16.4 y posteriores), sigue ligeramente por detrás de WebP, así que conviene contar con una alternativa de respaldo. AVIF brilla en imágenes principales grandes y en páginas con muchas fotos, donde cada kilobyte cuenta. Pruébalo convirtiendo JPG a AVIF o PNG a AVIF, y consulta Qué es AVIF para más detalles.
SVG: para todo lo que deba escalar
SVG es fundamentalmente diferente: es un formato vectorial que describe formas con matemáticas en lugar de una cuadrícula de píxeles. Un SVG se mantiene perfectamente nítido a cualquier tamaño, desde un favicon hasta una valla publicitaria, sin dejar de ser diminuto para gráficos sencillos. Es la elección correcta para logotipos, iconos e ilustraciones formados por formas sólidas y líneas.
SVG no es adecuado para fotografías, que no tienen una geometría limpia que describir. Pero para iconos de interfaz y recursos de marca, nada iguala su escalabilidad y nitidez. Más información en Qué es un archivo SVG.
Un marco de decisión sencillo
Cuando tengas dudas, repasa estos puntos en orden:
- **¿Es un logotipo, un icono o una ilustración plana?** Usa SVG.
- **¿Es un gráfico o una captura de pantalla, o necesita transparencia o bordes perfectos al píxel?** Usa PNG, o WebP sin pérdida para archivos más pequeños.
- **¿Es una fotografía para una audiencia moderna?** Usa AVIF para el menor tamaño y WebP para el mejor equilibrio entre tamaño y alcance.
- **¿Necesita abrirse literalmente en cualquier sitio, incluido software antiguo?** Usa JPEG.
- **¿Está animada?** Usa WebP o, mejor aún, un formato de vídeo real como MP4, y no GIF.
Cómo servir formatos modernos de forma segura
No tienes que elegir un único formato para todo el mundo. El elemento picture de HTML permite que el navegador elija el mejor formato que admita: indica AVIF primero, luego WebP y después un respaldo en JPEG o PNG, y cada visitante descarga un solo archivo. Los navegadores modernos reciben la versión eficiente y los antiguos obtienen un respaldo garantizado, sin necesidad de JavaScript.
Esto importa más allá de la estética. Las imágenes suelen ser la parte más pesada de una página, por lo que la elección del formato tiene un efecto directo sobre el Largest Contentful Paint, una de las Core Web Vitals de Google, y, por tanto, tanto sobre la experiencia del usuario como sobre el rendimiento en buscadores. Las imágenes más pequeñas y bien elegidas son una de las mejoras de velocidad de mayor impacto disponibles.
Cómo convertir tus imágenes existentes
Rara vez necesitas volver a exportar desde cero. Para modernizar una biblioteca existente, convierte sobre la marcha: JPG a WebP, PNG a WebP, JPG a AVIF o PNG a JPG para obtener la máxima compatibilidad. Conserva tus originales maestros de alta calidad y genera formatos modernos a partir de ellos cuando los necesites.