Las imágenes representan el 50-60% del peso total de la mayoría de sitios web. Optimizar imágenes correctamente puede reducir el tiempo de carga un 50% o más, mejorando directamente tus Core Web Vitals y tu posicionamiento en Google.
¿Por qué importa optimizar imágenes?
Google usa la velocidad de carga como factor de ranking desde 2018. Las métricas Core Web Vitals (LCP, FID, CLS) son directamente afectadas por imágenes pesadas:
- LCP (Largest Contentful Paint): Las imágenes suelen ser el elemento más grande. Optimizarlas mejora el LCP.
- CLS (Cumulative Layout Shift): Imágenes sin dimensiones definidas causan saltos de contenido.
Paso 1: Elegir el formato correcto
Cada formato tiene su caso de uso ideal:
| Formato | Ideal para | Transparencia | Peso |
|---|---|---|---|
| WebP | Web (cualquier imagen) | Sí | Muy bajo |
| JPG | Fotografías | No | Bajo |
| PNG | Logos, gráficos, capturas | Sí | Alto |
| SVG | Iconos, ilustraciones vectoriales | Sí | Muy bajo |
Recomendación: Usa WebP como formato principal. Convierte tus PNGs con nuestra herramienta PNG a WebP.
Paso 2: Redimensionar correctamente
No subas imágenes de 4000px para mostrarlas a 800px. Regla general:
- Imágenes de contenido: máx. 1200px de ancho
- Thumbnails: 300-400px
- Fondos hero: 1920px máximo
Usa nuestra herramienta Redimensionar Imagen para ajustar dimensiones.
Paso 3: Comprimir sin pérdida visible
La compresión reduce el peso del archivo. Hay dos tipos:
- Con pérdida (lossy): Reduce más pero elimina datos. Calidad 75-85% es el sweet spot.
- Sin pérdida (lossless): Reduce menos pero mantiene toda la calidad.
Comprime tus imágenes con Comprimir Imágenes o Optimizar para Web.
Paso 4: Implementar lazy loading
Carga las imágenes solo cuando el usuario se desplaza hasta ellas:
<img src="foto.webp" loading="lazy" alt="Descripción" width="800" height="600">Siempre incluye atributos width y height para evitar CLS.
Paso 5: Usar srcset para responsive
Sirve diferentes tamaños según la pantalla del usuario para no cargar imágenes más grandes de lo necesario.
Herramientas gratuitas para optimizar imágenes
- Comprimir Imágenes - Reduce el peso de JPG y PNG
- Redimensionar Imagen - Cambia dimensiones
- PNG a WebP - Convierte al formato más eficiente
- Optimizar para Web - Todo en uno para web
- Recortar Imagen - Elimina áreas innecesarias
Conclusión
Optimizar imágenes es la mejora de rendimiento más fácil y efectiva que puedes hacer en tu web. Sigue estos 5 pasos y verás mejoras significativas en tu PageSpeed Score y posicionamiento SEO.