Saltar al contenido principal

Imágenes

Las imágenes deben tener un texto alternativo que describa la información o la función que representan y también deben estar optimizadas.

Texto alternativo

El texto alternativo se incluye principalmente usando el atributo alt. El atributo alt contiene un texto breve que describe el contenido o la función de la imagen.

El atributo alt debe incluirse siempre para que sea HTML válido. En caso de imágenes decorativas se coloca el atributo vacío (alt="").

Otras formas de añadir información textual a una imagen son:

  • El atributo title
    Es opcional y sirve para incluir información complementaria.

  • Pie de foto
    Suele usarse para añadir información complementaria. Hay que evitar repetir la misma información que en alt.

  • Descripción larga
    Se utiliza en imágenes complejas. Se puede incluir a continuación de la imagen, en otro punto de la página (usando un enlace ancla) o en otra página enlazada.

El texto alternativo depende del contexto y del propósito de la imagen. A continuación se muestran algunos ejemplos.

Ejemplo 1: Logo con enlace

En este caso incluimos simplemente el nombre del sitio como texto alternativo.

Ejemplo
HTML
<a href="http://www.w3c.es">
    <img src="logo-w3c.png" alt="W3C España">
</a>

Ejemplo 2: Icono de formato de archivo

En este ejemplo el texto alternativo indica el formato del archivo vinculado.

Ejemplo
HTML
<a href="#">
    Informe anual 2015
    <img src="icon-pdf.png" alt="PDF">
</a>

Ejemplo 3: Foto

En este caso se utiliza el elemento figure para indicar que es un elemento independiente y figcaption para añadir una información adicional.

Ejemplo
El presidente de Estados Unidos John F. Kennedy haciendo un discurso.
John F. Kennedy (foto de dominio público)
HTML
<figure>
  <img src="john-f-kennedy.jpg" alt="El presidente de Estados Unidos John F. Kennedy haciendo un discurso.">
  <figcaption>John F. Kennedy (foto de dominio público)</figcaption>
</figure>

Imágenes con formato SVG

Si se incluye la imagen SVG con la etiqueta img entonces se utiliza el atributo alt, con en cualquier otro tipo de imagen.

Pero si se incluye el archivo SVG en línea, entonces debemos añadir el atributo title junto a la propiedad aria-labelledby.

Ejemplo: SVG en línea accesible.

HTML
<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="title" viewBox="0 0 54.908 54.908">
<title id="title">WiFi disponible</title>
    <path d="M54.615 19.123C47.372 11.88..."/>
</svg>

Nota: Si la imagen SVG es puramente decorativa, no es necesario incluir el atributo title y se puede añadir el role="presentation" para indicar que es un elemento de presentación.

Texto alternativo consistente

Los textos alternativos de las imágenes deben ser consistentes. Si una imagen hace referencia a un mismo tipo de documento o a una misma función, entonces debe tener el mismo texto alternativo.

Por ejemplo, un icono de ayuda con el texto alternativo “Más información”, deberá tener el mismo texto cada vez que aparezca en el sitio web.

Cómo usar el atributo alt

Este árbol de decisiones describe cómo usar el atributo alt del elemento <img> en diversas situaciones. Para algunos tipos de imágenes, existen enfoques alternativos, como el uso de imágenes de fondo CSS para imágenes decorativas o fuentes web en lugar de imágenes de texto.

  • ¿La imagen contiene texto?
    • Sí:
      • … y el texto está presente también como texto real cerca de la imagen.Usa un atributo alt vacío.
      • … y el texto solo se muestra para efectos visuales.Usa un atributo alt vacío.
      • … y el texto tiene una función específica, por ejemplo, es un icono.Usa el atributo alt para comunicar la función de la imagen.
      • … y el texto de la imagen no está presente de ninguna otra forma.Usa el atributo alt para incluir el texto de la imagen.
    • No:
      • Continúa.
  • ¿La imagen se usa en un enlace o en un botón, y sería difícil o imposible entender lo que hace el enlace o el botón, si la imagen no estuviera allí?
    • Sí:
      • Usa el atributo alt para comunicar el destino del enlace o la acción tomada.
    • No:
      • Continúa.
  • ¿La imagen contribuye al significado de la página o contexto actual?
    • Sí:
      • … y es un simple gráfico o fotografía.Utiliza una breve descripción de la imagen en el atributo alt, de manera que transmita ese significado.
      • … y es un gráfico o una información compleja.Incluye la información contenida en la imagen en otra parte de la página.
      • … y muestra contenido redundante con el texto real cercano.Usa un atributo alt vacío.
    • No:
      • Continúa.
  • ¿La imagen es puramente decorativa o no está destinada al usuario?
    • Sí:
      • Usa un atributo alt vacío.
    • No:
      • Continúa.
  • ¿El uso de la imagen no figura en la lista anterior o no está claro qué texto alternativo proporcionar?
    • Este árbol de decisiones no cubre todos los casos. Para obtener información detallada sobre proporcionar alternativas de texto, consulta la página Images Concepts.

Créditos: Este arbol de decisiones es una traducción de la página An alt Decision Tree del W3C.

Optimización de imágenes

Cuanto más espacio ocupa una página web más tarda en cargar en el navegador. Y con una conexión lenta, la espera se puede hacer eterna. Los archivos más grandes de un sitio web suelen ser las imágenes, por eso es importante utilizar el formato más adecuado y comprimir siempre las imágenes, para que ocupen lo menos posible.

Veamos algunas técnicas de optimización:

  • Formato: Siempre que se trate de imágenes vectoriales (logos, iconos, formas geométricas…) utiliza el formato SVG. Es el que ocupa menos espacio y además es escalable.
  • Compresión: Cuando se trata de imágenes de mapas de bits, como las fotografías, usamos formatos como PNG o JPG. En estos casos es importante que las imágenes estén comprimidas, para ello podemos usar herramientas como ImageOptim.
  • Elemento <picture>: Este elemento nos permite ofrecer diferentes tamaños de imagen dependiendo del ancho de la ventana de visualización.
  • Carga diferida: La carga diferida de imágenes (lazy loading en inglés) consiste en que las imágenes cargan a medida que van apareciendo en la pantalla.

Imágenes adaptables

Para que una imagen se adapte a las diferentes resoluciones de pantalla, usamos la propiedad max-width con el valor 100%.

Ejemplo 1: Aplicar max-width: 100% a las imágenes.

CSS
img {
    max-width: 100%;
    height: auto;
}

Utilizando esta técnica, podemos cargar una única imagen de gran tamaño, que se adaptará ocupando siempre el tamaño máximo disponible.

Este sistema funciona bien, pero tiene un inconveniente, estamos cargando siempre una imagen grande, lo cual aumenta el tiempo de carga innecesariamente en dispositivos móviles.

Una solución más eficiente en este caso, sería utilizar picture. El elemento picture permite definir múltiples imágenes mediante el atributo srcset y especificar cuándo debe cargar cada una con el atributo media, siguiendo las mismas reglas que las consultas de medios.

Ejemplo 2: El elemento picture

HTML
<picture>
    <source srcset="car-large.jpg" media="(min-width: 800px)">
    <source srcset="car-medium.jpg" media="(min-width: 400px)">
    <img src="car-small.jpg" alt="Coche eléctrico">
</picture>