Por qué los elementos de imagen no tienen width y height explícitos en WordPress

Si acabas de hacer un test con Google PageSpeed Insights, es posible que veas este aviso: «Los elementos de imagen no tienen width y height explícitos«. Esto te advierte de algo que puede afectar la experiencia del usuario y el rendimiento de tu sitio, así que en este tutorial te explicaré por qué aparece, por qué es un problema, cómo WordPress lo soluciona por defecto y cómo puedes solucionarlo tú mismo.

Por qué aparece la advertencia y qué significa

La advertencia «Los elementos de imagen no tienen width y height explícitos» aparece cuando al menos una imagen en el HTML de tu página web no tiene los atributos de width (ancho) y height (alto).

Si bien los atributos width y height pueden usarse en varios elementos, esta advertencia en particular solo aparece cuando faltan en una etiqueta <img> en un resultado de prueba de rendimiento. Estos atributos ayudan a los navegadores a asignar la cantidad correcta de espacio para las imágenes, evitando movimientos bruscos del diseño de la página web.

Si las imágenes no tienen dimensiones explícitas, el navegador debe adivinar el tamaño de la imagen durante la carga de la página. Sin un ancho y alto definidos, el navegador primero tiene que descargar la imagen, calcular sus dimensiones, asignar espacio en la página y luego volver a dibujar la página. Imagina dos párrafos colocados uno después del otro. Inicialmente, se cargan uno después del otro sin espacio entre ellos, pero si una imagen sin dimensiones se carga después del primer renderizado de la página, el segundo párrafo podría desplazarse repentinamente hacia abajo. Esto molesta mucho y es exactamente de lo que Google intenta advertirte.

¿Por qué es malo para la experiencia del usuario y el rendimiento?

La falta de atributos de ancho y alto afecta principalmente la experiencia del usuario, pero también impacta el rendimiento del sitio web, aunque sea un poco. Aquí tienes cuatro inconvenientes de no establecer estos atributos:

Movimiento del diseño

Como te he explicado, sin dimensiones definidas, el contenido debajo de una imagen puede desplazarse repentinamente hacia abajo cuando la imagen se carga, lo que genera una experiencia (muy) frustrante y clics accidentales. Por ejemplo, a todos nos ha pasado ese momento en el que un anuncio se carga tarde, haciendo que toda la página se mueva y que hagamos clic en el anuncio sin querer.

Aquí tienes un video que demuestra este problema en una página de prueba:

Y aquí tienes el mismo contenido con los atributos width y height añadidos:

Puntuación baja de CLS

El Cumulative Layout Shift (CLS) es una métrica que forma parte de las Core Web Vitals que Google utiliza para evaluar la estabilidad de una página. Si tu contenido se desplaza o se mueve inesperadamente, el CLS aumenta, lo que puede afectar el posicionamiento en los buscadores porque Google quiere que tu CLS sea lo más bajo posible.

¿Tienes curiosidad por saber cuánto afecta el ejemplo anterior al CLS? Aquí tienes la respuesta:

0.05. El umbral de Google para un CLS «bueno» es 0.1, lo que significa que una sola imagen pequeña puede representar la mitad del movimiento permitido. Esto demuestra lo importante que es definir explícitamente los atributos de ancho y alto para mantener el CLS lo más bajo posible.

Tiempo de carga percibido más lento

Incluso si la velocidad real de carga de tu página es buena, las personas evalúan inconscientemente la velocidad según lo fluida y estable que se siente la página.

• Una página que carga en 2 segundos pero en la que sus elementos se van moviendo muy a menudo resulta frustrante y no invita a quedarse.
• Una página que carga en 3 segundos pero se mantiene visualmente estable se puede perciber como más fluida y rápida.

Dado que la falta de dimensiones en las imágenes provoca desplazamientos de los elementos del diseño, los usuarios podrían percibir la página como lenta o inestable, incluso si el tiempo de carga total es técnicamente rápido.

Impacto en el rendimiento

Cuando un navegador carga una página web, inicialmente distribuye el contenido según la información disponible. Si una imagen no tiene dimensiones predefinidas, el navegador no sabe cuánto espacio ocupará. Así que hace lo siguiente:

• Renderizar la página sin la imagen.
• Cargar la imagen por separado.
• Ajustar el diseño después de cargar la imagen (provocando un reflow).

Este reflow obliga al navegador a recalcular y repintar partes de la página, lo que aumenta el tiempo de renderizado. Aunque estos cambios ocurren muy rápido, se puede llegar a notar un retraso en la velocidad con la que la página parece cargar.

¿Cómo soluciona esto WordPress de forma nativa?

Desde WordPress 5.5, la plataforma añade automáticamente los atributos de ancho y alto a las imágenes insertadas a través del editor de bloques (Gutenberg). Así que, mientras uses el editor por defecto de WordPress, no tienes que hacer nada más.

Sin embargo, no todo es de color rosa. Aún usando el editor por defecto de WordPress, hay ciertas situaciones en las que las imágenes podrían no tener estos atributos:

