Cómo srcset y picture eligen la imagen que carga su navegador

Abra la misma página web en un teléfono y en una computadora de escritorio, y la fotografía puede parecer idéntica. Detrás de escena, los dos dispositivos pueden estar descargando archivos diferentes. El teléfono puede recibir un WebP de 640 píxeles, mientras que una computadora portátil de alta densidad recibe un AVIF de 1.600 píxeles. Esa elección suele estar controlada por srcset, sizes y el elemento <picture>.

Las imágenes responsivas son buenas para los visitantes. Impiden que una pantalla pequeña descargue un archivo varias veces más grande de lo que necesita. Pueden resultar confusos cuando realiza una copia de seguridad de su propio sitio, verifica la calidad de la imagen o intenta comprender por qué un extractor devolvió varias URL para una imagen.

La selección deja de parecer mágica del navegador una vez que lees el marcado. Puede ver qué archivo se cargó, qué alternativas estaban disponibles y si la página muestra una versión más grande.

Por qué una imagen tiene varios archivos

Los editores web crean variantes de imágenes por dos razones principales: resolución y presentación.

El cambio de resolución significa que los archivos muestran la misma composición en diferentes dimensiones. Una página puede ofrecer copias de 480, 960, 1440 y 2400 píxeles de ancho. El navegador elige uno que debería verse nítido sin desperdiciar demasiado ancho de banda.

La dirección de arte es diferente. La versión para teléfono puede tener un recorte vertical ajustado, mientras que la versión de escritorio es un paisaje amplio. El sujeto permanece visible aunque la composición cambie. El elemento <picture> se usa comúnmente para esto.

La negociación de formato es otro uso. Un <picture> puede ofrecer AVIF y WebP a los navegadores que los admitan, con un respaldo JPG para software más antiguo.

Estos mecanismos pueden superponerse, por lo que una ranura visual puede hacer referencia a una docena de archivos.

El papel de src

El familiar atributo src proporciona una URL de imagen:

<img src="lake-800.jpg" alt="A lake below a mountain ridge">

Sin un marcado responsivo, todos los navegadores solicitan ese archivo. CSS puede hacer que parezca más pequeño, pero el recurso descargado sigue siendo el mismo.

Cuando srcset está presente, src sigue siendo útil como alternativa y puede considerarse candidato. No es seguro asumir que src sea la mejor o la versión más grande. En un navegador moderno, a menudo se seleccionará un candidato de srcset.

Reading width descriptors in srcset

Un srcset basado en ancho enumera los archivos y sus anchos intrínsecos:

<img
  src="lake-800.jpg"
  srcset="lake-480.jpg 480w,
          lake-800.jpg 800w,
          lake-1280.jpg 1280w,
          lake-2000.jpg 2000w"
  sizes="(max-width: 700px) 92vw, 760px"
  alt="A lake below a mountain ridge"
>

La etiqueta 480w dice que el primer archivo tiene intrínsecamente 480 píxeles CSS de ancho. No indica al navegador que lo muestre a 480 píxeles. El atributo sizes estima el ancho que aparecerá la imagen en el diseño.

En este ejemplo, la imagen ocupa aproximadamente el 92 por ciento de la ventana gráfica en pantallas de hasta 700 píxeles. En pantallas más grandes, el ancho de su diseño es de 760 píxeles. El navegador combina esa información con la densidad de píxeles del dispositivo y sus propias decisiones sobre recursos.

Un teléfono de 390 píxeles de ancho podría mostrar la imagen con alrededor de 359 píxeles CSS de ancho. En una pantalla de 2x, aproximadamente 718 píxeles de origen son útiles, por lo que el navegador puede seleccionar el candidato de 800 píxeles. Un escritorio de densidad estándar que muestre la ranura a 760 píxeles podría elegir ese mismo archivo. Una computadora de escritorio 2x podría elegir 1280 o 2000.

Al navegador se le permite cierta discreción. El estado de la caché, las condiciones de conexión y los detalles de implementación pueden afectar la solicitud final. srcset describe candidatos, no es una promesa de que siempre se cargará un archivo exacto.

