Imágenes adaptables: cómo se relacionan srcset, sizes y DPR

Distingue píxeles del archivo, píxeles CSS y densidad

Un archivo de 800 píxeles puede mostrarse en un espacio de 400 píxeles CSS. Con DPR 2, ese espacio corresponde aproximadamente a 800 píxeles del dispositivo. Es una ayuda para planificar; el navegador conserva la elección final.

Calcula primero el menor valor entre 800 y la anchura de la ventana menos 32. Multiplica ese espacio por DPR, no toda la ventana si la imagen está en una columna estrecha.

Usa descriptores de anchura para diseños variables

El descriptor w indica la anchura intrínseca real del archivo; no es un punto de ruptura. sizes describe el espacio esperado. En el código, a partir de 832 píxeles CSS se usa un espacio de 800; por debajo se descuentan los dos márgenes.

El CSS mostrado forma parte del ejemplo. Si después colocas el componente en media columna, actualiza sizes. Mantener una anchura antigua puede provocar descargas demasiado grandes. Describe el diseño, no una lista de tamaños de pantalla populares.

<img
  src="/images/workspace-800.webp"
  srcset="/images/workspace-400.webp 400w,
          /images/workspace-800.webp 800w,
          /images/workspace-1600.webp 1600w"
  sizes="(min-width: 832px) 800px, calc(100vw - 32px)"
  width="1600" height="1200"
  alt="A desk with a monitor and an open notebook"
  style="display:block;width:calc(100vw - 32px);max-width:800px;height:auto;margin-inline:auto"
>

Calcula un candidato y verifica la elección real

En una ventana de 392 y DPR 2, el espacio es 360 y el objetivo 720 píxeles; el candidato 800w resulta razonable. En una pantalla ancha con DPR 2, el objetivo es 1600. El cálculo explica la selección, pero no obliga al navegador a descargar un archivo concreto.

El navegador puede conservar una imagen grande ya descargada al reducir la ventana. Prueba en una página nueva o recarga después de ajustar ventana y DPR. Genera archivos reales de 400, 800 y 1600 píxeles; renombrar copias de un solo archivo no crea resoluciones distintas.

• Mide la anchura renderizada del elemento.
• Compara currentSrc con la respuesta de imagen en Red.
• Comprueba dimensiones, tipo, caché y bytes transferidos.
• Prueba ventanas estrecha y ancha con DPR 1 y DPR 2.
• Busca desbordamiento horizontal y cambios de posición al cargar.

Reserva los descriptores x para tamaños fijos

Un logotipo mostrado siempre a 120 píxeles CSS puede ofrecer archivos de 120 como 1x y 240 como 2x. Son resoluciones alternativas del mismo tamaño visual. No mezcles x y w en un srcset.

Un recorte diferente para móvil requiere otra decisión: picture y condiciones source permiten cambiar la composición. El texto alternativo debe describir el contenido significativo recibido por el lector.

<img src="/images/mark-120.png"
     srcset="/images/mark-120.png 1x, /images/mark-240.png 2x"
     width="120" height="120" alt="Example project mark">

Planifica proporción y carga

Los atributos width y height reservan espacio mediante la proporción antes de la descarga; no bloquean el tamaño adaptable definido por CSS. Con 4:3, una anchura de 800 produce una altura de 600, y 360 produce 270.

La carga diferida ayuda con imágenes alejadas, pero no retrases indiscriminadamente la imagen principal visible al entrar. Candidatos, compresión, formato y estrategia de carga resuelven costes distintos.

La memoria decodificada tampoco equivale al peso descargado. Un WebP pequeño puede ocupar mucho al decodificarse. Calcula memoria con sus dimensiones y mide los bytes comprimidos del archivo real.

Revisa el componente antes de publicarlo

Mantén juntos anchuras, recorte, proporción, calidad y expresión sizes para actualizarlos con el diseño. Cambiar el máximo de 800 a 1000 exige revisar candidatos.

Verifica src, cada URL de srcset, texto alternativo y espacio reservado. Reproduce la tabla con la calculadora de píxeles CSS y DPR; usa la de proporción para las alturas. El objetivo es que archivos y diseño coincidan en dispositivos reales.