La optimización del rendimiento web es un esfuerzo integral que va más allá de agregar unas pocas líneas de código o aumentar la tasa de compresión de las imágenes; busca garantizar una experiencia agradable para el usuario en todas las etapas de la percepción e interacción con el sitio web. En este viaje, hay una simple propiedad HTML que los desarrolladores a menudo pasan por alto, pero cuyo impacto es inimaginable: la declaración de las propiedades <img> width y height. Veamos en detalle cómo estas propiedades juegan un papel crucial en la mejora del rendimiento web, especialmente en los indicadores de Core Web Vitals como LCP (Largest Contentful Paint) y CLS (Cumulative Layout Shift).

Core Web Vitals: Nuevos estándares para medir la experiencia del usuario

Los Core Web Vitals introducidos por Google son un conjunto de indicadores clave que miden la calidad de la experiencia del usuario en un sitio web. Estos indicadores también impactan en el ranking de los motores de búsqueda, por lo que los desarrolladores deben comprenderlos y optimizarlos.

  • LCP (Largest Contentful Paint): Un indicador que mide el rendimiento de carga de la página. Representa el tiempo en que se renderiza el elemento de contenido más grande en la ventana gráfica. Este elemento suele ser el contenido principal de la página (por ejemplo, una imagen hero, un bloque de texto grande, un póster de video, etc.) y cuanto más rápido sea el LCP, más rápido sentirá el usuario que la página se carga. El objetivo es que sea dentro de 2.5 segundos.

  • CLS (Cumulative Layout Shift): Un indicador que mide la estabilidad visual de la página. Representa la suma total de los cambios de diseño inesperados que ocurren. Un ejemplo representativo es cuando una imagen se carga repentinamente, desplazando el texto o los botones circundantes, lo que puede causar errores de clic o confusión al usuario. El objetivo es que sea inferior a 0.1.

  • FID (First Input Delay): Un indicador que mide la interactividad de la página. Mide el tiempo que tarda el navegador en responder a la primera interacción del usuario con la página (clic en un botón, toque en un enlace, etc.). El objetivo es que sea inferior a 100 ms.

Entre estos, las propiedades width y height influyen directamente en LCP y CLS.

width y height: Problemas al no especificar estas propiedades

Si no se especifican las propiedades width y height en la etiqueta de imagen, el navegador no puede saber el espacio que ocupará la imagen hasta que la descargue. Esto provoca los siguientes problemas:

  1. Retraso en el LCP: El navegador debe descargar y analizar la imagen para conocer su tamaño. Esto bloquea el hilo principal y retrasa el cálculo del diseño de la página, lo que finalmente aumenta el LCP, y el contenido que el usuario considera más importante aparece tarde.

  2. Ocurre CLS (cambio de diseño): A medida que la imagen se carga tarde, el navegador comienza a reservar espacio para la imagen. En este proceso, el espacio vacío donde estaba la imagen se llena repentinamente, provocando un 'cambio de diseño' que desplaza hacia abajo todos los contenidos circundantes, como texto, botones y otras imágenes. Esto puede perjudicar la experiencia del usuario de manera grave y provocar clics no intencionados. Por ejemplo, si estás leyendo un artículo y la imagen se carga repentinamente, el desplazamiento puede hacer que pierdas el hilo o que, al intentar presionar un botón, un elemento inesperado aparezca y hagas clic en algo incorrecto.

width y height: El mágico efecto de declarar estas propiedades

Es muy simple declarar las propiedades width y height en la etiqueta <img>, pero esto trae un cambio fundamental en la forma en que el navegador renderiza las imágenes.

<img src="your-image.jpg" alt="Descripción de tu imagen" width="800" height="600">

Al agregar estas propiedades, puedes obtener los siguientes efectos de optimización:

  1. Mejora del LCP: El navegador puede predecir el tamaño final de la imagen basándose en los valores de width y height antes de descargarla, reservando así el espacio. Esto permite que el cálculo del diseño progrese sin tener que esperar la descarga de la imagen. Como resultado, el navegador puede gestionar el proceso de renderizado de la página de manera más eficiente y mostrar más rápido el contenido principal, incluyendo el elemento LCP, al usuario.

  2. Prevención del CLS: Al reservar el espacio de la imagen de antemano, no ocurren cambios de diseño cuando la imagen se carga realmente. Esto brinda al usuario una experiencia visualmente estable y satisfactoria, mejorando notablemente la puntuación CLS.

Uso del cálculo de relación de aspecto del navegador:

Los navegadores modernos calculan internamente la relación de aspecto (aspect-ratio) de la imagen en función de las propiedades width y height, proporcionando la funcionalidad para que, incluso si solo especificas width en CSS, height se ajuste automáticamente para mantener la relación de aspecto. Esto es muy útil en el diseño responsivo para manejar las imágenes de manera flexible y prevenir CLS. Es importante declarar width y height en HTML a pesar de usar width: 100%; height: auto; en CSS.

Consejos prácticos de aplicación

  • Aplicar a todas las etiquetas <img>: Haz de la declaración de las propiedades width y height en todas las etiquetas <img> del sitio web una norma. Esto debe aplicarse sin excepciones, desde los avatares de usuario hasta las grandes imágenes de héroe. En un entorno de renderizado del lado del servidor (SSR) como Django, puedes utilizar bibliotecas de procesamiento de imágenes como Pillow para leer el ancho y la altura de las imágenes en la función de vista, y luego pasar estos valores a la plantilla para reflejarlos dinámicamente en HTML.

  • Usar el tamaño real de la imagen: Los valores de width y height que declares deben basarse en el tamaño de píxel original del archivo de imagen. Aunque ajustes este tamaño a través de CSS, las propiedades HTML deben seguir los valores de píxeles reales.

  • Armonía con el diseño responsivo: Utiliza propiedades CSS como max-width: 100%; height: auto; para que las imágenes se ajusten responsivamente al elemento padre. En este caso, las propiedades width y height en HTML proporcionan la información de proporción original que el navegador necesita para reservar el espacio.

<style>
  .responsive-image {
    max-width: 100%;
    height: auto; /* Mantiene la relación de aspecto cuando se usa junto con width/height */
  }
</style>
<body>
  <img src="responsive-example.jpg" alt="Imagen Responsiva" width="1200" height="800" class="responsive-image">
</body>
  • Uso con la etiqueta <picture>: Cuando utilices srcset y la etiqueta <picture> para proporcionar imágenes en diferentes resoluciones y formatos, asegúrate de que la etiqueta <img loading="lazy"> dentro contenga siempre las propiedades width y height.

Conclusión: Pequeño esfuerzo, gran mejora en rendimiento

Declarar las propiedades width y height en la etiqueta de imagen es una de las maneras de obtener 'el mayor efecto con el menor esfuerzo' en la optimización del rendimiento web. Este simple hábito mejora el LCP de tu sitio web y previene cambios de diseño innecesarios para reducir el CLS, brindando finalmente una experiencia más rápida y visualmente estable al usuario. Si como desarrollador deseas mejorar los indicadores de Core Web Vitals y aumentar la satisfacción del usuario, haz de agregar las propiedades width y height en todas las etiquetas <img> tu prioridad inmediata.