HTML. Unidad 5. Imágenes.

Introducción

Al principio, las páginas web solo contenían texto y resultaba más bien aburrida. Afortunadamente, no pasó mucho tiempo antes de que se añadiera la capacidad de insertar imágenes (y otros tipos de contenido más interesantes). Existen elementos multimedia que debemos tener en cuenta, pero es lógico comenzar con el humilde elemento <img> utilizado para insertar una imagen simple en una página web. En esta unidad veremos en detalle cómo usar este elemento, incluidos sus conceptos básicos y cómo añadir pies de imagen usando <figure>.

¿Cómo ponemos una imagen en una página web?

Para poner una imagen simple en una página web, utilizamos el elemento <img>. Se trata de un elemento vacío (lo que significa que no contiene texto o etiqueta de cierre) que requiere por lo menos de un atributo para ser utilizado: src (a veces denominado por su nombre completo, source). El atributo src contiene una ruta que apunta a la imagen que quieres poner en la página, que puede ser una URL relativa o absoluta, de la misma forma que el elemento <a> contiene los valores del atributo href.

Por ejemplo, si tu imagen se llama dinosaurio.jpg, y está en el mismo directorio que tu página HTML, incluir la imagen de la siguiente manera:

<img src="dinosaurio.jpg" />

El código anterior debería darnos el resultado siguiente:

Si la imagen está en el subdirectorio imagenes, ubicado en el mismo directorio que la página HTML (lo que Google recomienda con fines de indexación y posicionamiento en buscadores SEO), entonces la imagen se puede incluir así:

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

Los motores de búsqueda también leen los nombres de archivo de imagen y esto cuenta para el SEO.  Por lo tanto, elige para tu imagen un nombre descriptivo. Por ejemplo, dinosaurio.jpg es mejor que img835.png.

También puedes incluir la imagen usando la URL absoluta, por ejemplo:

<img src="https://www.ejemplo.com/imagenes/dinosaurio.jpg" />
...
<img src="https://developer.mozilla.org/static/img/favicon144.png" />

Aunque esta última opción es menos habitual, ya que provoca que el navegador tenga que buscar la dirección IP desde el servidor DNS cada vez. Al ser posible, conviene almacenar las imágenes de tu página web en el mismo servidor donde guardes tu código HTML.

Por último, conviene mencionar que la mayoría de imágenes tienen derechos de autor. Por ello, no debes mostrar una imagen en tu página web a menos que:

  1. seas dueño de la imagen,
  2. tengas permiso escrito explícito del dueño de la imagen o 
  3. tengas suficientes pruebas de que la imagen es de dominio público.

El incumplimiento de las normas de los derechos de autor es un acto ilegal y poco ético. Por lo tanto, no debes apuntar nunca tu atributo src a una imagen que esté alojada en un sitio web si no tienes el permiso para hacerlo. Esto se llama hotlinking. Asimismo es ilegal robar el ancho de banda de alguien.  Además, ralentiza tu página y te deja sin control sobre la imagen si la eliminan o reemplazan por otra que incluso podría resultar embarazosa.

Texto alternativo

El próximo atributo que veremos es  alt. Su valor debe ser una descripción textual de la imagen para usarla en situaciones en que la imagen no se pueda mostrar o tarde demasiado en mostrarse por una conexión de Internet muy lenta. Por ejemplo, nuestro código anterior podría modificarse así:

<img src="imagenes/dinosaurio.jpg"
     alt="La cabeza y el torso de un esqueleto de dinosaurio;
           tiene una cabeza grande con dientes largos y afilados">
...
<img src="https://developer.mozilla.org/static/img/favicon144.png"
     alt="MDN logo" />

La forma más fácil de probar el texto alt es escribir mal el nombre de archivo. Si, por ejemplo, escribimos el nombre de archivo de nuestra imagen como dinosaurioooooo.jpg, el navegador no podrá mostrar la imagen, y en su lugar mostrará el texto alternativo.

Además de ser necesario (la validación de tu página web no será correcta si omites algún texto alternativo), el texto alternativo podría resultar necesario por varias razones:

  • El usuario tiene alguna discapacidad visual y utiliza un lector de pantalla para leer el contenido de la web. De hecho, disponer de texto alternativo para describir las imágenes es útil para la mayoría de los usuarios.
  • Como ya hemos dicho anteriormente, es posible que se haya escrito mal el nombre del archivo o su ruta.
  • El navegador no admite el tipo de imagen. Algunas personas aún usan navegadores de solo texto, como Lynx, que muestran el texto del atributo alt.
  • Quieres que los motores de búsqueda puedan utilizar este texto. Por ejemplo, los motores de búsqueda pueden hacer coincidir el texto alternativo con la consulta de búsqueda.
  • Los usuarios han desactivado las imágenes para reducir el volumen de transferencia de datos y de distracciones. Esto puede suceder especialmente en teléfonos móviles y en países en los que el ancho de banda está bastante limitado.

