Diagnóstico y rendimiento

Por qué tus imágenes ralentizan tu sitio web (y cómo solucionarlo)

Comprimiste tus imágenes. Tu sitio web sigue siendo lento. Esta guía identifica las 4 causas distintas, no siempre las que piensas, y proporciona el orden de tratamiento preciso para resolver el problema sin empezar de nuevo.

10 min de lectura

Las 4 causas reales de que una imagen ralentice tu sitio

Cuando PageSpeed Insights reporta un problema de imagen, identifica una o más de estas cuatro causas. Pueden coexistir, y frecuentemente, lo hacen.

1. Peso excesivo. Un JPEG de 1,5 MB en una hoja de producto es 8 a 10 veces lo que la página necesita. El navegador lo descarga completamente antes de mostrar.

2. Formato equivocado. PNG en una foto a color es el formato menos adecuado. PNG está diseñado para ilustraciones con colores planos y transparencia, no fotografías. Un JPEG bien comprimido o WebP se verá igual con 60 a 80% menos peso, dependiendo del contenido.

3. Dimensiones demasiado grandes. Una imagen de 3.000 × 2.000 px mostrada en una columna de 600 px de ancho. El navegador descarga todos los 6 megapíxeles, luego reduce la visualización a 600 px. La resolución excesiva es inútil, y pesa.

4. Lazy loading ausente. Todas las imágenes de la página se cargan a la vez en primer acceso, incluyendo las que están 3 desplazamientos debajo del pliegue. El atributo loading="lazy" lo arregla: las imágenes fuera de pantalla solo se cargan cuando están a punto de ser visibles.

Peso o resolución: ¿qué error causa más daño?

Las guías comunes enfatizan compresión. En la práctica, la resolución excesiva frecuentemente crea más peso que la compresión pobre.

Ejemplo concreto: una foto de producto de 4.096 × 2.731 px (salida típica de iPhone 15 Pro) pesa 4-6 MB en JPEG de calidad original. Redimensionada a 800 × 534 px (tamaño de visualización real en la mayoría de columnas de contenido), cae a 60-90 KB antes de cualquier compresión agresiva. Comprimir el archivo original al 40% de calidad podría darte 800 KB. Redimensionar primero te da 80 KB con calidad idéntica en pantalla.

La proporción es 1 a 10. La resolución gana.

Impacto directo en LCP

LCP (Largest Contentful Paint) mide el tiempo necesario para mostrar el elemento más grande visible sin desplazamiento. En la gran mayoría de páginas, ese elemento es una imagen: el héroe, foto de portada, o primera imagen de artículo.

Google considera un LCP por debajo de 2,5 segundos satisfactorio. Entre 2,5 y 4 segundos, hay margen de mejora. Más allá de 4 segundos, es una penalización de señal de clasificación.

Una imagen LCP mal optimizada frecuentemente combina todos los 4 problemas a la vez: demasiado grande, formato equivocado, demasiado pesada, y a veces lazy-cargada por error. Arreglar uno sin los otros mejora la puntuación, pero no lo suficiente.

Comprimir vs redimensionar: qué orden y por qué

El orden no es trivial. Comprimir una imagen de 4.000 px de ancho significa trabajar con mucho más datos que lo necesario. El resultado será peor para el mismo nivel de calidad.

Qué formato elegir para tu caso

La elección de formato es el segundo apalancamiento de optimización después de la resolución. En la práctica, tres formatos cubren el 95% de las necesidades web.

WebP es la opción correcta por defecto. Soporte de 97% de navegadores, compresión eficiente, transparencia soportada. AVIF es técnicamente superior, pero la codificación es más lenta y la ganancia real depende del contenido. En algunos contextos, la sobrecarga de codificación puede exceder el beneficio.

Lazy loading e imágenes responsivas: lo que muchos olvidan

Dos atributos HTML cambian radicalmente el comportamiento de carga de imágenes. No necesitan herramientas externas, solo una adición de código.

loading="lazy": le dice al navegador que cargue la imagen solo cuando entra en la ventana gráfica. Úsalo en todas las imágenes debajo del pliegue. Nunca lo uses en la imagen héroe o imagen LCP.

srcset y sizes: sirven múltiples versiones de imagen por resolución de pantalla. Un visitante móvil obtiene 480 px. Un visitante de escritorio obtiene 1.200 px. El ancho de banda se usa eficientemente en ambos casos.

<img
  src="image-800.webp"
  srcset="image-480.webp 480w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1024px) 800px, 1200px"
  loading="lazy"
  width="800"
  height="534"
  alt="Descripción de imagen"
/>

Los atributos width y height también merecen mención. Su ausencia causa CLS (Cumulative Layout Shift) visible como “saltos” de página durante carga. Indicar dimensiones por adelantado reserva espacio y elimina este problema.

Diagnóstico: mide impacto de imagen con PageSpeed

Antes de arreglar algo, mide. Google PageSpeed Insights es gratuito y accesible desde cualquier navegador. Identifica precisamente imágenes problemáticas, su peso actual, y ganancia estimada después de optimización.

Tres secciones a priorizar en el reporte:

“Properly size images”: lista imágenes cuyas dimensiones exceden visualización real. Redimensionar lo arregla.

“Serve images in next-gen formats”: lista imágenes no convertidas a WebP o AVIF. Se muestra ganancia estimada en Ko directamente.

“Defer offscreen images”: lista imágenes sin loading="lazy" debajo del pliegue.

Chrome DevTools va más lejos: la pestaña Network con filtro “Img” muestra el peso actual y tiempo de carga de cada imagen. La pestaña Performance identifica la imagen LCP y su tiempo de render preciso.

Comprime y convierte imágenes directamente en tu navegador: usa Impmage, procesamiento 100% local, sin datos enviados →

GlitchGhost

Desarrollador independiente, creador de Impmage

Desarrollador independiente especializado en herramientas de rendimiento web y optimización de imágenes.

Desarrollador webEspecialista en rendimientoCreador de Impmage