Images

Las imágenes decorativas, como los degradados de fondo en los botones o las imágenes de fondo en las secciones de contenido o en toda la página, son de presentación y se deben aplicar con CSS. Cuando una imagen agrega contexto a un documento, se considera contenido y debe incorporarse con HTML.

El método principal para incluir imágenes es la etiqueta <img> con el atributo src que hace referencia a un recurso de imagen y el atributo alt que describe la imagen.

<img src="images/eve.png" alt="Eve">

Tanto el atributo srcset en <img> como el elemento <picture> proporcionan una forma de incluir varias fuentes de imágenes con consultas de medios asociadas, cada una con una fuente de imagen de resguardo, lo que permite publicar el archivo de imagen más adecuado según la resolución del dispositivo, las capacidades del navegador y el tamaño de la ventana gráfica. El atributo srcset permite proporcionar varias versiones de la imagen según la resolución y, junto con el atributo sizes, el tamaño de la ventana gráfica del navegador.

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

Esto también se puede hacer con el elemento <picture>, junto con los elementos secundarios <source>, que toman un <img> como fuente predeterminada.

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

Además de estos métodos de imágenes responsivas integrados en HTML, este lenguaje también permite mejorar el rendimiento de la renderización de imágenes a través de varios atributos. La etiqueta <img> y, por lo tanto, los botones de envío gráficos <input type="image"> pueden incluir atributos height y width para establecer la relación de aspecto de la imagen y reducir el cambio de diseño del contenido. El atributo lazy habilita la carga diferida.

El lenguaje HTML también admite la inclusión de imágenes SVG directamente con <svg>, aunque las imágenes SVG con la extensión .svg (o como URI de datos) se pueden incorporar con el elemento <img>.

Como mínimo, cada imagen en primer plano debe incluir los atributos src y alt.

El archivo src es la ruta de acceso y el nombre de archivo de la imagen incorporada. El atributo src se usa para proporcionar la URL de la imagen. Luego, el navegador recupera el recurso y lo renderiza en la página. <img> requiere este atributo. Sin él, no se puede renderizar nada.

El atributo alt proporciona texto alternativo para la imagen, lo que brinda una descripción de la imagen para quienes no pueden ver la pantalla (piensa en los motores de búsqueda y las tecnologías de asistencia, e incluso en Alexa, Siri y el Asistente de Google), y el navegador puede mostrarlo si la imagen no se carga. Además de los usuarios con redes lentas o ancho de banda limitado, el texto alt es muy útil en los correos electrónicos HTML, ya que muchos usuarios bloquean las imágenes en sus aplicaciones de correo electrónico.

<img src="path/filename" alt="descriptive text" />

Si la imagen es de tipo de archivo SVG, también incluye role="img", que es necesario debido a errores de VoiceOver.

<img src="switch.svg" alt="light switch" role="img" />

Escribe alt descripciones de imágenes eficaces

Los atributos alt deben ser cortos y concisos, y proporcionar toda la información pertinente que transmite la imagen, al mismo tiempo que omiten la información redundante para otro contenido del documento o que no es útil. Al escribir el texto, el tono debe reflejar el del sitio.

Para escribir un texto alternativo eficaz, imagina que le estás leyendo toda la página a una persona que no puede verla. Si usas el elemento <img> semántico, los usuarios de lectores de pantalla y los bots reciben información de que el elemento es una imagen. Es redundante incluir "Esta es una imagen/captura de pantalla/foto de" en la alt. El usuario no necesita saber que hay una imagen, pero sí necesita saber qué información transmite.

Normalmente, no dirías: "Esta es una imagen granulada de un perro con un sombrero rojo". En cambio, debes transmitir lo que la imagen comunica en relación con el contexto del resto del documento. Lo que transmites cambia según el contexto y el contenido del texto circundante.

