Cómo optimizar imágenes web
Reduce el peso de tus imágenes sin sacrificar calidad para mejorar rendimiento y SEO
Las imágenes representan entre el 40% y el 70% del peso total de la mayoría de páginas web. Son el factor de rendimiento con mayor potencial de mejora y, al mismo tiempo, uno de los más descuidados. Una imagen hero de 3 MB sin optimizar puede arruinar el LCP (Largest Contentful Paint) de toda la página.
Esta guía cubre el ecosistema completo de optimización de imágenes: formatos modernos, compresión inteligente, imágenes responsive, lazy loading nativo y distribución mediante CDN. Técnicas que reducen el peso de las imágenes entre un 50% y un 90% sin pérdida de calidad perceptible.
Formatos modernos: WebP y AVIF
JPEG y PNG siguen siendo los formatos más utilizados, pero WebP y AVIF ofrecen compresión significativamente superior con la misma calidad visual. La adopción de estos formatos es el cambio con mayor impacto en el peso de las imágenes.
- WebP: desarrollado por Google, reduce el tamaño un 25-35% vs JPEG con calidad equivalente. Soporte en todos los navegadores modernos (>97% global).
- AVIF: basado en el códec AV1, ofrece un 50% de reducción adicional sobre WebP. Soporte creciente (>92% global), ideal para imágenes fotográficas.
- SVG: formato vectorial ideal para iconos, logos e ilustraciones. Escalable sin pérdida y manipulable con CSS/JavaScript.
- Usa el elemento <picture> con fallbacks: AVIF > WebP > JPEG para máxima compatibilidad.
Compresión inteligente
La compresión reduce el peso del archivo eliminando información redundante. La clave es encontrar el equilibrio entre reducción de peso y calidad visual. Un nivel de calidad de 75-85% en JPEG/WebP es indistinguible del original en la mayoría de casos.
- Sharp (Node.js): la librería de referencia para procesamiento de imágenes en servidor. Usa libvips bajo el hood para rendimiento óptimo.
- Squoosh: herramienta web de Google para comparar formatos y niveles de compresión visualmente.
- ImageOptim (macOS): optimización por lotes de imágenes sin pérdida (lossless).
- TinyPNG/TinyJPG: API y herramienta web para compresión lossy con excelentes resultados.
Imágenes responsive con srcset y sizes
Servir una imagen de 2000 px a un móvil con pantalla de 375 px es un desperdicio de ancho de banda. Las imágenes responsive permiten al navegador elegir el tamaño adecuado para cada dispositivo y resolución de pantalla.
El atributo srcset define las fuentes disponibles con sus anchos, y sizes indica al navegador qué porcentaje del viewport ocupa la imagen. Con esta información, el navegador descarga solo la imagen del tamaño necesario. Frameworks como Next.js (next/image) y Astro (<Image />) generan srcset automáticamente.
Lazy loading nativo
Lazy loading retrasa la carga de imágenes hasta que están a punto de entrar en el viewport del usuario. Esto reduce drásticamente el tiempo de carga inicial y el consumo de datos, especialmente en páginas con muchas imágenes.
El atributo HTML nativo loading="lazy" es soportado por todos los navegadores modernos y no requiere JavaScript. No apliques lazy loading a la imagen LCP (la más grande visible al cargar la página) — esta debe cargarse con prioridad usando fetchpriority="high".
- Usa loading="lazy" para todas las imágenes below the fold
- Usa fetchpriority="high" y loading="eager" para la imagen hero/LCP
- Establece width y height explícitos para evitar layout shifts (CLS)
- Considera decoding="async" para imágenes no críticas: libera el hilo principal durante la decodificación
CDN y servicios de imágenes
Un CDN de imágenes va más allá de la distribución geográfica: transforma, redimensiona y convierte formatos on-the-fly en función del dispositivo y navegador del usuario. Esto elimina la necesidad de generar y almacenar múltiples versiones de cada imagen.
- Cloudinary: transformación, optimización y CDN de imágenes con API completa. Plan gratuito generoso para proyectos pequeños.
- Imgix: transformación en tiempo real con URLs parametrizadas. Rendimiento enterprise.
- Cloudflare Images: almacenamiento y entrega de imágenes con variantes configurables. Integrado con Cloudflare CDN.
- Vercel Image Optimization: optimización automática integrada en el framework Next.js.
SEO y accesibilidad de imágenes
Las imágenes optimizadas contribuyen al SEO de dos formas: mejoran Core Web Vitals (factor de ranking) y aparecen en Google Images (fuente significativa de tráfico para muchos sitios). El texto alternativo (alt) es imprescindible tanto para SEO como para accesibilidad.
Usa nombres de archivo descriptivos (producto-zapatillas-running.webp en lugar de IMG_4532.webp). Implementa datos estructurados para imágenes de productos. Genera sitemaps de imágenes para facilitar la indexación. El texto alt debe describir la imagen de forma útil, no rellenar keywords.
Puntos clave
- WebP reduce el tamaño un 25-35% vs JPEG; AVIF un 50% adicional
- Usa srcset y sizes para servir el tamaño adecuado a cada dispositivo
- Aplica lazy loading nativo (loading="lazy") a todas las imágenes excepto la LCP
- Los CDN de imágenes transforman y optimizan on-the-fly sin mantener múltiples versiones
- El texto alt descriptivo mejora tanto el SEO como la accesibilidad
¿Tus imágenes ralentizan tu web?
Auditamos el rendimiento visual de tu sitio y aplicamos optimización de imágenes que mejora Core Web Vitals de forma inmediata.