Por qué importa la optimización de imágenes
Las imágenes suelen representar 50-80% del tamaño de una página web. Una correcta optimización puede mejorar drásticamente la velocidad de la página, la experiencia del usuario y las clasificaciones SEO. Esta guía cubre todo lo que necesitas saber.
El impacto de las imágenes no optimizadas
Problemas de rendimiento
- Tiempos de carga de página lentos
- Altas tasas de rebote (53% se retiran después de 3 segundos)
- Pobre experiencia móvil
- Costos de ancho de banda incrementados
Consecuencias SEO
- Clasificaciones más bajas en Google
- Fallos en los Core Web Vitals
- Eficiencia de rastreo reducida
- Malas señales de interacción del usuario
Selección de formato de imagen
WebP (Recomendado para Web)
- 30% más pequeño que JPEG a la misma calidad
- Soporta transparencia
- 95%+ de soporte en navegadores
- Mejor opción para la mayoría de las imágenes web
JPEG
- Bueno para fotografías
- Soporte universal
- Sin transparencia
- Opción para navegadores antiguos
PNG
- Calidad sin pérdida
- Soporta transparencia
- Tamaños de archivo más grandes
- Útil para logos, iconos con transparencia
SVG
- Formato vectorial
- Infinitamente escalable
- Tamaño de archivo muy pequeño
- Perfecto para iconos, logos, ilustraciones
AVIF (Emergente)
- 50% más pequeño que JPEG
- Excelente calidad
- Soporte creciente en navegadores (~85%)
- Considerar para mejoras progresivas
Dimensiones óptimas de imagen
La regla
Nunca sirvas imágenes más grandes de lo que se muestran. Si una imagen se muestra a 800px de ancho, no subas una imagen de 3000px.
Tamaños web comunes
| Uso | Ancho recomendado |
|---|---|
| Contenido de blog | 800-1200px |
| Imágenes principales | 1920px máx |
| Miniaturas | 300-400px |
| Imágenes de producto | 800-1000px |
| Compartición en redes sociales | 1200×630px |
Imágenes responsivas
Suministra diferentes tamaños para diferentes dispositivos:
<img srcset="image-400.webp 400w,
image-800.webp 800w,
image-1200.webp 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px"
src="image-800.webp"
alt="Descripción">Guías de compresión
Configuración de calidad por uso
| Tipo de imagen | % de calidad | Ahorro esperado |
|---|---|---|
| Imagen principal/banner | 80-85% | 60-70% |
| Imágenes de contenido | 75-80% | 70-80% |
| Miniaturas | 70-75% | 75-85% |
| Fondo | 60-70% | 80-90% |
Objetivos de tamaño de archivo
- Miniaturas: <50KB
- Imágenes de contenido: <150KB
- Imágenes principales: <300KB
- Total de imágenes de página: <1MB ideal
Técnicas de optimización
1. Elige el formato correcto
- WebP para fotos (con opción a JPEG)
- SVG para iconos y logos
- PNG solo cuando se necesite transparencia
2. Redimensiona antes de subir
- Determina el tamaño de visualización
- Añade un poco de margen (1.5-2x para retina)
- Nunca subas la resolución completa de una cámara
3. Comprime inteligentemente
- Usa calidad 75-85%
- Elimina metadatos
- Habilita la carga progresiva
4. Implementa Lazy Loading
<img src="image.webp" loading="lazy" alt="Descripción">- Difiere imágenes fuera de pantalla
- Mejora el tiempo de carga inicial
- Soporte nativo en navegadores
5. Utiliza CDN
- Entrega desde ubicaciones de borde
- Conversión automática de formato
- Optimización incorporada
- Populares: Cloudflare, Cloudinary, imgix
Optimización SEO
Texto Alt
El texto alt descriptivo es esencial:
<!-- Malo -->
<img alt="IMG_1234.jpg">
<!-- Bueno -->
<img alt="Golden retriever jugando a buscar en un parque soleado">Nombres de archivo
Usa nombres descriptivos y ricos en palabras clave:
- ❌ IMG_1234.jpg
- ✅ golden-retriever-jugando.webp
Sitemap de imágenes
Incluye imágenes en tu sitemap para una mejor indexación:
<image:image>
<image:loc>https://example.com/images/photo.webp</image:loc>
<image:title>Título de la Foto</image:title>
</image:image>Impacto en los Core Web Vitals
LCP (Largest Contentful Paint)
Las imágenes principales a menudo determinan el LCP:
- Optimiza el tamaño de la imagen principal
- Precarga imágenes críticas
- Usa dimensiones apropiadas
<link rel="preload" as="image" href="hero.webp">CLS (Cumulative Layout Shift)
Evita el desplazamiento del diseño con dimensiones:
<img src="image.webp" width="800" height="600" alt="...">O usa la relación de aspecto en CSS.
Lista de verificación para la implementación
Antes de subir
- ☐ Redimensionado a dimensiones apropiadas
- ☐ Comprimido (75-85% de calidad)
- ☐ Convertido a WebP
- ☐ Nombre de archivo descriptivo
- ☐ Bajo el tamaño de archivo objetivo
En HTML
- ☐ Atributos de ancho y alto establecidos
- ☐ Texto alt descriptivo
- ☐ loading="lazy" para imágenes bajo el pliegue
- ☐ Srcset para imágenes responsivas
Servidor/Infraestructura
- ☐ CDN configurado
- ☐ Caché del navegador habilitada
- ☐ Compresión (gzip/brotli) habilitada
- ☐ HTTP/2 para carga paralela
Herramientas para la optimización
Herramientas en línea
- Pixelift Image Compressor: Compresión impulsada por IA
- Squoosh: Herramienta de compresión de Google
- TinyPNG: Compresión PNG/JPEG
Herramientas de construcción
- sharp (Node.js)
- imagemin
- Componente Image de Next.js
Herramientas de prueba
- Google PageSpeed Insights
- Lighthouse
- GTmetrix
- WebPageTest
Errores comunes
Sobrecompresión
Calidad por debajo del 60% a menudo causa artefactos visibles. Equilibra el tamaño y la calidad.
Formato incorrecto
Usar PNG para fotografías o JPEG para gráficos con transparencia.
Ignorar móviles
Servir imágenes de tamaño de escritorio a dispositivos móviles desperdicia ancho de banda.
Sin carga diferida
Cargar todas las imágenes a la vez perjudica la velocidad inicial de la página.
Resumen
Optimización de imágenes web:
- Formato: Usa WebP, SVG para vectores
- Tamaño: Igualar dimensiones de visualización
- Compresión: 75-85% de calidad típicamente
- Carga diferida: Diferir imágenes bajo el pliegue
- SEO: Texto alt, nombres de archivo, sitemaps
- Prueba: Verifica con PageSpeed Insights
La optimización adecuada de imágenes puede reducir el peso de la página en más del 50% y mejorar significativamente el rendimiento y las clasificaciones de tu sitio.