Volver al blog
rendimientoimágenesCSS

Imágenes estiradas y sobredimensionadas: cómo detectarlas rápido

Puedes mirar una imagen estirada cien veces sin verla. Tu cerebro corrige las proporciones por su cuenta. El de tus usuarios también, pero la sensación de “algo no encaja” se queda igual, y las señales de clasificación de Google no corrigen nada.

Los errores de relación de aspecto y los recursos sobredimensionados son dos de los problemas de calidad más ignorados en la web. Sobreviven a la revisión de código no porque sean difíciles de corregir, sino porque son casi invisibles para quien los publicó. Veamos qué buscar y cómo encontrarlo rápido.

Resolución renderizada vs. resolución intrínseca

Cada imagen en una página web tiene dos tamaños:

  • Resolución intrínseca — las dimensiones en píxeles del archivo de imagen (por ejemplo, 1200×800)
  • Resolución renderizada — el tamaño con el que el navegador la pinta en pantalla (por ejemplo, 400×300)

Los dos deberían mantenerse proporcionales. Cuando no lo hacen, tienes uno de dos problemas.

Una imagen estirada es aquella cuyas dimensiones renderizadas distorsionan la relación de aspecto. Toma un archivo de 1200×800 (3:2) y renderízalo a 400×350: la proporción mostrada queda cerca de 8:7, así que todo se aplasta verticalmente y cada rostro o foto de producto se ve sutilmente mal.

Una imagen sobredimensionada es aquella cuyo archivo es mucho más grande que el espacio que ocupa. Sirve una fuente de 2400×1600 para mostrarla a 400×267 y estás enviando aproximadamente 36 veces los píxeles que necesitas (la fuente tiene 6 veces el ancho y 6 veces el alto). En una conexión lenta eso es ancho de banda desperdiciado, un LCP más lento y una peor experiencia en dispositivos móviles, donde más duele.

<!-- Esto se ve bien en el markup... -->
<img src="hero.jpg" alt="Foto del equipo" style="width: 400px; height: 350px;">

<!-- ...pero si hero.jpg es 1200×800, la estiraste Y enviaste ~7x los pixeles que muestras -->

La discrepancia entre el tamaño intrínseco y el renderizado casi nunca es visible en el markup. Hay que medirla en tiempo de ejecución.

Por qué esto perjudica más de lo que parece

Calidad visual

Las imágenes estiradas rompen la confianza implícita que los usuarios depositan en la fotografía. Una foto de equipo donde todos parecen un poco más altos de lo que son transmite descuido, aunque nadie sepa decir exactamente qué está mal. En una página de producto, las proporciones distorsionadas arrastran hacia abajo la calidad percibida, y en la página equivocada eso basta para mellar la conversión.

Core Web Vitals

Las imágenes sobredimensionadas golpean directamente el Largest Contentful Paint (LCP). Si tu imagen hero pesa 3MB y tu presupuesto de LCP es de 2,5 segundos, ese solo recurso se lleva casi todo el presupuesto antes de que cargue cualquier otra cosa. Servir una imagen del tamaño correcto, idealmente como WebP o AVIF, suele ser la corrección de rendimiento de mayor retorno que tiene a mano un sitio de contenido.

El Cumulative Layout Shift (CLS) es el otro, y conviene ser preciso con el mecanismo. El CLS no lo causa la resolución equivocada; lo causan las dimensiones faltantes. Cuando un <img> no tiene atributos width/height ni aspect-ratio en CSS, el navegador no sabe qué altura tendrá la imagen hasta que llegan los bytes, así que no le reserva espacio. En el momento en que carga, todo lo que está debajo se recoloca para hacerle sitio, y ese salto inesperado es lo que mide el CLS. Dale las dimensiones al navegador por adelantado y el hueco queda reservado antes de que la imagen siquiera cargue.

<!-- Bien: dimensiones explícitas evitan el salto de diseño -->
<img src="foto.jpg" alt="..." width="800" height="533">

<!-- También bien: CSS aspect-ratio reserva espacio -->
<img src="foto.jpg" alt="..." style="width: 100%; aspect-ratio: 3/2;">

Diseño móvil y responsive