Para saber qué hay que escribir exactamente en el atributo alt, debemos pensar primero por qué la imagen está en ese lugar. En otras palabras, qué se pierde si la imagen no aparece:

  • Decoración. Para las imágenes decorativas deberían utilizarse imágenes de fondo CSS. Pero si es inevitable usar HTML, la mejor forma de hacerlo es con alt="". Si la imagen no es parte del contenido, el lector de pantalla no debería malgastar el tiempo en leerla.
  • Contenido. Si tu imagen proporciona información significativa, se debe proporcionar la misma información en un texto alternativo (alt) breve. O mejor aún, en el texto principal que todos pueden ver. No escribas texto alternativo redundante. ¿Acaso no resultaría molesto para un usuario con visión ordinaria si todos los párrafos se escribieran dos veces en el contenido principal? Si la imagen se describe en el cuerpo principal del texto de modo adecuado, puedes simplemente usar alt="".
  • Enlace. Al poner una imagen dentro de una etiqueta <a> para convertirla en un enlace, aun debes proporcionar texto de enlace accesible. En tal caso podrías escribirlo dentro del mismo elemento <a>, o dentro del atributo alt de la imagen. Lo que mejor funcione en tu caso.
  • Texto. No deberías poner tu texto en imágenes.  Si tu título de encabezado principal necesita, por ejemplo, un sombreado paralelo, usa CSS para ello en vez de poner el texto en una imagen. Pero, si realmente no puedes evitarlo, deberías proporcionar el texto en el atributo alt.

Resumiendo, el objetivo es ofrecer una experiencia de navegación adecuada en términos de usabilidad, incluso cuando las imágenes no puedan verse. Esto asegura que ningún usuario se pierda ninguna parte del contenido.

Puedes consultar la guía de texto alternativo de Mozilla para obtener más información.

Anchura y altura

Puedes usar los atributos  ancho (width) y alto (height) para especificar la anchura y altura de cada imagen. Puedes encontrar el ancho y el alto de cualquier imagen de diversas maneras. Por ejemplo, con el botón derecho del ratón, o en Mac también puedes usar  Cmd + I  para mostrar información del archivo de imagen. Volviendo a nuestro ejemplo, podríamos hacer esto:

<img src="imagenes/dinosaurio.jpg"
     alt="La cabeza y el torso de un esqueleto de dinosaurio;
          tiene una cabeza grande con dientes largos y afilados"
     width="400"
     height="341">

Sin embargo, no deberías alterar el tamaño de tus imágenes utilizando atributos HTML. Las imágenes podrían verse pixeladas o borrosas si estableces un tamaño demasiado grande; o bien demasiado pequeñas, y se desperdiciaría ancho de banda descargando una imagen que no se ajusta a las necesidades del usuario. La imagen también podría quedar distorsionada, si no mantienes la proporción de aspecto correcta. Deberías utilizar un editor de imágenes para dar a tu imagen el tamaño adecuado antes de colocarla en tu página web. Y si tienes que alterar el tamaño de una imagen desde tu código fuente, es mejor usar CSS.

Título de la imagen

Al igual que con los enlaces, también puedes añadir atributos title a las imágenes para proporcionar más información de ayuda si es necesario. En nuestro ejemplo, podríamos hacer esto:

<img src="imagenes/dinosaurio.jpg"
     alt="La cabeza y el torso de un esqueleto de dinosaurio;
          tiene una cabeza grande con dientes largos y afilados"
     width="400"
     height="341"
     title="Exposición de un T-Rex en el museo de la Universidad de Manchester.">

Esto nos da una etiqueta de ayuda (tooltip) como las de los enlaces. Sin embargo, no se recomienda incluir esta propiedad en las imágenes, ya que title presenta algunos problemas de accesibilidad, principalmente porque los lectores de pantalla (screen readers) tienen un comportamiento imprevisible y la mayoría de navegadores no la mostrarán a menos que pases el ratón por encima de la imagen (y por tanto es inútil para quien usa teclado). Si estás interesado en este tema, puedes leer el artículo The Trials and Tribulations of the Title Attribute de Scott O’Hara.

Resumiendo, es más adecuado incluir en el texto principal de la página la información que pondríamos en el title, en lugar de adjuntarla en la imagen.

Ejercicio propuesto: Insertar imágenes

Crea una página web para mostrar varias imágenes. Tienes que usar la etiqueta básica <img> y el atributo «src» para apuntar a la URL de cada imagen individual. Por ejemplo, puedes usar imágenes como estas:

https://developer.mozilla.org/static/img/favicon144.png

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

https://validator.w3.org/images/w3c.png

También debes añadir un texto alternativo a cada imagen y verificar que se muestra al escribir mal la URL de cada imagen. Finalmente experimente con diferentes valores de ancho y alto para ver cuál es su efecto.

Imágenes con enlaces

Este ejemplo se basa en los anteriores y muestra cómo convertir la imagen en un enlace. Para hacerlo, debes anidar la etiqueta <img> dentro de <a>. Además, se debe usar el texto alternativo para describir el recurso al que apunta el enlace, como si se estuviera usando un enlace de texto en su lugar:

<a href="https://developer.mozilla.org">
  <img src="https://developer.mozilla.org/static/img/favicon144.png"
       alt="Visita la web de MDN" />