Por ejemplo, la foto de un perro se describe de diferentes maneras, según el contexto. Si Fluffy es un avatar junto a una opinión sobre la comida para perros Yuckymeat, alt="Fluffy" es suficiente.

Si la foto forma parte de la página de adopción de Fluffy en el sitio web de un refugio de animales, el público objetivo es el posible padre o madre de la mascota. El texto debe describir la información que se transmite en la imagen y que es relevante para un adoptante, y no debe duplicarse en el texto circundante. Es adecuada una descripción más larga, como alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth". Por lo general, el texto de una página de adopción incluye la especie, la raza, la edad y el género de la mascota adoptable, por lo que no es necesario repetir esta información en el texto alternativo. Sin embargo, la biografía escrita del perro probablemente no incluya la longitud del pelo, los colores o las preferencias de juguetes.

Es importante destacar que no describimos la imagen por completo. El posible dueño del perro no necesita saber si el perro está en el interior o en el exterior, o que tiene un collar rojo y una correa azul.

Cuando uses imágenes para la iconografía, como el atributo alt proporciona el nombre accesible, transmite el significado del ícono, no una descripción de la imagen. Por ejemplo, el atributo alt del ícono de lupa es search. El ícono que parece una casa tiene home como texto alternativo. La descripción del ícono de disquete de 5 pulgadas es save. Si se usan dos íconos de Fluffy para indicar prácticas recomendadas y antipatrones, el perro sonriente con una boina verde podría tener establecido alt="good", mientras que el perro gruñendo con una boina roja podría leer alt="bad". Dicho esto, solo usa íconos estándar y, si usas íconos no estándar, como los de Fluffy bueno y malo, incluye una leyenda y asegúrate de que los íconos no sean la única forma de descifrar el significado de los elementos de la IU.

Si la imagen es una captura de pantalla o un gráfico, escribe lo que se aprende de ella en lugar de describir su apariencia. Si bien una imagen puede valer más que mil palabras, la descripción debe transmitir de forma concisa todo lo que se aprende.

Omite la información que el usuario ya conoce del contexto y que se le informa en el contenido. Por ejemplo, si estás en una página de tutorial sobre cómo cambiar la configuración del navegador y la página trata sobre hacer clic en los íconos de la interfaz de Chrome del navegador, la URL de la página en la captura de pantalla no es importante. Limita el alt al tema en cuestión: cómo cambiar la configuración.

El alt podría ser "El ícono de configuración se encuentra en la barra de navegación debajo del campo de búsqueda". No incluyas "captura de pantalla" ni "taller de aprendizaje automático", ya que el usuario no necesita saber que se trata de una captura de pantalla ni dónde estaba navegando el escritor técnico cuando escribió las instrucciones. La descripción de la imagen se basa en el contexto de por qué se incluyó la imagen en primer lugar.

Si la captura de pantalla muestra cómo encontrar el número de versión del navegador en chrome://version/, incluye la URL en el contenido de la página como instrucciones y proporciona una cadena vacía como atributo alt, ya que la imagen no proporciona información que no esté en el texto circundante.

Si la imagen no proporciona información adicional o es meramente decorativa, el atributo debe estar presente, pero como una cadena vacía.

<img src="svg/magazine.svg" alt="" role="none" />

MachineLearningWorkshop.com tiene siete imágenes en primer plano, por lo tanto, siete imágenes con atributos alt: un interruptor de luz de huevo de Pascua, un ícono de manual, dos fotos biográficas de Hal y Eve, y tres avatares de una licuadora, una aspiradora y una tostadora. La imagen en primer plano que parece una revista es la única que es puramente decorativa. La página también tiene dos imágenes de fondo. Estas imágenes son decorativas y se agregaron con CSS, por lo que no son accesibles.

La revista, al ser puramente decorativa, tiene un atributo alt vacío y un role de none, ya que la imagen es un SVG meramente de presentación. Si son significativas, las imágenes SVG deben incluir el elemento role="img".

<img src="svg/magazine.svg" alt="" role="none" />

