Curso de HTML / Imágenes adaptables con srcset, sizes y picture

Curso de HTML

Creado 2026-10-26 Última modificación 2026-10-26

Las imágenes adaptables permiten ofrecer varios archivos para que el navegador elija una resolución apropiada o un encuadre diferente. Utiliza srcset y sizes para resoluciones de una misma composición, y picture si necesitas cambiar el recorte según una condición. La elección también puede depender de la densidad de píxeles, el zoom y la caché.

Preparar los cuatro archivos

Descarga las tres versiones horizontales y el recorte cuadrado siguientes. Guárdalos junto a index.html sin cambiar sus nombres para que funcionen las rutas de los ejemplos.

Las versiones de 480, 960 y 1600 píxeles muestran la misma composición. La de 800 × 800 recorta el paisaje para centrar el árbol. Si necesitas repasar src, la alternativa textual o las dimensiones, utiliza la inserción básica de imágenes.

Resolución variable: descriptores w y sizes

Los valores 480w, 960w y 1600w describen la anchura real de cada archivo. sizes informa del ancho de presentación previsto según las condiciones del viewport, la zona que utiliza el navegador para distribuir la página.

<img class="example-fluid"
  src="html-image-sample-lake-tree-960-v1.webp"
  srcset="html-image-sample-lake-tree-480-v1.webp 480w,
          html-image-sample-lake-tree-960-v1.webp 960w,
          html-image-sample-lake-tree-1600-v1.webp 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="A tree on a small island in a lake, with mountains beyond"
  width="1600" height="900">

Este ejemplo presupone un ancho aproximadamente igual al viewport hasta 800 píxeles CSS y un máximo de 800 por encima de ese límite. sizes debe reflejar el diseño real; no es una orden que sustituya a CSS ni la anchura del archivo descargado. La imagen conserva src como alternativa.

.example-fluid {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
}

Coloca este CSS en head o en una hoja enlazada. Solo se aplica a la imagen con la clase example-fluid. Aunque la ventana sea estrecha, una densidad de píxeles elevada puede justificar un archivo mayor. No prometas que el navegador escogerá siempre el más pequeño en un móvil.

Densidad para un ancho fijo: 1x y 2x

Si la imagen se presenta siempre a 480 píxeles CSS, puedes ofrecer una candidata de 480 píxeles como 1x y otra de 960 como 2x. Con esta forma no se utiliza sizes.

<img class="example-fixed"
  src="html-image-sample-lake-tree-480-v1.webp"
  srcset="html-image-sample-lake-tree-480-v1.webp 1x,
          html-image-sample-lake-tree-960-v1.webp 2x"
  alt="A tree on a small island in a lake, with mountains beyond"
  width="480" height="270">

.example-fixed {
  display: block;
  width: 480px;
  height: auto;
}

El CSS de example-fluid no afecta a example-fixed. Este segundo ejemplo fija el ancho de presentación a 480 píxeles y puede desbordar una zona más estrecha; no es un diseño adaptable a cualquier contenedor. Si el ancho cambia con la composición, vuelve al planteamiento con w y sizes. No mezcles descriptores w y x en un mismo srcset.

Cambiar la composición con picture

Para modificar el encuadre usa condiciones en source. Aquí el límite de 600 píxeles selecciona el recorte cuadrado; por encima se utiliza el paisaje de respaldo.

<picture class="example-picture">
  <source media="(max-width: 600px)"
          srcset="html-image-sample-lake-tree-square-800-v1.webp"
          width="800" height="800">
  <img src="html-image-sample-lake-tree-960-v1.webp"
       alt="A tree on a small island in a lake, with mountains beyond"
       width="960" height="540">
</picture>

picture sigue necesitando un img. La alternativa textual se escribe en él. Las dimensiones de cada versión ayudan a representar proporciones distintas, pero elegir el archivo y ajustarlo al contenedor son tareas separadas:

.example-picture img {
  display: block;
  max-width: 100%;
  height: auto;
}

La imagen de este artículo muestra el archivo cuadrado: no demuestra por sí misma un cambio automático según el ancho. Para observarlo debes ejecutar el ejemplo picture con sus archivos y CSS.

Verificar la selección real del navegador

Crea un documento completo con meta name="viewport" content="width=device-width, initial-scale=1" en head. Pon cada ejemplo HTML dentro de body y su CSS en head. Comprueba primero que puedes abrir los cuatro archivos de imagen.

Abre el panel Network de las herramientas de desarrollo, desactiva la caché y recarga después de cambiar el ancho. Para picture, compara 600 y 601 píxeles: deben mostrar el recorte cuadrado y el paisaje, respectivamente. En Console puedes consultar los elementos usados por los ejemplos:

document.querySelector('.example-fluid').currentSrc
document.querySelector('picture img').currentSrc

currentSrc identifica el archivo realmente seleccionado. En la prueba de resolución, conserva el mismo ancho y cambia solo la densidad o el zoom. Si ya estaba cargada una imagen grande, estrechar la ventana puede no reemplazarla inmediatamente por una pequeña; iguala las condiciones de caché antes de comparar.

Si se elige un archivo inesperado, comprueba sus dimensiones reales, los descriptores y la correspondencia de sizes con CSS. Distingue resolución de dirección artística: la primera cambia los píxeles de una misma composición y la segunda cambia qué parte de la escena se muestra. La guía de imágenes adaptables de MDN y la especificación de imágenes de WHATWG explican las condiciones de selección.

Curso de HTML