0Pricing
HTML Academy · Lección

Imágenes adaptables con srcset y sizes

Sirva imágenes con el tamaño adecuado para distintas densidades de pantalla.

Imágenes adaptables con srcset y sizes es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

El problema de las imágenes únicas

Servir una única imagen grande a todos los dispositivos desperdicia ancho de banda en las pantallas pequeñas:

  • Un teléfono con una pantalla de 390px no necesita una imagen de 2400px
  • Un monitor 4K merece una imagen de mayor resolución que una de 96dpi
  • Las imágenes adaptables sirven la imagen adecuada para la pantalla adecuada

El atributo srcset

srcset proporciona una lista de fuentes de imagen con sus anchuras:

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

Descriptores de densidad de píxeles

Utilice los descriptores 1x, 2x y 3x para imágenes de tamaño fijo con distintas resoluciones:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

El atributo sizes

sizes indica al navegador qué anchura tendrá la imagen en distintos tamaños de la ventana gráfica:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

Cómo selecciona el navegador una imagen

El navegador calcula: valor de sizes × densidad de píxeles del dispositivo para elegir una opción de srcset:

  • Ventana gráfica de 600px, DPR de 2×, size=100vw → necesita una imagen de 1200px → elige 1600w
  • Ventana gráfica de 1200px, DPR de 1×, size=50vw → necesita una imagen de 600px → elige 800w
  • Una vez cargada, el navegador guarda la imagen en caché y puede no volver a cargarla

Valor predeterminado de sizes

Sin sizes, el navegador supone que la imagen ocupa toda la anchura de la ventana gráfica (100vw):

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

Descriptores de anchura de srcset frente a descriptores x

Hay dos modos de srcset:

  • Descriptores de anchura (w): con sizes, permiten una selección fluida y consciente del diseño
  • Descriptores de densidad de píxeles (x): para imágenes de tamaño fijo con varias resoluciones

Utilice descriptores w para la mayoría de las imágenes adaptables. Utilice x para iconos, logotipos y elementos de tamaño fijo.

Generar archivos srcset

Herramientas que generan variantes de imágenes adaptables:

  • Sharp (Node.js): redimensionamiento programático de imágenes
  • Squoosh: funciona en el navegador y permite comparaciones visuales
  • Cloudinary / Imgix: redimensionamiento bajo demanda mediante URL
  • Complementos de Webpack / Vite: generación durante la compilación

srcset con WebP y alternativa

Combine srcset con <picture> para proporcionar una alternativa de formato:

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

Dirección artística frente a cambio de resolución

Hay dos tipos de problemas con las imágenes adaptables:

  • Cambio de resolución: la misma imagen con distintas resoluciones → utilice srcset + sizes
  • Dirección artística: distinto recorte o composición en diferentes pantallas → utilice <picture> con <source media>

Probar imágenes adaptables

Cómo comprobar que srcset funciona:

  • Abra DevTools → pestaña Network → filtre por Images
  • Configure la emulación del dispositivo con distintos tamaños de ventana gráfica y DPR
  • Vuelva a cargar la página y compruebe qué archivo solicita el navegador
  • Compruebe también Lighthouse → Performance → auditoría Properly sized images

Compatibilidad de srcset con los navegadores

La compatibilidad de los navegadores con srcset es excelente:

  • Es compatible con todos los navegadores modernos (Chrome, Firefox, Safari y Edge)
  • La alternativa src funciona en navegadores antiguos
  • No se necesita ningún polyfill para usarlo en producción

Comprobación rápida

¿Qué indica el atributo sizes al navegador?

Resumen: srcset y sizes

Aspectos esenciales de las imágenes adaptables:

  • srcset: lista de archivos de imagen con sus anchuras intrínsecas o densidades de píxeles
  • sizes: condiciones de medios que describen qué anchura tendrá la imagen al mostrarse
  • El navegador selecciona la mejor coincidencia: valor de sizes × DPR del dispositivo
  • Descriptores de anchura (w) para imágenes fluidas; x para elementos de tamaño fijo
  • Proporcione siempre src como alternativa

Preguntas frecuentes

¿La lección «Imágenes adaptables con srcset y sizes» es gratis?

Sí — el texto completo de «Imágenes adaptables con srcset y sizes» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Imágenes adaptables con srcset y sizes»?

Sirva imágenes con el tamaño adecuado para distintas densidades de pantalla. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Imágenes adaptables con srcset y sizes»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. El elemento img: src, alt, width y height
  2. Imágenes adaptables con srcset y sizes
  3. El elemento picture para dirección artística
  4. figure y figcaption
← Volver a HTML Academy