Optimización de imágenes para la velocidad web: Guía completa

Por qué las imágenes son el mayor problema de rendimiento

Según datos del HTTP Archive de 2026, las imágenes representan aproximadamente el 50% de los bytes totales transferidos en una página web promedio. La página mediana envía 2.8 MB en imágenes. Para sitios con muchas imágenes (e-commerce, portafolios, medios), esta cifra puede superar los 10 MB.

La velocidad de página impacta directamente en los resultados de negocio:

Tasas de conversión — Walmart descubrió que cada segundo de mejora en tiempo de carga aumentaba las conversiones un 2%.
Tasas de rebote — Google reporta que al pasar de 1s a 3s de carga, la probabilidad de rebote aumenta un 32%. De 1s a 5s, aumenta un 90%.
Rankings SEO — Las Core Web Vitals de Google (LCP, FID/INP, CLS) son señales de ranking. Las imágenes sin optimizar afectan directamente el LCP.
Accesibilidad — Usuarios con conexiones lentas o datos limitados se ven desproporcionadamente afectados.

Core Web Vitals e imágenes

Largest Contentful Paint (LCP)

LCP mide cuánto tarda en renderizarse el elemento visible más grande — normalmente una imagen. Google lo considera "bueno" si es inferior a 2.5 segundos.

Para mejorar el LCP:

Comprime la imagen LCP de forma agresiva.
Precarga la imagen LCP con <link rel="preload" as="image" href="hero.webp">.
No uses carga diferida en la imagen LCP — debe cargarse inmediatamente.
Usa un CDN para reducir latencia.
Sirve el tamaño correcto — no envíes una imagen de 3000 px para un contenedor de 1200 px.

Cumulative Layout Shift (CLS)

CLS mide la estabilidad visual. Imágenes sin atributos width y height causan desplazamientos de diseño porque el navegador no sabe cuánto espacio reservar.

<!-- Malo: causa desplazamiento -->
<img src="photo.webp" alt="Product">

<!-- Bueno: el navegador reserva espacio -->
<img src="photo.webp" alt="Product" width="800" height="600">

<!-- También bueno: CSS aspect-ratio -->
<img src="photo.webp" alt="Product" style="aspect-ratio: 4/3; width: 100%;">

Elegir el formato correcto

Árbol de decisión práctico para 2026:

¿Es una foto o imagen compleja? → WebP (con pérdida) o AVIF para máximo ahorro.
¿Es un gráfico simple, logo o icono? → SVG si es posible. Si debe ser raster, WebP (sin pérdida).
¿Necesita transparencia? → WebP o AVIF (no JPEG). Para vectores, SVG.
¿Es una animación? → WebP animado o un vídeo corto (<video> con MP4/WebM suele ser más eficiente).

Convierte tus imágenes a WebP a calidad 75–80 usando Deflato o herramientas similares.

Compresión: encontrar el punto óptimo

La relación entre calidad y tamaño es no lineal — bajar de calidad 95 a 80 puede reducir un 60%, mientras que de 80 a 65 ahorra solo un 20% adicional.

Caso de uso	Formato	Calidad	Ahorro esperado
Banners principales	WebP o AVIF	80–85	50–70%
Imágenes de blog	WebP	75–80	60–75%
Miniaturas de productos	WebP	70–75	70–80%
Imágenes de fondo	WebP o AVIF	60–70	75–85%
Contenido subido por usuarios	WebP	75	60–75%

Deflato muestra una vista previa en tiempo real al ajustar el control de calidad.

Imágenes responsivas

Servir una imagen de 2400 px a todos los dispositivos desperdicia ancho de banda en móviles:

<img
  srcset="photo-400.webp 400w,
          photo-800.webp 800w,
          photo-1200.webp 1200w,
          photo-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  src="photo-800.webp"
  alt="Product photo"
  width="1600"
  height="1200"
  loading="lazy"
>

Generar múltiples tamaños es tedioso manualmente. Usa herramientas de build (como Sharp en Node.js), plugins de CMS o la API de Deflato para generar variantes automáticamente.

Carga diferida (Lazy Loading)

La carga diferida posterga la descarga de imágenes fuera de pantalla hasta que el usuario se desplaza cerca de ellas:

<img src="photo.webp" alt="Description" loading="lazy" width="800" height="600">

Reglas clave:

NO uses carga diferida en la imagen LCP — Debe cargarse inmediatamente. Usa loading="eager" u omite el atributo.
Siempre establece width y height para evitar desplazamientos de diseño (CLS).
Usa fetchpriority="high" en la imagen LCP para priorizar su carga.

<!-- Imagen hero: carga inmediata con alta prioridad -->
<img src="hero.webp" alt="Hero" fetchpriority="high" width="1600" height="600">

<!-- Imágenes debajo del pliegue: carga diferida -->
<img src="photo-2.webp" alt="Photo 2" loading="lazy" width="800" height="600">
<img src="photo-3.webp" alt="Photo 3" loading="lazy" width="800" height="600">

CDN para entrega de imágenes

Un CDN sirve imágenes desde servidores edge cercanos al usuario, reduciendo latencia 50–200 ms por solicitud. Muchos CDN ofrecen optimización de imágenes al vuelo:

Negociación automática de formato — Detecta formatos soportados y sirve AVIF, WebP o JPEG según corresponda.
Redimensionado dinámico — Solicita un tamaño específico vía parámetros URL.
Optimización de calidad — Algunos CDN ajustan la calidad según la velocidad de conexión.

CDN populares con optimización de imágenes: Cloudflare Images, Bunny Optimizer, Imgix, Cloudinary y Fastly Image Optimizer.

Automatización y pipelines de build

La optimización manual no escala. Integra la optimización en tu proceso de build:

Generadores de sitios estáticos — Usa plugins como @astrojs/image (Astro), next/image (Next.js) o gatsby-plugin-image (Gatsby).
Subidas a CMS — Conecta tu pipeline de subida a la API de Deflato via webhook o middleware.
CI/CD — Añade un paso de optimización antes del despliegue.

# Ejemplo: comprimir imágenes en /public antes del despliegue
for f in public/images/*.{jpg,png}; do
  curl -s -X POST https://deflato.com/api/v1/compress     -H "Authorization: Bearer $DEFLATO_API_KEY"     -F "file=@$f"     -F "output_format=WEBP"     -F "quality=80"     --output "${f%.*}.webp"
done

Lista de verificación de optimización de imágenes

Usa WebP o AVIF como formato predeterminado (con fallback JPEG si es necesario).
Comprime fotos a calidad 75–80.
Redimensiona al tamaño real de visualización.
Genera variantes responsivas (srcset).
Establece width y height en cada <img>.
Usa carga diferida (loading="lazy") en imágenes fuera del viewport.
Precarga y prioriza la imagen LCP.
Elimina metadatos innecesarios (EXIF, perfiles ICC).
Usa un CDN para entrega global.
Automatiza la optimización en tu pipeline de build o subida.

Conclusión

La optimización de imágenes no es una tarea puntual — es una disciplina continua. Las herramientas y técnicas están bien establecidas: formatos modernos, compresión sensata, tamaños responsivos, carga diferida y entrega por CDN. Combinadas, pueden reducir el peso de las imágenes entre un 80–95% y recortar segundos del tiempo de carga. Deflato maneja la compresión y conversión de formato, mientras que las funcionalidades de frameworks y CDN se encargan de la entrega.