Cómo Optimizar Imágenes para tu Sitio Web y Mejorar el PageSpeed

La velocidad de carga es un factor de posicionamiento confirmado por Google desde 2018 para escritorio y desde 2021 para móvil. Más allá de eso, afecta directamente la tasa de conversión: cada segundo adicional de carga aumenta el abandono de la página hasta en un 32%, según datos del propio Google. Y en e-commerce, estudios de Portent muestran que las páginas que cargan en 1 segundo convierten hasta 3 veces más que las páginas que tardan 5 segundos.

Las imágenes suelen ser responsables del 50–80% del peso total de una página web. Optimizarlas correctamente es, por lo tanto, la intervención de mayor impacto en el rendimiento de cualquier sitio.

Qué evalúa PageSpeed Insights en las imágenes

Google PageSpeed Insights (PSI) analiza tu página y señala problemas relacionados con imágenes en varias categorías. Las más comunes son:

• "Sirve imágenes en formatos de próxima generación": aparece cuando el sitio usa JPG o PNG donde WebP (o AVIF) reduciría el tamaño significativamente.
• "Dimensiona las imágenes correctamente": aparece cuando la imagen enviada al servidor es mayor que el espacio donde se muestra. Ejemplo: enviar una foto de 2000px para mostrarla en 400px.
• "Difiere las imágenes fuera de pantalla": aparece cuando las imágenes por debajo del pliegue se cargan junto con el resto de la página, en vez de solo cuando el usuario se desplaza hasta ellas (lazy loading).
• "Codifica las imágenes de forma eficiente": aparece cuando la compresión aplicada a las imágenes aún tiene margen de reducción sin pérdida de calidad perceptible.
• "Imagen LCP": identifica qué imagen es el Largest Contentful Paint de la página — el elemento principal que determina una de las métricas Core Web Vitals.

Los 6 principios de optimización de imágenes para web

1. Usa el formato correcto para cada tipo de imagen

La elección del formato es la decisión de mayor impacto incluso antes de cualquier compresión:

WebP produce archivos 25–35% más pequeños que JPG y 20–30% más pequeños que PNG con calidad visual equivalente. En 2026, la compatibilidad supera el 97% de los navegadores en uso — ya no hay razón técnica para evitarlo en sitios nuevos.

2. Comprime sin renunciar a la calidad visible

La compresión es el proceso de reducir el tamaño del archivo manteniendo las dimensiones de la imagen. Para fotos JPG, reducir la calidad del 100% al 80% produce archivos 5–10 veces más pequeños con una diferencia imperceptible en pantalla. Ese es el rango ideal para la web.

Referencias prácticas de peso por tipo de imagen:

• Hero / banner principal: por debajo de 200 KB
• Foto de producto (e-commerce): 50–150 KB
• Imagen de artículo de blog: 50–120 KB
• Miniatura / thumbnail: 10–30 KB
• Logo (PNG/WebP): por debajo de 30 KB
• Íconos SVG: por debajo de 5 KB

3. Sube imágenes en las dimensiones reales de visualización

Este es el error más común y también uno de los más impactantes: subir imágenes mucho más grandes que el espacio donde se muestran. El navegador descarga la imagen completa y luego descarta los píxeles sobrantes al renderizar.

Ejemplos del costo de este error:

• Una foto de producto de 3000×3000px mostrada en un marco de 600×600px: el navegador descarga 9 millones de píxeles y usa solo 360 mil — 96% de desperdicio.
• Un banner de 4000px de ancho en un sitio con un layout máximo de 1440px: el 63% de los píxeles descargados se descartan de inmediato.

La regla es simple: la imagen enviada al servidor debe tener como máximo el doble de las dimensiones de visualización (el doble para cubrir pantallas Retina/HiDPI). Para un espacio de 600px de ancho, envía como máximo 1200px.

Usa el Redimensionador de Imagen de ImageTools para ajustar las dimensiones antes de subir, ingresando los valores exactos en píxeles o porcentaje.

4. Implementa lazy loading

El lazy loading es la técnica de cargar imágenes solo cuando están a punto de entrar en el área visible de la pantalla, en vez de descargar todas las imágenes de la página de una vez en la carga inicial. El impacto es significativo: en páginas con muchas imágenes (como listados de productos o artículos largos), el lazy loading puede reducir el peso inicial de la página en un 60–80%.

La implementación más simple es nativa en el HTML moderno — basta con agregar el atributo loading="lazy" a las etiquetas de imagen:

<!-- Imagen que debe cargar de inmediato (por encima del pliegue) -->
<img src="banner-principal.webp" alt="Banner" loading="eager">