• Algunos temas o maquetadores de páginas pueden anular el comportamiento por defecto de WordPress.
• Las imágenes añadidas mediante código personalizado (por ejemplo, con etiquetas <img> directamente en los archivos del tema) pueden no tener de estos atributos.
• Las versiones antiguas de WordPress (anteriores a la 5.5) no gestionan esto de forma nativa.
• Las imágenes externas (por ejemplo, incrustadas desde una CDN) podrían no incluir los atributos de ancho y alto.

Qué hacer si WordPress no añade los atributos

Si tus imágenes no tienen dimensiones explícitas, hay dos formas principales de solucionar el problema: añadir los atributos manualmente o usar un plugin.

Añadir el width y height manualmente

Si no te importa editar HTML, puedes añadir manualmente los atributos de ancho (width) y alto (height) a las etiquetas de imagen. Solo necesitas encontrar la etiqueta de imagen sin atributos y añadirlos. Pero primero tendrás que encontrar cuáles son las dimensiones correctas.

Cojamos el primer ejemplo de este artículo. PageSpeed Insights nos advierte sobre lo siguiente:

La primera imagen es un logo de TripAdvisor. Al editar la página, vemos que efectivamente no hay atributos de ancho y alto.

Entonces, ¿cómo encontramos el ancho y alto correctos a añadir?

1. Abre las herramientas para desarrolladores en tu navegador.
2. Haz clic en el icono del selector de elementos (Ctrl+Shift+C).
3. Pasa el cursor sobre la imagen y verás sus dimensiones.

En nuestro caso, el tamaño es 147×113 (redondeado). Por lo tanto, la nueva etiqueta <img> debería verse así:

<img src="https://www.tripadvisor.com/img/cdsi/img2/awards/CoE2017_WidgetAsset-14348-2.png" width="147" height="113" alt="TripAdvisor" class="widCOEImg" id="CDSWIDCOELOGO"/>

Esto proceso puede parecer bastante simple, pero hay algunos detalles importantes a tener en cuenta. Si no eres programador, añadir manualmente los atributos, y hacerlo correctamente, puede ser complicado.

• Las imágenes grandes son más problemáticas que las pequeñas. ¿Por qué? Porque una imagen pequeña mantiene el mismo tamaño en todos los dispositivos, mientras que una grande no. Si defines parámetros de ancho y alto para dispositivos móviles, serán demasiado pequeños para una pantalla grande, lo que seguirá provocando movimientos de la estructura de la página cuando la imagen cargue en esas pantallas más grandes. Y lo mismo ocurre al revés: si los atributos son demasiado altos, el desplazamiento de los elementos ocurrirá en pantallas pequeñas cuando la imagen se cargue.
• La mayoría de las veces, no habrás escrito el código HTML tú mismo. En su lugar, estarás utilizando maquetadores de páginas o las opciones de un tema, que a menudo no permiten añadir los atributos manualmente. Aunque, si tienes suerte y los autores son lo suficientemente considerados, podrías encontrar una opción para hacerlo.
• Incluso si logras encontrar y editar el código del tema o plugin que genera una imagen sin los atributos, tus cambios podrían perderse la próxima vez que el tema o plugin se actualice.

Por esta razón, usar un plugin suele ser siempre la mejor solución.

Usar un plugin para añadir width y height a las imágenes

Existen muchos plugins que permiten automatizar el proceso de añadir los parámetros de ancho y alto. Mis favoritos son Perfmatters, WP Rocket, FlyingPress y LiteSpeed Cache. Por desgracia no hay ningún plugin cuyo único propósito sea hacer esto correctamente y que, además, esté puesto al día.

Perfmatters

Después de instalar Perfmatters, solo tendrás que ir a Ajustes > Perfmatters > Lazy Loading y activar la opción Add Missing Image Dimensions.

WP Rocket

Si prefieres WP Rocket, la opción que necesitas está en Ajustes > WP Rocket > Medios, y se llama Add missing image dimensions.

FlyingPress

En FlyingPress, la opción que estás buscando se llama Add missing width and height, y está en el menú de FlyingPress, en la sección Images.

LiteSpeed Cache

El plugin LiteSpeed Cache es la única opción gratuita en esta lista. Sin embargo, no te recomiendo instalarlo si no tienes un servidor LiteSpeed, principalmente porque estarías añadiendo un plugin enorme cuyo principal beneficio es gestionar la caché de un servidor LiteSpeed. Sí, LiteSpeed Cache también incluye muchas funciones de optimización, pero, en mi experiencia, otros plugins (como Perfmatters o Autoptimize Pro) son más eficaces y flexibles.

Para solucionar el problema de las dimensiones, solo tienes que ir al menú de LiteSpeed Cache. Ahí, ve a Optimización de página > Ajustes de medios y baja hasta que veas la opción Añadir tamaños que faltan.

Conclusión

Las dimensiones explícitas de las imágenes son fundamentales para evitar movimientos del diseño y/o estructura al cargar la página, lo que a su vez mejora la puntuación de Cumulative Layout Shift (CLS) y la experiencia del usuario. WordPress añade automáticamente los atributos width y height en la mayoría de los casos, pero aún hay situaciones en las que necesitarás una mano extra.

Siempre puedes añadir los atributos manualmente tú mismo, pero la solución más sencilla y fiable es usar un plugin de optimización como Perfmatters, que es el que uso aquí en Asistente WordPress y no podría estar más contento 🙂