En la parte inferior de la página, hay tres opiniones, cada una con una imagen del póster. Por lo general, el texto alt es el nombre de la persona que aparece en la foto.

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

En cambio, como se trata de una página de bromas, debes transmitir lo que tal vez no sea evidente para los usuarios con visión reducida, de modo que no se pierdan el humor. Usamos la función de la máquina original como alt en lugar del nombre del personaje:

<img src="images/blender.svg" alt="blender" role="img" />

Las fotos de los instructores no son solo avatares: son imágenes biográficas y, por lo tanto, obtienen una descripción más detallada.

Si se tratara de un sitio real, proporcionarías la descripción mínima de cómo se ve el profesor, de modo que un posible estudiante pueda reconocerlo cuando entre al aula.

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

Como se trata de un sitio de bromas, proporciona la información pertinente en el contexto de la broma:

<img src="svg/hal.svg" role="img"
  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />

Si le leyeras la página a un amigo por teléfono, no le importaría cómo se ve el punto rojo. En este caso, el historial de la referencia de la película es importante.

Cuando escribas texto descriptivo, considera qué información transmite la imagen que es importante y relevante para el usuario, y agrégala. Recuerda que el contenido del atributo alt de una imagen difiere según el contexto. Se debe transmitir toda la información que se muestra en una imagen a la que puede acceder un usuario vidente y que es pertinente para el contexto; nada más. Sé breve, preciso y útil.

Los atributos src y alt son requisitos mínimos para las imágenes integradas. Hay algunos otros atributos que debemos analizar.

Imágenes responsivas

Hay una gran cantidad de tamaños de viewport y resoluciones de pantalla. No querrás desperdiciar el ancho de banda de un usuario de dispositivos móviles publicando una imagen lo suficientemente ancha para un monitor de pantalla grande, pero es posible que desees publicar imágenes de mayor resolución para dispositivos pequeños que tienen cuatro veces la resolución de pantalla normal. Existen varias formas de publicar imágenes diferentes según el tamaño del viewport y la resolución de la pantalla.

Atributo <img> srcset

El atributo srcset permite sugerir varios archivos de imagen, y el navegador selecciona qué imagen solicitar en función de varias consultas de medios, como el tamaño del viewport y la resolución de la pantalla.

Puede haber un solo atributo srcset por elemento <img>, pero ese srcset puede vincularse a varias imágenes. El atributo srcset acepta una lista de valores separados por comas, cada uno de los cuales contiene la URL del recurso, seguida de un espacio y los descriptores de esa opción de imagen. Si se usa un descriptor de ancho, también debes incluir el atributo sizes con una consulta de medios o un tamaño de fuente para cada opción de srcset, excepto la última. Vale la pena leer las secciones de Aprendizaje que abarcan las imágenes responsivas con srcset y las sintaxis descriptivas.

La imagen srcset tiene prioridad sobre la imagen src si hay una coincidencia.

<picture> y <source>

Otro método para proporcionar varios recursos y permitir que el navegador renderice el activo más adecuado es con el elemento <picture>. El elemento <picture> es un elemento contenedor para varias opciones de imágenes que se enumeran en una cantidad ilimitada de elementos <source> y un solo elemento <img> obligatorio.

Los atributos de <source> incluyen srcset, sizes, media, width y height. El atributo srcset es común para img, source y link, pero, por lo general, se implementa de manera ligeramente diferente en la fuente, ya que las consultas de medios se pueden enumerar en el atributo de medios de <srcset>. <source> también admite los formatos de imagen definidos en el atributo type.

El navegador considera cada elemento secundario <source> y elige la mejor coincidencia entre ellos. Si no se encuentran coincidencias, se selecciona la URL del atributo src del elemento <img>. El nombre accesible proviene del atributo alt del elemento <img> anidado. También vale la pena leer las secciones de Aprendizaje que abarcan el elemento <picture> y las sintaxis prescriptivas.