</a>

Ejercicio propuesto: Las diez páginas más importantes

Crea una página web que muestre una lista ordenada (<ol>) de las diez páginas web que más te gusten. Debes utilizar imágenes para crear enlaces a cada página y establecer el atributo de altura con el mismo valor para todas las imágenes para que todas tengan la misma altura. Por ejemplo:

<ol>
  <li>
    <a href="https://developer.mozilla.org">
      <img src="https://developer.mozilla.org/static/img/favicon144.png" 
           alt="MDN site" height="100" />
    </a>
  </li>
  <li>
    <a href="https://validator.w3.org/">
      <img src="https://validator.w3.org/images/w3c.png" 
           alt="Markup Validation Service" height="100" />
    </a>
  </li>
  ...
</ol>

Comentar imágenes con figure y figcaption

Hay varias formas en que puedes añadir un pie a tu imagen. Por ejemplo, nada te impediría hacer esto:

<div class="figure">
  <img src="imagenes/dinosaurio.jpg"
       alt="La cabeza y el torso de un esqueleto de dinosaurio;
            tiene una cabeza grande con dientes largos y afilados"
       width="400"
       height="341">

  <p>Exposición de un T-Rex en el museo de la Universidad de Manchester.</p>
</div>

Este código es completamente correcto, ya que incluye el contenido que se necesita y es muy personalizable con CSS. Pero hay un problema: no hay nada que vincule semánticamente la imagen con su título, lo que puede causar problemas a los lectores de pantalla. Por ejemplo, cuando hay 50 imágenes y leyendas, ¿qué leyenda se corresponde con cada imagen?

Una solución mejor es utilizar los elementos HTML5 <figure> y <figcaption>. Estos se crearon exactamente para este propósito: proporcionar un contenedor semántico para las figuras y vincular claramente la figura con el pie. Nuestro ejemplo anterior podría reescribirse así:

<figure>
  <img src="imagenes/dinosaurio.jpg"
       alt="La cabeza y el torso de un esqueleto de dinosaurio;
            tiene una cabeza grande con dientes largos y afilados" width="400"
       height="341">

  <figcaption>Exposición de un T-Rex en el museo de la Universidad de Manchester.</figcaption>
</figure>

El elemento <figcaption> le dice al navegador, o a alguna tecnología de apoyo, que el texto que contiene describe la imagen que está contenida en el elemento <figure>. Desde el punto de vista de la accesibilidad, los pies de imagen y el texto alternativo alt cumplen funciones diferentes. Los pies de imagen benefician incluso a quien puede ver la imagen, mientras que el texto alt proporciona la misma función en una imagen ausente. Por tanto, los subtítulos y el texto alt no deberían decir lo mismo, porque ambos aparecen si la imagen no se muestra.

También debemos tener en cuenta que el elemento figure no ha de contener una imagen necesariamente. Es una unidad de contenido independiente que:

  • Expresa un significado en una forma compacta y fácil de entender.
  • Se puede poner en varios sitios en el flujo lineal de la página.
  • Proporciona información esencial que da apoyo al texto principal.

Un elemento figure podría contener varias imágenes, un trozo de código, audio, video, ecuaciones, una tabla, o cualquier otra cosa.

Ejercicio propuesto: Figuras con leyenda

Crea una página web para mostrar varias imágenes que te gusten, usando el elemento <figure>, y agrega un título a cada una usando el elemento <figcaption>, como se hace en el siguiente ejemplo:

<figure>
  <img src="https://developer.mozilla.org/static/img/favicon144.png"
       alt="Página web de MDN (Mozilla Developer Network)">
  <figcaption>MDN Logo</figcaption>
</figure>

<figure>
  <img src="https://validator.w3.org/images/w3c.png"
       alt="Validador de W3C">
  <figcaption>W3C Logo</figcaption>
</figure>

...

Ejercicio propuesto: Las diez películas más interesantes

Crea una nueva página web que muestre una lista ordenada (<ol>) de las diez películas que más te gusten. En este caso, debe utilizar figuras con subtítulos para crear enlaces a cada página. Utiliza el mismo valor para el atributo de altura de todas las imágenes para que todas tengan la misma altura. Por ejemplo:

<ol>
  <li>
    <a href="https://en.wikipedia.org/wiki/Steve_Jobs_(film)">
      <figure>
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/49/SteveJobsMacbookAir.JPG" 
             alt="Steve Jobs y el Macbook Air" height="100" />
        <figcaption>Steve jobs</figcaption>
      </figure>
    </a>
  </li>
  <li>
    <a href="https://en.wikipedia.org/wiki/2001:_A_Space_Odyssey_(film)">
      <figure>
        <img src="https://upload.wikimedia.org/wikipedia/en/0/09/2001child2.JPG" 
             alt="Bebé, espacio, y la Tierra" height="100" />
        <figcaption>2001: Una Odisea Espacial</figcaption>
      </figure>
    </a>
  </li>
  ...
</ol>

Test

Comprueba tus conocimientos con este test sobre imágenes y otros conceptos relacionados con esta unidad.