Imágenes y texto alternativo

Un elemento img necesita dos atributos para ser útil: src, que dice dónde está la imagen, y alt, que dice qué muestra cuando no se puede ver.

El elemento img

Las imágenes no se guardan dentro del archivo HTML. La página apunta a ellas, y el navegador busca cada una como un archivo aparte. El elemento <img> es el que apunta. Es un elemento vacío, así que no tiene etiqueta de cierre, y su atributo src contiene la dirección de la imagen, absoluta o relativa, igual que el href de un enlace. Las imágenes son elementos reemplazados: el navegador reemplaza el elemento por la imagen, y la imagen decide su tamaño, salvo que indiques otra cosa.

<img src="images/sourdough.jpg"
     alt="A round sourdough loaf with a dark, cracked crust"
     width="400" height="300">

Los atributos width y height dan el tamaño de la imagen en píxeles, sin unidad. Ponles el tamaño real del archivo. El HTML suele llegar antes que las imágenes, así que sin estos números el navegador acomoda primero el texto y luego lo empuja hacia abajo cada vez que termina de cargar una imagen, lo cual resulta molesto si ya empezaste a leer. Con ellos, el navegador reserva el espacio justo desde el principio. Para mostrar una imagen más pequeña o más grande, usa CSS en lugar de cambiar estos números.

Escribir el texto alternativo

El atributo alt contiene una alternativa en texto. Un lector de pantalla la lee en voz alta, un navegador la muestra cuando el archivo no carga, y los buscadores la leen para entender la imagen. MDN propone una prueba sencilla: ¿qué se perdería si la imagen no apareciera? Escribe eso, en pocas palabras. Para la foto de un producto, describe lo que alguien necesitaría saber para elegirlo. Para una gráfica, da la idea que transmite la gráfica, como Las ventas se triplicaron de enero a marzo, en lugar de Gráfica de barras.

• No empieces con Imagen de o Foto de. Los lectores de pantalla ya anuncian que es una imagen.
• Las imágenes decorativas, como una línea divisoria ondulada, llevan un alt="" vacío. Así los lectores de pantalla las saltan. Omitir alt por completo es distinto: algunos lectores de pantalla leen el nombre del archivo en su lugar.
• Si una imagen es el único contenido de un enlace, su texto alternativo es el texto del enlace, así que describe adónde lleva el enlace (Inicio), no la imagen (Logotipo de pan).
• Si la misma información ya está en el texto junto a la imagen, alt="" evita decirla dos veces.

Figuras y pies de figura

Cuando una imagen va con un pie de figura, envuelve las dos cosas en <figure> y pon el pie en <figcaption>. Así el pie queda ligado a la imagen para las tecnologías de asistencia, algo que no hace un simple párrafo debajo de la imagen. El pie de figura y el texto alternativo tienen trabajos distintos: el pie lo lee todo el mundo, mientras que alt reemplaza la imagen cuando falta. No deben repetirse sin más. Una figura no tiene por qué contener una imagen; un fragmento de código, una tabla o un poema también pueden ser una figura.

Formatos, URL de datos y SVG en línea

Las fotografías suelen ser JPEG o WebP, los gráficos planos de bordes nítidos son PNG, y los dibujos hechos de formas suelen ser SVG, un formato de texto que se mantiene nítido a cualquier tamaño. Una imagen pequeña se puede incluso escribir directamente en el src como una URL de datos que empieza con data:image/svg+xml,; los ejercicios de abajo usan esto para que nada se cargue desde otro sitio. Un SVG también se puede escribir directamente en el HTML con un elemento <svg>. Dale role="img" y un hijo <title> para que los lectores de pantalla tengan un nombre para él. Por último, loading="lazy" en las imágenes que están muy abajo en una página larga le dice al navegador que espere hasta que quien lee se acerque a ellas.

Una regla más de MDN: usa solo imágenes que tengas derecho a usar. Las imágenes que encuentras en internet están protegidas por derechos de autor, salvo que su licencia diga otra cosa, y apuntar tu src al servidor de otra persona sin permiso, lo que se llama hotlinking, además le hace pagar a esa persona por tu tráfico.