Imágenes

La comprobación de imágenes verifica si todas las imágenes de un sitio web están enlazadas de acuerdo con las recomendaciones actuales. También comprobamos que las imágenes estén en un formato apto para web.

¿Por qué realizamos este análisis?

A menudo, los creadores de sitios web cometen errores al incluir las imágenes, generando problemas de accesibilidad para los visitantes e incrementando los tiempos de carga de las páginas.

Es importante incluir los atributos de anchura y altura en todas las etiquetas de imagen. El etiquetaje es válido sin los atributos de anchura y altura, pero es recomendable incluirlos. Sin estos atributos, el navegador web del visitante no sabe cuánto espacio debe reservar para la imagen hasta que la ha descargado. Esto significa que, una vez descargada la imagen, el navegador del visitante debe redibujar de nuevo la página, lo que incrementa el tiempo de carga y puede hacer que los elementos de la página "salten", especialmente si el usuario tiene una conexión lenta. Asimismo es importante no ensanchar ni alargar la imagen con estos atributos: deben ser idénticos al tamaño real de la imagen. Esto también incrementa la carga de la página.

¿Cómo realizamos este análisis?

Descargamos todas las imágenes de un sitio web y las puntuamos de acuerdo con varios criterios:

• ¿Está en un formato no apto para web? Solo se admiten imágenes en formato webp, avif, jpeg, png, svgf y gif.
• ¿Faltan los atributos de anchura y altura? Esto ocurre si se omiten los atributos de anchura y altura de una imagen.
• ¿Se estira la imagen en el navegador? Esto ocurre cuando la imagen fuente tiene un tamaño distinto a los atributos de anchura y altura especificados en el HTML. Si desea ampliar una imagen en el navegador, utilice CSS, ya que la etiqueta describe la imagen original, no el modo en que debe mostrarse.

¿Qué puedo hacer al respecto?

Asegúrese de que todas las imágenes que utiliza tengan un formato adecuado para la web, como jpeg, gif o png. Incluya también para todas las imágenes atributos de anchura y altura, que deberán ser idénticos a las dimensiones reales de la imagen fuente. Si necesita ampliar la imagen en el navegador, utilice CSS. La etiqueta de imagen en el HTML define la imagen original, y el CSS define cómo debe mostrarse.