Imágenes responsivas en HTML: srcset, sizes y picture

Las imágenes responsivas resuelven un problema: las imágenes son casi siempre lo que más pesa de una página. Un celular no necesita descargar una foto de 2,000 píxeles para mostrarla en 400. Con srcset, sizes y <picture>, el navegador elige la versión justa para cada pantalla.

srcset y sizes: el mismo dibujo, varios tamaños

<img
  src="https://decodigo.com/wp-content/uploads/2026/10/decodigo_placa_raspberry-pi-5.jpg"
  srcset="https://decodigo.com/wp-content/uploads/2026/10/decodigo_placa_raspberry-pi-zero-2-w.jpg 400w,
          https://decodigo.com/wp-content/uploads/2026/10/decodigo_placa_raspberry-pi-5.jpg 640w"
  sizes="(min-width: 40rem) 50vw, 100vw"
  alt="Placa Raspberry Pi vista desde arriba"
  width="640" height="420"
  loading="lazy" decoding="async">

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

En srcset va una lista de archivos con su ancho real en píxeles (400w, 640w). En sizes, cuánto va a ocupar la imagen en la página: aquí, la mitad de la ventana (50vw) a partir de 40 rem y todo el ancho por debajo. Con esos dos datos y la densidad de la pantalla, el navegador elige. En una ventana de 720 píxeles con densidad normal, la imagen ocupará 360 y los tres navegadores eligieron decodigo_placa_raspberry-pi-zero-2-w.jpg, la de 400; en una pantalla de alta densidad habrían elegido la de 640.

En este ejemplo las dos versiones son fotos distintas para que se note cuál se eligió; en la práctica son la misma foto a distintos tamaños, que puedes generar con cualquier editor de imágenes o con un servicio de tu hosting.

picture: otro formato u otro recorte

<picture>
  <source type="image/avif" srcset="foto.avif">
  <source type="image/webp" srcset="foto.webp">
  <img src="foto.jpg" alt="Fachada del café" width="1200" height="800">
</picture>

El navegador recorre los source en orden y usa el primero cuyo formato entiende; si ninguno le sirve, usa el img, que es obligatorio y el que lleva el alt. AVIF y WebP pesan bastante menos que JPEG con la misma calidad. Con media en vez de type, picture sirve también para cambiar el recorte (una foto apaisada en la PC y una vertical en el celular).

Que la página no dé saltos

• width y height con el tamaño real: el navegador calcula la proporción y reserva el hueco antes de descargar la imagen. Con max-width: 100%; height: auto en el CSS, la imagen se sigue encogiendo sin deformarse.
• loading="lazy" retrasa la descarga hasta que la imagen se acerca a la pantalla. Úsalo en las imágenes de más abajo, nunca en la principal de arriba.
• decoding="async" deja que la imagen se descomprima sin frenar el resto de la página.

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.