Images

Las imágenes decorativas, como gradientes de fondo en botones o imágenes de fondo en secciones de contenido o la página completa, son presentables y se deben aplicar con CSS. Cuando una imagen agrega contexto a un documento, es 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">

El atributo srcset en <img> y el elemento <picture> proporcionan una forma de incluir varias fuentes de imagen con consultas de medios asociadas, cada una con una fuente de imagen de resguardo, lo que permite entregar el archivo de imagen más adecuado según la resolución del dispositivo, las capacidades del navegador y el tamaño del viewport. El atributo srcset permite proporcionar varias versiones de imagen según la resolución y, junto con el atributo sizes, el tamaño de viewport 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 elemento <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 en HTML integrados, HTML también permite mejorar el rendimiento de la renderización de imágenes mediante 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.

HTML también admite la inclusión de imágenes SVG con <svg> directamente, aunque las imágenes SVG con la extensión .svg (o como data-uri) 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. El navegador recupera el recurso y lo renderiza en la página. <img> requiere este atributo; sin él, no hay nada que renderizar.

El atributo alt proporciona texto alternativo para la imagen, además de una descripción de la imagen para quienes no puedan ver la pantalla (como los motores de búsqueda, las tecnologías de accesibilidad y hasta Alexa, Siri y Asistente de Google), y el navegador puede mostrarla si la imagen no se carga. Además de los usuarios con redes lentas o ancho de banda limitado, el texto alt es increíblemente útil en 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 los bugs de VoiceOver.

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

Escribe descripciones eficaces de alt imágenes

Los atributos alt buscan ser cortos y concisos, y proporcionar toda la información relevante que transmite la imagen, a la vez que omiten información que es redundante a otro contenido del documento o que no es útil por otros motivos. Al escribir el texto, el tono debe reflejar el tono del sitio.

Para escribir un texto alternativo eficaz, imagina que le estás leyendo la página completa a una persona que no puede verla. Mediante el uso del elemento semántico <img>, se les informa a los usuarios de lectores de pantalla y los bots que el elemento es una imagen. Es redundante incluir "This is an image/screenshot/photo of" en alt. No es necesario que el usuario sepa 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 su lugar, transmitirás lo que transmite la imagen en relación con el contexto del resto del documento, y lo que transmitas cambiará según el contexto y el contenido del texto que lo rodea.

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

Si la foto forma parte de la página de adopción de Esponjosa en el sitio web de un refugio de animales, el público objetivo son los potenciales padres de perros. El texto debe describir la información transmitida en la imagen que sea relevante para un usuario y que no esté duplicada en el texto que lo rodea. Se recomienda una descripción más larga, como alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth". El texto de una página de adopción suele incluir la especie, la raza, la edad y el género de la mascota en adopción, por lo que no es necesario repetir esto en el texto alternativo. Pero la biografía escrita del perro probablemente no incluya la longitud del pelo, los colores ni las preferencias de juguetes. Ten en cuenta que no describimos la imagen: el posible dueño del perro no necesita saber si el perro está en el interior o al aire libre, o si tiene un collar rojo y una correa azul.

Cuando usas imágenes para la iconografía, como el atributo alt proporciona el nombre de accesibilidad, 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 del disquete de 5 pulgadas es save. Si se usan dos íconos de Esponjosa para indicar las prácticas recomendadas y los antipatrones, el perro sonriente con una boina verde podría tener el valor alt="good" establecido, mientras que el perro gruñón con una boina roja podría leer alt="bad". Dicho esto, solo usa iconografía estándar y, si usas íconos no estándar, como el de esponjoso bueno o malo, incluye una leyenda y asegúrate de que los íconos no sean las únicas formas 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 aprenda de la imagen en lugar de describir el aspecto. Si bien una imagen definitivamente puede valer más que mil palabras, la descripción debe transmitir de manera concisa todo lo que se aprende.

Omite información que el usuario ya conoce del contexto y sobre la que se le informa en el contenido. Por ejemplo, si estás en una página de un instructivo sobre cómo cambiar la configuración del navegador y la página consiste en hacer clic en íconos en el navegador Chrome, la URL de la página en la captura de pantalla no es importante. Limita la alt al tema en cuestión: cómo cambiar la configuración. El alt podría ser "El ícono de configuración está 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 es una captura de pantalla ni saber dónde navegaba el escritor cuando escribió las instrucciones. La descripción de la imagen se basa en el contexto por el que se incluyó en primer lugar.

Si en la captura de pantalla se 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 brinda información que no esté en el texto circundante.

Si la imagen no proporciona información adicional o es meramente decorativa, el atributo debería estar ahí, 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 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 meramente decorativa. La página también tiene dos imágenes de fondo, que también son decorativas y, como se agregan con CSS, no son accesibles.

La revista, que es meramente decorativa, tiene un atributo alt vacío y un role de none, ya que la imagen es un SVG puramente representativo. Si es significativo, las imágenes SVG deben incluir el role="img".

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

Hay tres opiniones en la parte inferior de la página, cada una con una imagen del cartel. Por lo general, el texto alt es el nombre de la persona que se muestra.

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