Descriptores de densidad de lectura

Los candidatos basados ​​en densidad utilizan 1x, 2x y, a veces, 3x:

<img
  src="icon.png"
  srcset="icon.png 1x, icon@2x.png 2x, icon@3x.png 3x"
  alt="Application icon"
>

Este enfoque es adecuado para imágenes con un tamaño de visualización predecible, como un avatar o un gráfico de interfaz pequeño. Una pantalla 2x generalmente recibe el archivo 2x.

No mezcle descriptores de ancho y descriptores de densidad en el mismo srcset. Resuelven problemas relacionados con diferente información.

¿Qué tamaños realmente describe?

El atributo sizes a menudo se malinterpreta. Describe el ancho de diseño esperado de la imagen, no las dimensiones de los archivos fuente.

El navegador evalúa las condiciones de izquierda a derecha y utiliza la primera coincidencia. El valor final actúa como predeterminado:

sizes="(max-width: 500px) 100vw,
       (max-width: 900px) 70vw,
       720px"

Si sizes no es exacto, el navegador puede elegir un archivo que sea innecesariamente grande o demasiado pequeño. Una página que dice que una imagen será 100vw aunque ocupe la mitad de la pantalla puede desperdiciar ancho de banda. Una página que subestima la ranura puede causar suavidad en las pantallas de alta densidad.

Al diagnosticar una descarga borrosa, compare el valor sizes declarado con el ancho real renderizado de la imagen. Ese desajuste puede explicar por qué se seleccionó a un candidato pequeño.

Cómo el elemento de imagen agrega reglas

El elemento <picture> envuelve uno o más elementos <source> y un recurso <img>:

<picture>
  <source
    media="(max-width: 600px)"
    srcset="portrait-600.avif 1x, portrait-1200.avif 2x"
    type="image/avif"
  >
  <source
    srcset="wide-900.webp 900w, wide-1800.webp 1800w"
    type="image/webp"
  >
  <img src="wide-900.jpg" alt="Cyclist crossing a bridge">
</picture>

En una pantalla estrecha con soporte AVIF, el navegador puede utilizar el recorte vertical. En una pantalla más amplia, omite esa regla de medios y considera la fuente WebP. Un navegador que no puede utilizar ninguna de las fuentes recurre al JPG en <img>.

El orden de las fuentes importa. El navegador utiliza la primera fuente adecuada; no descarga todas las opciones ni compara las imágenes visualmente.

currentSrc te dice lo que realmente se cargó

Las herramientas de desarrollo pueden mostrar el archivo solicitado, pero el DOM también lo expone a través de la propiedad currentSrc. Seleccione un elemento de imagen en el panel Elementos y evalúe:

$0.currentSrc

Para comparar el archivo seleccionado con la lista alternativa y de candidatos, inspeccione:

({
  current: $0.currentSrc,
  fallback: $0.src,
  candidates: $0.srcset,
  naturalWidth: $0.naturalWidth,
  naturalHeight: $0.naturalHeight
})

currentSrc es la respuesta a "¿qué cargó este navegador en este momento?" No es necesariamente el original, el candidato más grande o el archivo que elegirá otro dispositivo.

Por qué un extractor devuelve varias versiones

Un raspador básico solo puede recopilar src. Un extractor de imágenes renderizadas puede ver currentSrc, candidatos en srcset, fuentes dentro de <picture>, atributos de carga diferida y, a veces, originales vinculados. Por lo tanto, devolver varias URL es correcto, incluso si la página muestra una imagen.

El siguiente paso útil es agrupar variantes. Compare su nombre de archivo base, dimensiones, formato y ruta CDN. Un recorte de 400 píxeles y un original de 2000 píxeles de ancho no deben tratarse como archivos no relacionados, pero tampoco se debe suponer que tienen composiciones idénticas.

Utilice el extractor de URL de imágenes ExtractPics cuando necesite revisar las direcciones en lugar de guardar inmediatamente cada archivo. Para páginas ruidosas, la guía para filtrar iconos y rastrear píxeles ayuda a limpiar el resultado.

