Validación HTML: Cuando el atributo "srcset" tiene cualquier cadena candidata de imagen con un descriptor de ancho, también debe especificarse el atributo "sizes".

Acerca de este problema HTML

El atributo srcset te permite proporcionar múltiples fuentes de imagen para que el navegador pueda seleccionar la más apropiada. Hay dos tipos de descriptores que puedes usar en srcset: descriptores de densidad de píxeles (p. ej., 1x, 2x) y descriptores de ancho (p. ej., 400w, 800w). Cuando usas descriptores de densidad de píxeles, el navegador ya conoce la relación entre cada fuente — simplemente elige la que coincida con la proporción de píxeles del dispositivo. Pero los descriptores de ancho funcionan de forma diferente. Le dicen al navegador el ancho intrínseco en píxeles de cada archivo de imagen, y el navegador entonces necesita saber qué ancho tendrá realmente la imagen renderizada en pantalla para calcular qué archivo es el más adecuado. Eso es exactamente lo que proporciona el atributo sizes.

El atributo sizes acepta una lista separada por comas de condiciones de medios emparejadas con valores de longitud, más una longitud por defecto. Por ejemplo, sizes="(max-width: 600px) 100vw, 50vw" le dice al navegador: “Si el viewport tiene 600px de ancho o menos, esta imagen ocupará el 100% del ancho del viewport; de lo contrario, ocupará el 50%.” Armado con esta información y los descriptores de ancho en srcset, el navegador puede hacer los cálculos y descargar solo la imagen más adecuada — antes de que CSS o el diseño hayan sido calculados.

Por qué es importante

Cumplimiento de estándares: La especificación HTML requiere sizes siempre que srcset use descriptores de ancho. Omitirlo produce HTML inválido.
Selección correcta de imagen: Sin sizes, los navegadores recurren a asumir que la imagen tendrá un ancho de 100vw, lo que a menudo lleva a descargar imágenes innecesariamente grandes en diseños de escritorio donde la imagen es mucho más pequeña que el viewport completo.
Rendimiento: Servir imágenes demasiado grandes desperdicia ancho de banda y ralentiza la carga de la página. Un atributo sizes adecuado asegura que el navegador descargue la imagen más pequeña suficiente.
Comportamiento predecible: Confiar en la asunción de respaldo del navegador (100vw) hace que tus imágenes responsivas se comporten de forma inconsistente y anula el propósito de proporcionar múltiples candidatos.

Cómo solucionarlo

Identifica cada elemento img (o source) que use descriptores de ancho en srcset.
Determina qué ancho tendrá la imagen mostrada en diferentes tamaños de viewport. Puedes inspeccionar esto con las herramientas de desarrollador de tu navegador o revisando tu CSS.
Añade un atributo sizes que describa esos anchos usando condiciones de medios y valores de longitud CSS como px, vw, em, o expresiones calc().

Ejemplos

Incorrecto — falta `sizes` con descriptores de ancho

<img
  src="photo-400.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  alt="A mountain landscape">

Esto desencadena el error de validación porque el navegador ve descriptores de ancho (400w, 800w, 1200w) pero no tiene atributo sizes para determinar el ancho renderizado de la imagen.

Correcto — atributo `sizes` añadido

<img
  src="photo-400.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 600px"
  alt="A mountain landscape">

Aquí, el atributo sizes le dice al navegador:

En viewports de hasta 600px de ancho, la imagen ocupa el 100% del viewport.
En viewports entre 601px y 1000px, la imagen ocupa el 50% del viewport.
En viewports más grandes, la imagen se muestra con un ancho fijo de 600px.

Correcto — descriptores de densidad de píxeles (no se necesita `sizes`)

<img
  src="logo-1x.png"
  srcset="logo-1x.png 1x, logo-2x.png 2x"
  alt="Company logo">

Cuando usas descriptores de densidad de píxeles (1x, 2x) en lugar de descriptores de ancho, el atributo sizes no es requerido. El navegador simplemente hace coincidir el descriptor con la proporción de píxeles del dispositivo.

Correcto — usando `sizes` con un elemento `<picture>`

<picture>
  <source
    srcset="hero-400.webp 400w, hero-800.webp 800w"
    sizes="(max-width: 800px) 100vw, 800px"
    type="image/webp">
  <img
    src="hero-800.jpg"
    srcset="hero-400.jpg 400w, hero-800.jpg 800w"
    sizes="(max-width: 800px) 100vw, 800px"
    alt="Hero banner">
</picture>

El atributo sizes es requerido tanto en los elementos source como img cuando cualquiera usa descriptores de ancho en su srcset.