Optimización de Imágenes para la Velocidad de tu Sitio Web: Guía Completa

Las imágenes representan casi la mitad del peso total de una página web promedio. Las imágenes mal optimizadas son una de las causas más comunes de sitios lentos.

---

Por Qué Importa la Optimización de Imágenes

Impacto en la Experiencia del Usuario

• El 53% de los usuarios móviles abandona un sitio que tarda más de 3 segundos en cargar (Google)
• Un retraso de 1 segundo puede reducir las conversiones en un 7% (Akamai)
• El 47% de los consumidores espera que las páginas carguen en 2 segundos o menos

Impacto en el SEO

Los Core Web Vitals — LCP, CLS e INP — forman parte del algoritmo de ranking de Google. Las imágenes grandes y sin optimizar afectan directamente el LCP y el CLS.

Impacto en los Costos

Las imágenes sin optimizar incrementan los costos de ancho de banda, CDN y almacenamiento.

---

Paso 1: Elige el Formato Correcto

JPEG / JPG

• Compresión con pérdida, ideal para fotografías
• Soporte universal en todos los navegadores

PNG

• Compresión sin pérdida, ideal para capturas de pantalla, logotipos y transparencias
• Soporte universal en todos los navegadores

WebP

• Con y sin pérdida, ideal para prácticamente todas las imágenes web
• 25–35% más liviano que JPEG y 26% más liviano que PNG
• Compatible con todos los navegadores modernos

AVIF

• Formato de nueva generación, incluso mejor que WebP
• Úsalo con un fallback a WebP/JPEG

SVG

• Formato vectorial, perfecto para iconos y logotipos

---

Paso 2: Comprime tus Imágenes

Usa TinyImg — todo el procesamiento ocurre en tu navegador y las imágenes se mantienen privadas.

---

Paso 3: Sirve Imágenes Responsivas

<img
  src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Texto alternativo descriptivo"
  width="800"
  height="600"
/>

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Texto alternativo descriptivo" width="800" height="600" />
</picture>

---

Paso 4: Implementa Lazy Loading

<img src="image.webp" alt="Descripción" loading="lazy" width="800" height="600" />

NO apliques lazy loading a las imágenes que están en la parte visible de la página sin hacer scroll. Incluye siempre los atributos width y height para evitar el CLS.

---

Paso 5: Define las Dimensiones Correctas de las Imágenes

<!-- Correcto -->
<img src="photo.webp" alt="Foto" width="800" height="600" />

<!-- Incorrecto: genera cambios de layout -->
<img src="photo.webp" alt="Foto" />

img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

---

Paso 6: Usa un CDN

• Cloudflare — plan gratuito con optimización de imágenes
• Cloudinary — transformación de imágenes y CDN
• imgix — procesamiento y entrega en tiempo real
• Vercel — optimización integrada para Next.js

---

Paso 7: Audita y Mide

Herramientas: PageSpeed Insights, Lighthouse, WebPageTest, Chrome DevTools.

---

Lista de Verificación de Optimización Rápida

• Elegir el formato correcto (WebP para fotos, PNG para transparencias, SVG para iconos)
• Comprimir todas las imágenes (TinyImg)
• Servir imágenes responsivas con srcset y sizes
• Aplicar lazy loading a las imágenes fuera de la vista inicial
• Definir width y height en todos los elementos <img>
• Usar un CDN
• Auditar con PageSpeed Insights

---

Conclusión

Empieza comprimiendo tus imágenes con TinyImg — gratuito, rápido y todo se procesa localmente. Tus usuarios (y Google) te lo van a agradecer.