En cambio, como se trata de una página de broma, debes transmitir lo que podría no ser evidente para los usuarios con visión reducida a fin de que no pierdan el humor. Usamos la función de máquina original como alt en lugar de usar el 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, tendrías que dar una descripción mínima de cómo es el profesor para que el posible alumno pueda reconocerlo cuando ingrese 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 chistes, proporciona la información que sea relevante 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 estuvieras leyendo la página por teléfono a un amigo, no le importaría cómo se ve el punto rojo. En este caso, la historia de la referencia de la película es importante.

Cuando escribas texto descriptivo, ten en cuenta qué información transmite la imagen que sea importante y relevante para el usuario e inclúyela. Recuerda que el contenido del atributo alt de una imagen difiere según el contexto. Toda la información que se transmite en una imagen a la que puede acceder un usuario vidente y que es relevante para el contexto es lo que se debe transmitir; nada más. Sé breve, preciso y útil.

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

Imágenes responsivas

Hay una infinidad de tamaños de viewports. También hay diferentes resoluciones de pantalla. No te recomendamos desperdiciar el ancho de banda de un usuario móvil mostrándole una imagen lo suficientemente ancha como para un monitor de pantalla grande. Sin embargo, es posible que quieras publicar imágenes de mayor resolución para dispositivos pequeños que tienen cuatro veces la resolución de pantalla normal. Hay varias formas de entregar diferentes imágenes 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, incluidos el tamaño del viewport y la resolución de 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 con la URL del recurso seguida de un espacio seguido de descriptores para 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 el tamaño de origen para cada opción srcset que no sea la última. Vale la pena leer las secciones de aprendizaje sobre imágenes responsivas con srcset y sintaxis descriptiva.

La imagen srcset tendrá prioridad sobre la imagen src si se detecta una coincidencia.

<picture> y <source>

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

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

El navegador considerará cada elemento <source> secundario y elegirá la mejor coincidencia entre ellos. Si no se encuentran coincidencias, se seleccionará la URL del atributo src del elemento <img>. El nombre accesible proviene del atributo alt del <img> anidado. También vale la pena leer las secciones Más información que abordan el elemento <picture> y la sintaxis prescriptiva.

Funciones de rendimiento adicionales

Carga diferida

El atributo loading le indica al navegador habilitado para JS cómo cargar la imagen. El valor eager predeterminado significa que la imagen se carga inmediatamente mientras se analiza el HTML, incluso si está fuera del viewport visible. Si configuras loading="lazy", se aplaza la carga de la imagen hasta que sea probable que ingrese al viewport. El navegador define la opción "Likely" en función de la distancia a la que está la imagen del 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 establecerán de forma predeterminada como eager.

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

Relación de aspecto

Los navegadores comienzan a renderizar el código HTML cuando se recibe y, cuando lo encuentran, realizan solicitudes de recursos. 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 un poco en cargarse. De forma predeterminada, los navegadores no reservan espacio para imágenes que no sean del tamaño necesario para renderizar texto alt.

El elemento <img> siempre ha admitido los atributos height y width sin unidades. Estas propiedades dejaron de usarse y se reemplazaron por CSS. CSS puede definir las dimensiones de la imagen y, a menudo, establecer una sola dimensión, como max-width: 100%;, para garantizar que se conserve la relación de aspecto. Como, por lo general, CSS se incluye en <head>, se analiza antes de que se encuentre cualquier <img>. Sin embargo, sin enumerar explícitamente la height o la relación de aspecto, el espacio reservado es la altura (o el ancho) del texto alt. Como la mayoría de los desarrolladores solo declaran un ancho, la recepción y el procesamiento de imágenes genera un cambio de diseño acumulativo, que afecta las Métricas web. Para solucionar este problema, los navegadores admiten relaciones de aspecto de imagen. La inclusión de atributos height y width en <img> actúa como sugerencias de tamaño, que informa al navegador sobre la relación de aspecto, lo que permite reservar la cantidad correcta de espacio para la renderización de imágenes en algún momento. Si incluyes un valor de alto y ancho en una imagen, el navegador conocerá la relación de aspecto. Cuando el navegador encuentra una sola dimensión, como nuestro ejemplo del 50%, ahorra espacio para que la imagen cumpla con la dimensión de CSS y, con la otra dimensión, mantiene la relación de aspecto de ancho y alto.

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

Tus imágenes seguirán siendo responsivas si el CSS se configuró correctamente para que sea responsiva. Sí, los valores height y width sin unidades incluidos se anularán con CSS. El propósito de incluir estos atributos es reservar el espacio en la relación de aspecto correcta para mejorar el rendimiento mediante la reducción del cambio de diseño. La página tardará aproximadamente el mismo tiempo en cargarse, pero la IU no saltará cuando la imagen se pinta en la pantalla.

Otras características de las imágenes

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

El atributo ismap no es necesario ni se admite en <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, se enviará algo como &imageSubmitName.x=169&imageSubmitName.y=66 con el formulario cuando el usuario haga clic en la imagen y la envíe. Si la imagen no tiene un atributo name, se envían el valor x y el atributo y: &x=169&y=66.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre imágenes.