Cómo encontrar el candidato apropiado más grande

Comience con el marcado que proporcionó el editor.

1. Inspeccione el <img> y cualquier <picture> principal.
2. Copie currentSrc para saber qué se cargó.
3. Registre cada srcset candidato y descriptor de ancho.
4. Compruebe si los diferentes elementos <source> representan formatos o cultivos diferentes.
5. Obtenga una vista previa del candidato relevante más grande en lugar de elegir solo por el nombre del archivo.
6. Busque un enlace principal o una acción de galería que exponga un original.
7. Verifique las dimensiones reales del archivo después de la descarga.

El número mayor no es automáticamente la mejor opción. Un recorte vertical de 1.600 píxeles puede ser menos útil que una imagen sin recortar de 1.200 píxeles. Un AVIF puede conservar una calidad excelente, pero resultar inconveniente para un programa de edición antiguo. Elija según su tarea autorizada, no solo el ancho.

Si el candidato grande todavía se ve suave, lea por qué las imágenes extraídas se ven borrosas. Es posible que una CDN ofrezca una versión mejorada o muy comprimida.

Imágenes responsivas y carga diferida

La selección responsiva y la carga diferida están separadas. srcset decide qué candidato encaja. La carga diferida retrasa la solicitud hasta que la imagen se acerca a la ventana gráfica.

Un elemento puede utilizar ambos:

<img
  loading="lazy"
  src="gallery-640.webp"
  srcset="gallery-640.webp 640w, gallery-1280.webp 1280w"
  sizes="(max-width: 700px) 100vw, 700px"
  alt="Ceramic bowls on a shelf"
>

Si una herramienta lee el HTML sin formato, puede ver estas URL incluso antes de que el navegador las solicite. En cambio, algunos sitios almacenan los candidatos en data-srcset y los mueven a srcset con JavaScript. Es por eso que un escaneo renderizado puede encontrar más que una solicitud estática. La guía de extracción de imágenes con carga diferida cubre esos patrones.

Una página de prueba sencilla para su propio sitio

Cuando crees un marcado responsivo, pruébalo en lugar de confiar en la apariencia visual.

• Cambie el tamaño de la ventana gráfica en cada punto de interrupción.
• Pruebe pantallas estándar y de alta densidad cuando estén disponibles.
• Inspeccione currentSrc en todos los tamaños.
• Confirme que la imagen renderizada no sea más ancha que su resolución fuente útil.
• Consulte el panel Red para ver si hay descargas duplicadas.
• Deshabilite el caché durante la depuración para que una solicitud anterior no confunda el resultado.
• Verifique que todos los candidatos tengan el mismo tema previsto y el mismo texto alternativo preciso.

La guía de imágenes responsivas de MDN documenta el comportamiento estándar y ejemplos. Es una mejor referencia que copiar un fragmento inexplicable de un tema.

Mantenga el acceso técnico separado de los derechos de reutilización

El marcado responsivo hace que las URL de las imágenes sean visibles porque el navegador las necesita. La visibilidad no es una licencia. Utilice los candidatos para su propio trabajo en el sitio web, proyectos de clientes autorizados, copias de seguridad permitidas, comprobaciones de accesibilidad y otros fines legales.

Cuando la imagen pertenezca a otro editor, confirme su licencia antes de volver a publicarla. La guía para comprobar el origen y la licencia de una imagen proporciona un proceso repetible.

Lea la elección del navegador en contexto.

Piense en srcset como la lista de candidatos y en sizes como la estimación del espacio disponible por parte del navegador. <picture> puede cambiar el formato o incluso el recorte. currentSrc le indica qué candidato ganó en el dispositivo frente a usted.

Ese último detalle es importante durante una copia de seguridad. El archivo que eligió su computadora portátil es adecuado para esa pantalla, pero puede que no sea el mejor archivo maestro. Lea la lista completa de candidatos, verifique las dimensiones reales y asegúrese de que los cultivos alternativos aún muestren el tema que necesita. Aquí son normales varias URL para una fotografía; son el sistema receptivo que hace su trabajo.