Imágenes

Notas del episodio

En esta lección estudiaremos cómo insertar imágenes en HTML. Las imágenes son una parte imprescindible de Internet, casi tanto como los enlaces, por el hecho de que le van a dar más apariencia visual a lo que escribamos. Cualquier página web en la que nos metamos hoy en día tiene alguna imagen, aunque sea algún logotipo arriba o algo acompañando al artículo.

Utilizar imágenes en HTML es bastante sencillo, porque nos basta con usar la etiqueta img, indicando mediante el atributo src dónde está la imagen que queremos presentar. Este atributo funciona de forma parecida a como lo hace el atributo href de la etiqueta a. La ruta de la imagen la podemos especificar de forma absoluta, relativa, interna, externa...

Todas las imágenes deberían llevar un atributo extra llamado alt que especifique el texto alternativo de la imagen. Este texto cumple varios propósitos:

• En caso de que la imagen no se cargue, los navegadores web mostrarán ese texto en su lugar para que no se pierda el contexto.
• Algunos navegadores especiales, como los de línea de comandos o los que emplean las personas con problemas de visión, mostrarán el texto alternativo en vez de la imagen.

En general, por cuestiones de accesibilidad es una idea conveniente el indicar de forma breve en el texto alternativo de una imagen qué es lo que hay en ella. Solo si una imagen es puramente decorativa y no tiene ningún contexto, podemos considerar dejar el texto alternativo en blanco, utilizando el atributo del siguietne modo: alt="".

Por ejemplo, si tengo un archivo con una imagen llamado gato.jpg en el mismo directorio que mi archivo HTML, puedo mostrar el gato utilizando la siguiente etiqueta:

<img src="gato.html" alt="Una foto de un gato">

Si ese archivo estuviese en otra subcarpeta podría especificarlo de forma relativa. En los siguientes ejemplos, especificamos imágenes en subcarpetas y carpetas que estén por encima.

<img src="assets/gato.jpg" alt="Un gato pardo"> <img src="../resources/gato.jpg" alt="Un gato blanco">

Si la imagen estuviese en una ruta concreta, también la podemos especificar mediante una ruta absoluta:

<img src="/assets/images/gato.jpg" alt="Un gato oscuro">

Si las dimensiones de la imagen no coinciden con las que queremos utilizar para presentarla por pantalla, también las podemos cambiar mediante los atributos width y height. De este modo, el navegador mostrará la imagen con otras dimensiones. Sin embargo, en general es conveniente hacer esto mediante CSS y este método sólo debería utilizarse cuando literalmente no quede otra.

<img src="gatito.jpg" alt="Un gato pequeño" width="100" height="75"> <img src="gatazo.jpg" alt="Un gato grande" height="500">

En el primer caso, estaremos indicándole a HTML que queremos mostrar la imagen con las dimensiones 100x75. El segundo caso es un poco más especial, porque indicamos el atributo height pero no el width. En caso de que falte uno de los atributos, el comportamiento de HTML es escalar de forma proporcional, así que la imagen tendrá el ancho que sea necesario para poder mostrarla a 500 píxeles de alto sin llegar a deformarla.

Un último dato interesante sobre las imágenes en HTML es que mediante el atributo title podemos establecer un título para la imagen. El título aparece cuando se pone el ratón encima de la imagen, y en algunos tipos de pantalla, como las táctiles, o algunos navegadores, también puede ser presentada al tratar de compartir la imagen o abrir un menú. Sin embargo, no hay que confundirla con la etiqueta alt. La etiqueta alt si es necesaria por temas de accesibilidad, mientras que la title es algo que se pone si hace falta.

Además, tampoco sirven el mismo propósito. alt debe describir de forma precisa pero breve la imagen para que pueda ser presentada de la forma más contextual posible, mientras que la etiqueta title es válida para mostrar una leyenda o una descripción más larga sobre la imagen:

<img alt="Fotografía de un gato" src="gato.jpg" title="Los gatos son mamíferos.">