Validación HTML: Valor incorrecto X para el atributo "srcset" en el elemento "img": Se esperaba un descriptor de ancho pero se encontró Y en Z. (Cuando el atributo "sizes" está presente, todas las cadenas candidatas de imagen deben especificar un ancho.)

Acerca de este problema HTML

El atributo srcset te permite proporcionar al navegador un conjunto de fuentes de imagen para elegir basándose en el tamaño del viewport del usuario o la densidad de la pantalla. Cada entrada en srcset se llama cadena candidata de imagen y consiste en una URL seguida de un descriptor opcional: ya sea un descriptor de ancho (como 300w) o un descriptor de densidad de píxeles (como 2x).

El atributo sizes le dice al navegador qué tamaño de visualización ocupará la imagen en varios anchos de viewport, usando condiciones de medios y valores de longitud. El navegador utiliza esta información de tamaño junto con los descriptores de ancho en srcset para seleccionar la imagen más apropiada. Por eso la especificación HTML requiere que cuando sizes esté presente, todas las entradas de srcset deben usar descriptores de ancho: sin ellos, el navegador no puede realizar la selección basada en tamaño que sizes está diseñado para habilitar.

Este error típicamente aparece en tres situaciones:

Una entrada de srcset no tiene descriptor alguno: la URL se lista sin ningún valor de ancho o densidad acompañante.
Se usa un descriptor de densidad de píxeles (x) junto con sizes: mezclar sizes con descriptores x es inválido porque los dos mecanismos son mutuamente excluyentes.
Un error tipográfico o problema de formato: por ejemplo, escribir 600px en lugar de 600w, o colocar una coma incorrectamente.

Por qué es importante

Cumplimiento de estándares: El WHATWG HTML Living Standard establece explícitamente que cuando sizes se especifica, todos los candidatos de imagen deben usar descriptores de ancho.
Selección correcta de imagen: Sin los descriptores de ancho apropiados, los navegadores no pueden determinar con precisión qué imagen descargar. Esto puede llevar a descargas innecesariamente grandes en pantallas pequeñas o imágenes borrosas en pantallas grandes.
Rendimiento: Las imágenes responsivas son una optimización clave del rendimiento. Un srcset mal formado anula el propósito y puede resultar en ancho de banda desperdiciado.

Cómo solucionarlo

Determina el ancho intrínseco (en píxeles) de cada archivo de imagen listado en srcset.
Añade el descriptor de ancho a cada URL en el formato [ancho]w, donde [ancho] es el ancho real en píxeles de la imagen.
Asegúrate de que ninguna entrada use descriptores x cuando sizes esté presente. Si necesitas descriptores de densidad, elimina completamente el atributo sizes.
Asegúrate de que cada entrada tenga un descriptor: URLs sin ningún descriptor son inválidas cuando se usa sizes.

Ejemplos

Descriptor de ancho faltante

Esto desencadena el error de validación porque la URL de srcset no tiene descriptor de ancho:

<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="A sunset over the mountains"
>

Solucionado añadiendo el descriptor de ancho:

<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="A sunset over the mountains"
>

Usando descriptores de densidad de píxeles con `sizes`

Esto es inválido porque los descriptores x no pueden combinarse con el atributo sizes:

<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 1x, /img/photo-2x.jpg 2x"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="A sunset over the mountains"
>

Solucionado cambiando a descriptores de ancho:

<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 800w, /img/photo-2x.jpg 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="A sunset over the mountains"
>

Alternativamente, si solo necesitas selección basada en densidad y no necesitas sizes, elimínalo:

<img
  src="/img/photo.jpg"
  srcset="/img/photo.jpg 1x, /img/photo-2x.jpg 2x"
  alt="A sunset over the mountains"
>

Múltiples fuentes de imagen con descriptores de ancho

Una configuración completa de imagen responsiva con varios tamaños:

<img
  src="/img/photo-800.jpg"
  srcset="
    /img/photo-400.jpg 400w,
    /img/photo-800.jpg 800w,
    /img/photo-1200.jpg 1200w
  "
  sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 800px"
  alt="A sunset over the mountains"
>

Cada URL se empareja con un descriptor w que coincide con el ancho intrínseco en píxeles de la imagen. El atributo sizes entonces le dice al navegador qué tan ancha se mostrará la imagen en cada punto de quiebre, permitiéndole elegir el mejor candidato.