Imágenes en HTML

Las imágenes se insertan con la etiqueta <img>. Es una etiqueta vacía: no tiene contenido ni etiqueta de cierre.

<img src="fotos/rocodromo.jpg" alt="Escaladora en un muro de bloque con presas de colores">

Los dos atributos obligatorios

src (source, origen) es la ruta de la imagen. Funciona igual que el href de los enlaces: puede ser una URL completa o una ruta relativa a tu archivo.

alt (texto alternativo) describe la imagen. Tiene tres usos:

Los lectores de pantalla lo leen en voz alta a las personas ciegas.
Se muestra si la imagen no carga.
Google lo usa para entender la imagen y mostrarla en la búsqueda de imágenes.

Describe lo importante de la imagen en una frase. Si la imagen es solo decorativa, deja alt="" vacío (pero ponlo), y el lector de pantalla la ignorará.

Tamaño

Indica el ancho y el alto originales en píxeles:

<img src="logo.png" alt="Logo de DevSchool" width="200" height="80">

Así el navegador reserva el hueco antes de que la imagen cargue y la página no “salta” mientras se carga. Para que se adapte a pantallas pequeñas, añade esto en tu CSS:

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

¿Qué formato uso?

Formato	Úsalo para
JPG	Fotografías
PNG	Capturas de pantalla e imágenes con transparencia
WebP	Fotos y gráficos: pesa menos que JPG y PNG
SVG	Logos e iconos: es vectorial y se ve nítido a cualquier tamaño

Antes de subir una foto, redúcela. Una foto de móvil puede pesar 4 MB; para una web basta con unos 100-200 KB. Herramientas como Squoosh lo hacen gratis desde el navegador.

Imágenes con pie de foto

Si la imagen necesita un pie de foto, usa <figure> y <figcaption>:

<figure>
  <img src="grafico.png" alt="Gráfico de visitas: suben un 40 % en verano">
  <figcaption>Visitas a la web durante el último año.</figcaption>
</figure>

Imágenes adaptadas a cada pantalla

Un móvil no necesita descargar la misma foto de 2000 píxeles que un monitor grande. Con srcset ofreces varias versiones y el navegador elige la más adecuada:

<img
  src="paisaje-800.jpg"
  srcset="paisaje-400.jpg 400w, paisaje-800.jpg 800w, paisaje-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Playa del Sardinero al atardecer"
>

srcset lista los archivos y el ancho real de cada uno (400w = 400 píxeles).
sizes indica cuánto va a ocupar la imagen en pantalla: todo el ancho en móviles y 800px en el resto.

Y con <picture> puedes ofrecer formatos modernos con una alternativa para navegadores antiguos:

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Descripción de la foto">
</picture>

El navegador usa el primer <source> que sepa mostrar. El <img> del final es obligatorio: es la opción por defecto y el que lleva el alt.

Carga diferida

Con loading="lazy" el navegador solo descarga la imagen cuando la persona se acerca a ella haciendo scroll. Úsalo en las imágenes que están más abajo de la página:

<img src="galeria-1.jpg" alt="..." loading="lazy">