Validación HTML: Valor incorrecto X para el atributo "srcset" en el elemento "img": Debe contener una o más cadenas de candidatos de imagen.

Acerca de este problema HTML

El atributo srcset te permite especificar múltiples fuentes de imagen para que el navegador pueda elegir la más apropiada según las características del dispositivo del usuario, como la resolución de pantalla o el ancho del viewport. Cuando incluyes un atributo srcset en un elemento <img>, la especificación HTML requiere que contenga una o más cadenas de candidatos de imagen separadas por comas. Cada cadena consiste en una URL seguida de un descriptor opcional — ya sea un descriptor de ancho (p. ej., 200w) o un descriptor de densidad de píxeles (p. ej., 2x).

Este error de validación típicamente aparece cuando:

El atributo srcset está vacío (srcset="")
El atributo srcset contiene solo espacios en blanco (srcset=" ")
El valor contiene errores de sintaxis como URLs faltantes, descriptores inválidos, o formato incorrecto
Un motor de plantillas o CMS genera el atributo sin valor

Esto importa porque los navegadores dependen del valor de srcset para seleccionar la mejor imagen que cargar. Un srcset vacío o malformado significa que el navegador debe recurrir completamente al atributo src, haciendo que el atributo srcset sea inútil. Además, el marcado inválido puede causar comportamiento inesperado en diferentes navegadores y socava el cumplimiento de estándares.

Cómo solucionarlo

Proporciona cadenas válidas de candidatos de imagen. Cada entrada necesita una URL y opcionalmente un descriptor de ancho o densidad de píxeles, con las entradas separadas por comas.
Elimina el atributo completamente si no tienes múltiples fuentes de imagen que ofrecer. Un atributo src simple está perfectamente bien por sí solo.
Verifica la salida dinámica. Si un CMS o sistema de plantillas genera el srcset, asegúrate de que omita condicionalmente el atributo cuando no hay candidatos de imagen responsiva disponibles, en lugar de generar un atributo vacío.

Ejemplos

❌ Atributo `srcset` vacío

<img src="/img/photo.jpg" alt="A sunset over the ocean" srcset="">

Esto desencadena el error porque srcset está presente pero no contiene cadenas de candidatos de imagen.

❌ Valor de `srcset` malformado

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

Esto es inválido porque cada cadena de candidato debe incluir una URL. Los descriptores solos no son entradas válidas.

✅ Usando descriptores de densidad de píxeles

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

Cada cadena de candidato contiene una URL seguida de un descriptor de densidad de píxeles (1x, 2x). El navegador elige la mejor coincidencia para la pantalla del usuario.

✅ Usando descriptores de ancho con `sizes`

<img
  src="/img/photo-400.jpg"
  alt="A sunset over the ocean"
  srcset="
    /img/photo-400.jpg 400w,
    /img/photo-800.jpg 800w,
    /img/photo-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px">

Los descriptores de ancho (p. ej., 400w) le dicen al navegador el ancho intrínseco de cada imagen. El atributo sizes luego le dice al navegador qué tan grande se mostrará la imagen en varios tamaños de viewport, permitiéndole calcular la mejor fuente para descargar.

✅ Eliminando `srcset` cuando no es necesario

<img src="/img/photo.jpg" alt="A sunset over the ocean">

Si solo tienes una sola fuente de imagen, simplemente omite srcset por completo. El atributo src solo es válido y suficiente.

✅ Candidato único en `srcset`

<img
  src="/img/photo.jpg"
  alt="A sunset over the ocean"
  srcset="/img/photo-highres.jpg 2x">

Incluso una sola cadena de candidato de imagen es válida. Aquí, el navegador usará la imagen de alta resolución en pantallas 2x y recurrirá a src de lo contrario.