Validación HTML: Valor incorrecto para el atributo "srcset" en el elemento "img": se esperaba descriptor de ancho pero se encontró X en Y. (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 múltiples fuentes de imagen para que el navegador pueda elegir la más apropiada según el dispositivo del usuario y el viewport. Hay dos modos distintos para srcset:

Modo descriptor de ancho — Cada candidato especifica el ancho intrínseco de la imagen usando un descriptor w (por ejemplo, 640w). Este modo requiere el atributo sizes para que el navegador sepa cuánto espacio ocupará la imagen en el diseño, permitiéndole elegir el mejor candidato.
Modo descriptor de densidad — Cada candidato especifica una densidad de píxeles usando un descriptor x (por ejemplo, 2x). Este modo no usa el atributo sizes; el navegador simplemente hace coincidir los candidatos con la densidad de píxeles del dispositivo.

Estos dos modos son mutuamente excluyentes. No puedes mezclar descriptores w y x en el mismo srcset, y no puedes usar descriptores x (o URLs simples sin descriptor) cuando sizes está presente. La especificación HTML es explícita sobre esto: si se especifica sizes, todas las cadenas candidatas de imagen deben incluir un descriptor de ancho.

Por qué esto importa

Cumplimiento de estándares: El estándar HTML Living Standard de WHATWG define reglas de análisis estrictas para srcset. Cuando sizes está presente, el algoritmo de selección de fuente del navegador espera descriptores de ancho. Proporcionar descriptores de densidad o candidatos simples en este contexto viola la especificación y produce comportamiento indefinido.
Selección de imagen rota: Los navegadores dependen del atributo sizes para calcular qué imagen descrita con w se ajusta mejor al ancho de diseño actual. Si proporcionas descriptores x junto con sizes, el navegador puede ignorar completamente el srcset o recurrir al atributo src, anulando el propósito de las imágenes responsivas.
Accesibilidad y rendimiento: Las imágenes responsivas existen para servir archivos de tamaño apropiado a diferentes dispositivos. Una combinación inválida de srcset/sizes puede resultar en imágenes sobredimensionadas descargándose en pantallas pequeñas (desperdiciando ancho de banda) o imágenes subdimensionadas en pantallas grandes (reduciendo la calidad visual).

Cómo solucionarlo

Tienes dos opciones:

Mantener sizes y cambiar a descriptores de ancho — Reemplaza cada descriptor x (o descriptor faltante) en srcset con el ancho de píxeles intrínseco real de cada archivo de imagen, expresado con un sufijo w.
Eliminar sizes y mantener descriptores de densidad — Si solo necesitas servir diferentes resoluciones para pantallas de alta densidad en un tamaño de diseño fijo, elimina el atributo sizes y usa descriptores x.

Cuando uses descriptores de ancho, el valor debe coincidir con el ancho intrínseco real del archivo de imagen en píxeles. Por ejemplo, si photo-640.jpg tiene 640 píxeles de ancho, su descriptor debería ser 640w.

Ejemplos

Inválido: `sizes` presente con descriptores de densidad

Esto desencadena el error porque 1x y 2x son descriptores de densidad, pero sizes requiere descriptores de ancho.

<img
  src="photo-640.jpg"
  srcset="photo-640.jpg 1x, photo-1280.jpg 2x"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Un paisaje montañoso">

Inválido: `sizes` presente con un candidato simple (sin descriptor)

Un candidato sin descriptor por defecto es 1x, que es un descriptor de densidad — aún inválido cuando sizes está presente.

<img
  src="photo-640.jpg"
  srcset="photo-640.jpg, photo-1280.jpg 2x"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Un paisaje montañoso">

Solución: usar descriptores de ancho con `sizes`

Cada candidato ahora especifica el ancho intrínseco del archivo de imagen. El navegador usa el valor de sizes para determinar qué imagen descargar.

<img
  src="photo-640.jpg"
  srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1280.jpg 1280w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Un paisaje montañoso">

Solución alternativa: eliminar `sizes` y usar descriptores de densidad

Si no necesitas que el navegador elija imágenes basándose en el ancho de diseño — por ejemplo, la imagen siempre se renderiza en un tamaño CSS fijo — elimina sizes y usa descriptores x.

<img
  src="photo-640.jpg"
  srcset="photo-640.jpg 1x, photo-1280.jpg 2x"
  alt="Un paisaje montañoso">

Usar descriptores de ancho con `source` dentro de `picture`

La misma regla se aplica a elementos source dentro de un picture. Si sizes está presente, cada candidato debe usar un descriptor w.

<picture>
  <source
    srcset="hero-480.webp 480w, hero-960.webp 960w, hero-1920.webp 1920w"
    sizes="(max-width: 768px) 100vw, 50vw"
    type="image/webp">
  <img
    src="hero-960.jpg"
    srcset="hero-480.jpg 480w, hero-960.jpg 960w, hero-1920.jpg 1920w"
    sizes="(max-width: 768px) 100vw, 50vw"
    alt="Una imagen de banner principal">
</picture>