Tenemos dos formas de colocar imágenes; de contenido y de fondo. En función de lo que esperemos de las imágenes, optaremos por unas u otras.
Si la imagen es importante para el contenido del documento deberíamos utilizar un elemento <img>. En cambio, si la imagen sólo tiene un sentido estético, deberíamos utilizar las imágenes de fondo a través de CSS.
Tabla de contenidos
Imagen a través del elemento <img>
La forma más usual es utilizar la etiqueta <img> en el documento HTML.
<img src='img/image.jpg'>
De esta forma insertamos en la página web una imagen llamada image.jpg que tenemos en un carpeta llamada img. Observa que la etiqueta <img> no necesita etiqueta de cierre, es de las llamadas de autocierre.
El atributo alt
El atributo alt es muy importante, ya que si nuestra imagen no carga por cualquier motivo, o las personas que acceden a nuestra web son invidentes, no podrán ver la imagen. Cosa que ocasionará una experiencia de usuario muy poco recomendable.
En el caso que no cargue la web, se mostrara el contenido del atributo alt, el cual contendrá una frase lo suficiente clara del contenido de nuestra imagen, es decir, no vale con tener el nombre. Sería más apropiado que contenga una pequeña descripción de dicha imagen.
Si los que acceden tienen problemas de visión, el lector de pantalla les reproducirá el contenido del atributo, con lo que solucionará nuestro problema.
Un atributo alt correcto sería el siguiente:
<img src='perro.jpg' alt'Se ve un perro jugando con una pelota roja en un gran parque'>
El atributo longdesc
En el caso que la imagen sea muy compleja, o sea un gráfico en el cual hay muchos datos, para que las personas que utilizan lector de pantalla o que tengan las imágenes desactivadas en el navegador, se puede utilizar el atributo longdesc para insertar una url. Dicha url lleva a un documento en el cual se muestra la información en un formato legible para los lectores.
Insertar imágenes a través de CSS, como fondo.
Otra forma de insertar imágenes en el documento es a través de CSS, pero como en este post abordamos solamente el HTML, este apartado lo explicaré cuando toque. Sólo comentar que al insertarlas a través de CSS se pueden hacer muchas cosas.
- Se pueden poner detrás de texto o alrededor
- Se pueden repetir utilizando patrones regulares, entre otras.
Deja una respuesta