Images

Imágenes decorativas, como gradientes de fondo en botones o imágenes de fondo en secciones de contenido o la página completa son presentacionales y deben aplicarse con CSS. Cuando una imagen agrega contexto a un documento, es contenido y se debe incorporados con HTML.

El método principal para incluir imágenes es la etiqueta <img> con el src. que hace referencia a un recurso de imagen y al 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 entregar el archivo de imagen más adecuado según la las capacidades del navegador y el tamaño de la vista del puerto. El atributo srcset permite proporcionar varias versiones de imágenes según la resolución y, junto con el atributo sizes, el tamaño del 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 imagen responsiva HTML integrados, HTML también habilita el uso de y el rendimiento de la renderización que se debe mejorar a través de varios atributos. La etiqueta <img> (y, por lo tanto, los botones gráficos de envío <input type="image">) Puede incluir los 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 usando directamente <svg>, a través de SVG Las imágenes 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. Luego, el navegador recupera el recurso y lo renderiza en la página. <img> requiere este atributo. sin él, no hay para su renderización.

El atributo alt proporciona texto alternativo para la imagen y una descripción para quienes no pueden verla. pantalla (por ejemplo, en motores de búsqueda y tecnologías de asistencia, o incluso en Alexa, Siri y el Asistente de Google), y el navegador puede mostrarla si la imagen no se carga. Además de los usuarios con redes lentas o con un ancho de banda limitado, el texto alt es increíblemente útil en HTML. correos electrónicos, 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 del tipo de archivo SVG, incluye también role="img", que debido a errores de VoiceOver.

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

Escribe descripciones de imágenes de alt eficaces

Los atributos alt tienen como objetivo ser breves y concisos, y proporcionar toda la información relevante que transmite la imagen mientras se omite. información redundante para otros contenidos del documento o que de otro modo no resulta útil. Al escribir el texto, el tono debe reflejar el tono del sitio.

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

Por lo general, no dirías: "Esta es una imagen granulada de un perro con un sombrero rojo". En su lugar, se retransmite cuál es la imagen transmitir 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 tiene un avatar junto a un opinión sobre el alimento para perros Yuckymeat, alt="Fluffy" es suficiente.

Si la foto es parte de la página de adopción de Esponja en el sitio web de un refugio de animales, el público objetivo es el posible perro. superior. El texto debe describir la información transmitida en la imagen que es relevante para un usuario y que no está duplicada. en el texto que lo rodea. Es adecuado usar 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 generalmente incluye la especie, la raza, la edad y el género de la mascota en adopción. por lo que no es necesario que se repita en el texto alternativo. Pero la biografía escrita del perro probablemente no incluye la longitud del pelo, los colores o preferencias de juguetes. Ten en cuenta que no describimos la imagen: el posible propietario no necesita saber si el perro es en interiores o al aire libre, o que tenga 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 se ve por ejemplo, una casa tiene home como texto alternativo. La descripción del ícono de disquete de 5 pulgadas es save. Si hay dos íconos de Esponjosita para indicar prácticas recomendadas y antipatrones, el perro sonriente con una boina verde podría tener establecido el parámetro alt="good", mientras que el perro gruñón en una boina roja podría decir alt="bad". Dicho esto, solo usa iconografía estándar y, si usas íconos no estándar como los peludos malos y buenos, incluye una leyenda y asegúrate de que los iconos 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 aprendió de ella en lugar de describir su apariencia. 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 la información que el usuario ya conozca del contexto y sobre la que se le informe 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 íconos en el navegador Chrome, la URL de la página en la captura de pantalla no es importante. Limita las 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" o “taller de aprendizaje automático” ya que el usuario no necesita saber que es una captura de pantalla ni saber dónde navegaba el técnico cuando escribió el documento. 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 el contenido de la página como instrucciones y debes proporcionar una cadena vacía como atributo alt, ya que la imagen no proporciona información que no está en el texto que lo rodea.

Si la imagen no proporciona información adicional o es meramente decorativa, el atributo debería estar ahí de todos modos, 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 Eva, y tres avatares de una licuadora, una aspiradora y una tostadora. El 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; También son decorativos y, a medida que se agregan con CSS, son inaccesibles.

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

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

Hay tres reseñas en la parte inferior de la página, cada una con una imagen del póster. Por lo general, el texto alt es el nombre de la persona retratada.

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

En cambio, debido a que esta es una página de broma, debes comunicar lo que puede no ser evidente para los usuarios con baja visión para que no se pierdan humor; usamos la función de máquina original como alt en lugar de usar el nombre del carácter:

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

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