<!-- Imágenes que pueden esperar (por debajo del pliegue) -->
<img src="producto-1.webp" alt="Producto 1" loading="lazy">
<img src="producto-2.webp" alt="Producto 2" loading="lazy">

Importante: nunca apliques loading="lazy" a la imagen principal por encima del pliegue (hero, banner, primera foto de producto). Esto retrasa el LCP — la métrica más importante de los Core Web Vitals — y perjudica directamente la puntuación en PageSpeed.

5. Define width y height en las etiquetas de imagen

Cuando el navegador empieza a cargar una página, construye el layout antes de conocer el tamaño de las imágenes. Si width y height no están definidos, el navegador no reserva el espacio correcto — y cuando la imagen carga, el layout "salta", desplazando el texto y los botones. Esto es lo que PageSpeed mide como Cumulative Layout Shift (CLS), otro Core Web Vital.

<!-- Sin dimensiones: causa layout shift -->
<img src="producto.webp" alt="Producto">

<!-- Con dimensiones: reserva el espacio correcto desde el inicio -->
<img src="producto.webp" alt="Producto" width="600" height="600">

Los valores de width y height en el HTML no necesitan corresponder al tamaño de visualización visual — solo definen la proporción. El CSS se encarga del tamaño de visualización.

6. Usa imágenes responsivas con srcset

La etiqueta srcset permite ofrecer diferentes versiones de una imagen para distintos dispositivos — enviando una imagen más pequeña para celulares y más grande para escritorio. El navegador elige automáticamente la versión más adecuada para la pantalla del usuario.

<img
  src="producto-800.webp"
  srcset="producto-400.webp 400w,
          producto-800.webp 800w,
          producto-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="Producto"
  width="800"
  height="800"
  loading="lazy"
>

Para e-commerces con muchas fotos de producto, srcset puede reducir el volumen de datos transferidos a usuarios móviles en un 40–60%.

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

Usa esta lista antes de publicar cualquier página o actualizar imágenes existentes:

• ☐ Imágenes en WebP (o SVG para vectoriales)
• ☐ Compresión aplicada — fotos por debajo de 150 KB siempre que sea posible
• ☐ Dimensiones correctas — no mayor que el doble del espacio de visualización
• ☐ loading="lazy" en todas las imágenes por debajo del pliegue
• ☐ loading="eager" (o sin atributo) en la imagen principal por encima del pliegue
• ☐ width y height definidos en todas las etiquetas <img>
• ☐ Atributo alt descriptivo en todas las imágenes (accesibilidad + SEO)
• ☐ srcset para imágenes que aparecen en tamaños muy diferentes entre móvil y escritorio
• ☐ Imagen LCP sin loading="lazy" y con fetchpriority="high" si es posible

Optimización por plataforma

WordPress

WordPress convierte automáticamente a WebP desde la versión 6.1 si el servidor lo soporta. Para asegurarlo: instala un plugin de optimización como Imagify, ShortPixel o Smush — comprimen, convierten a WebP y agregan lazy loading automáticamente a las imágenes ya existentes en la biblioteca de medios.

Shopify

Shopify convierte imágenes a WebP automáticamente y sirve la versión correcta según el dispositivo desde 2021. Lo que el comerciante debe controlar manualmente es el tamaño de las imágenes subidas — se recomienda 2048×2048px para fotos de producto, que Shopify redimensiona para cada contexto de visualización.

Wix, Squarespace y otros constructores

La mayoría de los constructores modernos ya aplican compresión y lazy loading automáticamente. Lo que aún depende del usuario es subir imágenes con dimensiones razonables — subir fotos de cámara de 8 MB sobrecarga el servidor y puede resultar en variantes más grandes de lo necesario.

Sitios HTML/CSS puros o frameworks (Next.js, Nuxt, etc.)

En estos casos, toda la optimización es responsabilidad del desarrollador. El componente <Image> de Next.js, por ejemplo, automatiza el lazy loading, srcset y la conversión a WebP. Para frameworks sin esa abstracción, es necesaria la optimización manual siguiendo la lista de verificación anterior.

Cómo medir el impacto de las optimizaciones

Después de aplicar las optimizaciones, mide el resultado con estas herramientas:

• Google PageSpeed Insights (pagespeed.web.dev) — análisis completo con diagnóstico por elemento, separado para móvil y escritorio.
• Google Search Console → Informe de Experiencia de Página — muestra el estado de los Core Web Vitals con datos reales de los usuarios de tu sitio.
• WebPageTest.org — análisis técnico detallado con waterfall de carga, útil para identificar qué imagen específica está retrasando el LCP.
• Chrome DevTools → Network — filtra por "Img" para ver todas las imágenes cargadas, sus tamaños y tiempos de descarga.

Preguntas frecuentes