Describir y aligerar las imágenes para que acompañen al texto
Descripción
Este criterio comprueba las imágenes de la página. Entre las imágenes de contenido (visibles, de al menos 50 × 50 px y no marcadas como decorativas), al menos el 90 % debe tener un texto alternativo y el 90 % debe declarar sus dimensiones. Al menos el 80 % de las imágenes de mapa de bits debe estar en WebP o AVIF (los SVG no cuentan), y ninguna imagen debe superar los 500 KB.
iPand comprueba que el texto alternativo existe, no que sea acertado, y no juzga la calidad visual de las imágenes.
Por qué importa para las IA
Un rastreador que lee el texto de la página solo ve de una imagen su texto alternativo. Google lo usa, junto con la visión artificial y el contenido de la página, para entender de qué trata una imagen, y aconseja acompañar el texto con imágenes de calidad. Además, las imágenes suelen ser lo que más pesa en una página.
- Un texto alternativo preciso dice lo que muestra la imagen: un producto, un lugar, una persona.
- WebP y AVIF comprimen mucho mejor que JPEG y PNG: la página carga más rápido.
- Unas dimensiones declaradas reservan el espacio de la imagen y evitan que la página se desplace durante la carga.
Cómo corregirlo
- 1 Describe cada imagen en su texto alternativo Rellena el atributo alt de cada imagen útil con una frase corta: «Bicicleta de carga eléctrica azul delante del taller» mejor que «imagen1» o una lista de palabras clave. Para una imagen puramente decorativa, deja el alt vacío (alt=""): no se cuenta.
- 2 Convierte las imágenes a WebP o AVIF Exporta fotos e ilustraciones en WebP o AVIF desde tu herramienta de edición o con una extensión de tu CMS. Para mantener un JPEG de respaldo, ofrece los dos formatos en un elemento <picture>: el navegador solo descarga el primer formato que sabe leer.
- 3 Aligera las imágenes pesadas Ninguna imagen debe superar los 500 KB. Ajusta cada imagen a su tamaño de visualización, comprímela y ofrece varios tamaños con srcset y sizes para que los móviles reciban una versión adecuada.
- 4 Declara el ancho y el alto Añade los atributos width y height a cada etiqueta <img>, con las proporciones de la imagen, o reserva su espacio con la propiedad CSS aspect-ratio. Así, el navegador mantiene el hueco durante la carga, aunque la hoja de estilos ajuste después el tamaño.
Claves
Unas imágenes descritas, ligeras y con dimensiones declaradas ayudan a los motores de búsqueda a entender la página y la hacen más rápida. iPand comprueba estos cuatro puntos en cada análisis; el acierto de tus textos alternativos lo tienes que revisar tú.
