Imagenes en HTML

Al inicio de la web se usaba solo texto, pero afortunadamente no fue después de mucho tiempo que se empezó a usar la opción de agregar imágenes o videos a las páginas web.

Existe un variedad de elementos multimedia de los que podamos analizar pero por ahora solo nos enfocaremos en las imágenes, en este artículo estaremos analizando cómo usarlas a profundidad, incluyendo lo básico, haciendo uso de sus propiedades como los subtítulos y detallando cómo se relaciona con las imágenes de fondo en CSS.

¿Cómo agregar una imagen en una página?

Para poder agregar una imagen se necesita el elemento <img>, el cual es un elemento vacío lo cual quiere decir que no puede tener otros elementos dentro de sí, requiere de dos atributos para poder ser funcional, “src” y “alt”.

El atributo “src” contiene la dirección de la imagen que se quiere agregar, este atributo puede contener una dirección relativa o absoluta, sin este elemento no se obtiene ninguna imagen para mostrar.

Por ejemplo si su imagen está ubicada en el mismo directorio en donde esta el archivo HTML, la imagen se podría agregar de esta manera:

<img src="dinosaurio.jpg" alt="Dinosaurio" />

Si la imagen está en una carpeta la cual está en el mismo directorio que el HTML, entonces la imagen se puede agregar asi:

<img src="imagenes/dinosaurio.jpg" alt="Dinosaurio" />

y así se puede agregar desde otra carpeta

Texto Alternativo o Atributo “alt”

Es el siguiente atributo que vamos analizar, su valor puede ser una descripción textual de la imagen, en algunos casos cuando la imagen no puede ser cargada o mostrada, o incluso cuando la conexión a internet es muy lenta este atributo se usa para mostrar el texto descriptivo.

<img src="images/dinosaur.jpg" alt="Texto Alternativo o Atributo “alt”" />

La manera rápida de probar este atributo es cambiando el nombre del archivo directamente en el atributo “src”, de esta manera el explorador no encuentra la imagen y muestra el texto en el atributo “alt”.

Entonces de qué nos sirve el atributo “alt”, resulta que nos puede ser de ayuda por varias razones:

• En caso de que algún usuario tenga dificultad para ver puede usar el lector de pantalla y este atributo sería el encargado de informar al usuario de que trata la imagen.
• Puede que la dirección se modifique y de esta manera el usuario podría saber de qué trata esa imagen.
• Algunos exploradores web no soportan imágenes, incluso algunos usuarios usan exploradores que muestran puro texto, los cuales muestran este atributo.
• Puede ser utilizado por algunos buscadores para poder comparar queries de búsqueda.

Entonces ¿Que se debería escribir dentro del atributo “alt”?

Depende desde donde se está agregando la imagen en primer lugar, desde el archivo HTML o desde un archivo CSS, ¿Que se pierde si la imagen no se muestra?

Decoración: Para imágenes decorativas se pueden usar las imágenes desde un archivo CSS y en el HTML el atributo “alt” se deja en blanco, por que no es necesario informar nada, es imagen decorativa.

Contenido: Si su imagen tiene información relevante, esta misma información debe ser usada en el atributo “alt”.

Enlaces o Links: Si se agrega una imagen dentro de una etiqueta <a> para convertir una imagen en enlace, aun así se debe agregar texto alt dentro del enlace, en cualquier de los casos está bien, si se usa en la etiqueta <a> o en el elemento <img>.

Texto: No se debería de agregar texto dentro de un elemento <img> , no es recomendable pero en caso de que no se pueda evitar, se puede agregar en el atributo “alt”.

Básicamente, el punto es entregar una experiencia de usuario que sea funcional, incluso cuando las imágenes no se pueden ver. Esto asegura que todos los usuarios no pierden nada del contenido en el sitio.