Un width: 100% en CSS escala una imagen para llenar su contenedor, pero no cambia en nada el archivo que descarga el navegador. En un teléfono de 375px de ancho, una fuente de 2400px de ancho se pinta como una miniatura pequeña en pantalla mientras un archivo de varios megabytes viaja por la red para llegar ahí. srcset y sizes existen justamente para resolver esto, pero no puedes escribir unos buenos sin conocer primero los tamaños renderizados.

Cómo detectar estos problemas manualmente

Cuando reviso una sola página, la consola hace el trabajo:

document.querySelectorAll('img').forEach(img => {
  const ratioMismatch = Math.abs(
    (img.naturalWidth / img.naturalHeight) -
    (img.offsetWidth / img.offsetHeight)
  ) > 0.05;

  if (ratioMismatch) {
    console.warn('Estirada:', img.src, {
      intrínseca: `${img.naturalWidth}×${img.naturalHeight}`,
      renderizada: `${img.offsetWidth}×${img.offsetHeight}`
    });
  }
});

Eso detecta la distorsión de la relación de aspecto, pero no dice nada de las imágenes sobredimensionadas. Para esas, compara naturalWidth contra offsetWidth directamente y marca las discrepancias grandes:

document.querySelectorAll('img').forEach(img => {
  const oversizeFactor = img.naturalWidth / img.offsetWidth;
  if (oversizeFactor > 2) {
    console.warn(`Sobredimensionada (${oversizeFactor.toFixed(1)}×):`, img.src);
  }
});

Pegar esto en la consola en cada página cansa rápido, y las imágenes que más necesitan revisión (heroes, fotos en primer plano, fotos de producto) son justo las que cambian en cada sprint.

La lista de verificación práctica

Al auditar una página para detectar problemas de calidad de imagen, revisa cada imagen para:

  1. Relación de aspecto — ¿coincide la proporción renderizada con la intrínseca? (con una tolerancia de ~5% para pequeños redondeos)
  2. Factor de sobredimensionado — ¿es naturalWidth / offsetWidth mayor que 2? ¿Mayor que 1,5 en un viewport móvil?
  3. Riesgo de CLS — ¿tiene el elemento <img> atributos explícitos width/height, o un aspect-ratio en CSS?
  4. Formato — ¿se sirve la imagen como JPEG/PNG cuando WebP/AVIF ahorraría entre un 30 y un 50% del tamaño del archivo?

Pasa esto por casi cualquier sitio en producción y un puñado de imágenes fallará al menos una verificación. Encontrarlas es lo difícil; las correcciones son en su mayoría mecánicas.

Dónde entra PxGuard

La herramienta de Imágenes y Video de PxGuard está diseñada exactamente para este paso de clasificación. Analiza la página y muestra la resolución renderizada de cada imagen junto a su resolución intrínseca, por lo que la discrepancia es inmediatamente visible — sin scripts en la consola, sin cálculos manuales. Si una imagen se muestra a la mitad de su ancho intrínseco, ves los números y puedes actuar.

Combinado con la visualización de la relación de aspecto, es la forma más rápida que conozco de responder “¿qué imágenes de esta página tienen problemas?” antes de una revisión de rendimiento o un pase de QA.

Cómo corregir imágenes sobredimensionadas

Una vez que sabes qué imágenes son el problema, las correcciones son terreno conocido.

Recurre primero a srcset y sizes. Dejan que el navegador elija un archivo del tamaño adecuado por viewport en lugar de descargar una sola fuente gigante en todos lados:

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  alt="..."
  width="800"
  height="533"
>

Convierte a formatos modernos. WebP ya es seguro en todos lados que importa, y AVIF, que comprime mejor que WebP para la mayoría del contenido, también tiene soporte amplio. Rara vez tienes que hacer esto a mano: un paso de compilación o una CDN de imágenes (Cloudflare Images, Cloudinary, Imgix) convierte y redimensiona sobre la marcha.

Y define aspect-ratio en CSS para el lado de diseño del problema. Reserva el hueco antes de que la imagen cargue, así la caja no se colapsa y te recoloca todo:

.hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Más recursos

Instala PxGuard gratis →

Pruébalo en tus propias páginas

PxGuard es una extensión de Chrome gratuita. Inspecciona espaciado, tipografía y accesibilidad en segundos.

Instalar gratis