Las imágenes tienen el poder mágico de alegrar cualquier sitio web o producto. Además de su capacidad decorativa, pueden comunicar el mensaje y guiar a los usuarios a través de la interfaz.
Para incrustar una imagen en la página HTML, usamos la etiqueta <img>. Es uno vacío, así que no tienes que preocuparte por cerrarlo. Los atributos srcy generalmente son lo primero en la etiqueta. Los formatos de archivo de imagen más comunes admitidos por todos los navegadores son APNG, GIF, ICO, JPEG, PNG y SVG.
El srcatributo requerido vive dentro de la etiqueta. Su función principal es especificar dónde se almacena la imagen en la computadora y generalmente contiene una URL. Debe asegurarse de que la imagen permanezca en la ubicación que indicó en su código. De lo contrario, sus usuarios terminarán con el ícono de enlace roto y el texto alternativo, lo cual es frustrante. ****<img>
El atributo alt, también conocido como descripción alternativa, proporciona una explicación de texto para una imagen si los usuarios, por algún motivo, no pueden verla. Podría ser una conexión lenta o un error en el atributo src. Sin mencionar que el texto alternativo es un salvavidas para los usuarios de lectores de pantalla. En pocas palabras, este dispositivo lee el código HTML en voz alta para las personas con discapacidad visual o con problemas de aprendizaje, lo que hace que el contenido sea accesible para todos.
En primer lugar, el texto alternativo debe ser relevante para la imagen y para toda la página. Su objetivo es hacerlo lo más descriptivo y específico posible para que cuando los usuarios no puedan acceder a la imagen o no esté disponible, aún puedan captar el mensaje deseado. En segundo lugar, asegúrese de que el texto alternativo también represente el tema del sitio web y contenga algunas palabras clave.
Por último, pero no menos importante, los lectores de pantalla o los motores de búsqueda ya saben que es una imagen, por lo que no es necesario duplicar esta información escribiendo "Imagen de..." o "Imagen de...".
Las herramientas de lectura de pantalla normalmente dejan de leer el texto alternativo en el punto de 125 caracteres, así que deje de divagar y mantenga el texto alternativo corto pero informativo.
Los atributos widthy heightdefinen las medidas de la imagen en píxeles. Es importante especificar estas propiedades de imagen. De lo contrario, la página web puede parpadear mientras se carga la imagen, lo que puede causar frustración o aumentar la fatiga visual.
Para especificar el peso y la altura de la imagen, puede utilizar el style. Va tras el alt y define las imágenes en píxeles. ¿Por qué necesitamos style si ya tenemos widthy height? Bueno, todos son relevantes y válidos, pero style evita que CSS altere el tamaño de las imágenes.