Si este fuera un sitio real, darías la descripción mínima de cómo se ve el profesor para que un posible estudiante podría hacerlo. reconocerlos cuando ingresan 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 este es un sitio de chistes, debes proporcionar la información que sea relevante en el contexto del chiste:

<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 lees la página a un amigo por teléfono, a esa persona no le importaría cómo se ve el punto rojo. En este caso, el es importante la historia de la referencia cinematográfica.

Cuando escribas texto descriptivo, ten en cuenta qué información transmite la imagen que es importante y relevante para el usuario. incluir eso. Recuerda que el contenido del atributo alt de una imagen varía según el contexto. Toda la información que se transmite en una imagen a la que un usuario vidente puede acceder y es relevante para el contexto es lo que se debe transmitir; nada más. Debe ser 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

Existen muchos tamaños de viewports. También hay diferentes resoluciones de pantalla. No quiere perder a los usuarios de dispositivos móviles ancho de banda proporcionándoles una imagen lo suficientemente ancha como para un monitor de pantalla grande, pero quizás prefieras entregar para dispositivos pequeños con una resolución de pantalla cuatro veces superior. Existen varias formas de entregar imágenes diferentes según el tamaño de viewport y la resolución de 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 se puede vincular a varias imágenes. El srcset acepta una lista de valores separados por comas, cada uno con la URL del recurso seguida de un espacio seguido de descriptores de archivo para esa opción de imagen. Si se usa un descriptor de ancho, también debes incluir el atributo sizes con un elemento multimedia. tamaño de la búsqueda o la fuente para cada opción de srcset que no sea la última. Vale la pena leer las secciones de aprendizaje que abarcan imágenes responsivas con srcset y sintaxis descriptiva.

Si se encuentra una coincidencia, la imagen srcset tendrá prioridad sobre la imagen src.

<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 contenedor. para varias opciones de imagen enumeradas en una cantidad ilimitada de <source> y un único 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, en general, se implementa de forma un poco diferente en la fuente ya que estas consultas 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, la URL del atributo src del elemento <img>. El nombre de accesibilidad 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

Carga diferida

El atributo loading le indica al navegador con JS habilitado cómo cargar la imagen. El valor predeterminado eager significa que la imagen está se cargará de inmediato mientras se analiza el código HTML, aunque la imagen se encuentre fuera del viewport visible. Estableciendo loading="lazy" la carga de la imagen se aplaza hasta que llegue al viewport. “Probable” se define por el navegador en función de la distancia la imagen es desde el viewport. Esta información 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 configurarán como eager de forma predeterminada.

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

Relación de aspecto

Los navegadores comienzan a renderizar el código HTML cuando se reciben y realizan solicitudes de elementos cuando se encuentran. Esto significa que el navegador está ya renderiza 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 a fin de procesar el texto alt.

El elemento <img> siempre admitió atributos height y width sin unidades. Estas propiedades dejaron de usarse a favor de los 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, se incluye CSS en <head>, se analiza antes de que se encuentre cualquier <img>. Sin embargo, sin enumerar de forma explícita los objetos height o 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 la renderización de imágenes genera un cambio de diseño acumulativo que afecta las métricas web. Para resolver este problema, los navegadores admiten las relaciones de aspecto de las imágenes. La inclusión de los atributos height y width en <img> funciona como sugerencias de tamaño, que informan al navegador de la relación de aspecto y habilitan la opción de espacio que se reservará para la renderización eventual de la imagen. Al incluir un valor de altura y ancho en una imagen, el navegador conoce la relación de aspecto de esa imagen. 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 la otra dimensión mantenga 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 sean responsivas. Sí, se incluye sin unidades Se anularán los valores height y width con CSS. El propósito de incluir estos atributos es reservar el espacio en la relación de aspecto correcta, lo que mejora el rendimiento reduciendo el cambio de diseño. La página seguirá ocupando aproximadamente la misma cantidad tiempo de carga, pero la IU no salta cuando la imagen se pinta en la pantalla.

Otras características de las imágenes

El elemento <img> también admite crossorigin, decoding y referrerpolicy, y, en los navegadores basados en Blink, fetchpriority. Poco frecuente; si la imagen es parte de un mapa del servidor, incluye el atributo booleano ismap. y anida el <img> en un vínculo para los usuarios sin dispositivos apuntadores.

El atributo ismap no es necesario (ni se admite) en <input type="image" name="imageSubmitName"> como x y y. las coordenadas de la ubicación del clic se envían durante el envío del formulario y se adjuntan los valores al nombre ingresado, 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. antes de enviarlo. Si la imagen no tiene un atributo name, se envían la x e y: &x=169&y=66.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre imágenes.