Funciones de rendimiento adicionales

Existen varias funciones de imágenes adicionales que pueden mejorar el rendimiento de tu sitio.

Carga diferida

El atributo loading le indica al navegador habilitado para JS cómo cargar la imagen. El valor predeterminado de eager significa que la imagen se carga de inmediato a medida que se analiza el código HTML, incluso si la imagen está fuera del viewport visible. Si se establece loading="lazy", la carga de la imagen se aplaza hasta que es probable que entre en el viewport. El navegador define "probable" según la distancia entre la imagen y el viewport. Se actualiza a medida que el usuario se desplaza. La carga diferida ayuda a ahorrar ancho de banda y CPU, lo que mejora el rendimiento para la mayoría de los usuarios. Si JavaScript está inhabilitado, por motivos de seguridad, todas las imágenes se establecen de forma predeterminada en eager.

<img src="switch.svg" alt="light switch" loading="lazy" />

Relación de aspecto

Los navegadores comienzan a renderizar el código HTML cuando lo reciben y solicitan recursos cuando los encuentran. Esto significa que el navegador ya está renderizando el HTML cuando encuentra la etiqueta <img> y realiza la solicitud. Además, las imágenes pueden tardar en cargarse. De forma predeterminada, los navegadores no reservan espacio para las imágenes, excepto el tamaño necesario para renderizar el texto alt.

El elemento <img> siempre admitió atributos height y width sin unidades. Estas propiedades dejaron de usarse en favor de CSS. CSS puede definir las dimensiones de la imagen, a menudo estableciendo una sola dimensión, como max-width: 100%;, para asegurarse de que se conserve la relación de aspecto.

Como el CSS suele incluirse en el <head>, se analiza antes de que se encuentre cualquier <img>. Sin embargo, si no se indica explícitamente el height o la relación de aspecto, el espacio reservado es la altura (o el ancho) del texto alt.

Cuando los desarrolladores solo declaran un ancho, la recepción y el procesamiento de imágenes generan un cambio de diseño acumulado, lo que perjudica las métricas web esenciales. Para resolver este problema, los navegadores admiten relaciones de aspecto de imágenes. Incluir los atributos height y width en el elemento <img> actúa como sugerencias de tamaño, ya que informa al navegador sobre la relación de aspecto, lo que permite reservar la cantidad correcta de espacio para la renderización final de la imagen. Cuando el navegador encuentra una sola dimensión, como nuestro ejemplo del 50%, guarda espacio para la imagen según la dimensión de CSS y con la otra dimensión manteniendo la relación de aspecto de ancho a alto.

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

Tus imágenes son responsivas si el CSS se configuró correctamente para que lo sean. Sí, los valores height y width incluidos sin unidades se anulan con CSS. El propósito de incluir estos atributos es reservar el espacio con la relación de aspecto correcta, lo que mejora el rendimiento al reducir el cambio de diseño. La página tardará aproximadamente la misma cantidad de tiempo en cargarse, pero la IU no se desplazará cuando la imagen se renderice en la pantalla.

Otras características de la imagen

El elemento <img> también admite los atributos crossorigin, decoding, referrerpolicy y, en los navegadores basados en Blink, fetchpriority. Si la imagen forma parte de un mapa del servidor, incluye el atributo booleano ismap y anida <img> en un vínculo para los usuarios que no tienen dispositivos de puntero.

El atributo ismap no es necesario ni se admite en el <input type="image" name="imageSubmitName">, ya que las coordenadas x y y de la ubicación del clic se envían durante el envío del formulario, y se agregan los valores al nombre de entrada, si corresponde. Por ejemplo, algo como &imageSubmitName.x=169&imageSubmitName.y=66 se envía con el formulario cuando el usuario hace clic en la imagen y la envía. Si la imagen no tiene un atributo name, se envían las coordenadas X e Y: &x=169&y=66.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre imágenes.