Valor incorrecto X para el atributo “srcset” en el elemento “source”: Debe contener una o más cadenas candidatas de imagen.

El elemento <source> se utiliza dentro de elementos <picture>, <audio> o <video> para especificar recursos multimedia alternativos. Cuando se usa dentro de un elemento <picture>, el atributo srcset es obligatorio y debe contener una o más cadenas candidatas de imagen separadas por comas. Cada cadena candidata de imagen consiste en una URL y un descriptor opcional — ya sea un descriptor de anchura como 400w o un descriptor de densidad de píxeles como 2x.

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

• El atributo srcset está presente pero vacío (srcset="").
• El valor del atributo contiene solo espacios en blanco.
• El valor está mal formado o contiene errores de sintaxis (ej. URLs faltantes, descriptores inválidos).
• Un sistema de plantillas dinámicas o CMS genera el atributo sin ningún valor.

Por qué es importante

Los navegadores dependen del atributo srcset para seleccionar la imagen más apropiada a mostrar basándose en las capacidades del dispositivo del usuario, el tamaño de la ventana de visualización y las condiciones de red. Un srcset vacío o inválido significa que el navegador no puede realizar esta selección, potencialmente resultando en que no se muestre ninguna imagen en absoluto. Esto degrada la experiencia del usuario, perjudica la accesibilidad (los lectores de pantalla y tecnologías de asistencia pueden encontrar comportamientos inesperados), y viola la especificación HTML tal como la define el estándar vivo de WHATWG.

Cómo solucionarlo

1. Proporciona al menos una URL de imagen válida en el atributo srcset.
2. Opcionalmente añade descriptores — usa descriptores de anchura (w) cuando se combinen con el atributo sizes, o descriptores de densidad de píxeles (x) para imágenes de tamaño fijo.
3. Si no tienes ninguna imagen que proporcionar, elimina completamente el elemento <source> en lugar de dejar srcset vacío.
4. Verifica la salida dinámica — si un CMS o motor de plantillas genera el valor srcset, añade una verificación condicional para omitir el elemento <source> cuando no haya imágenes disponibles.

Ejemplos

❌ Atributo srcset vacío

<picture>
  <source srcset="" type="image/webp">
  <img src="photo.jpg" alt="Un atardecer sobre el océano">
</picture>

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

❌ Sintaxis de descriptor inválida

<picture>
  <source srcset="photo.webp 400" type="image/webp">
  <img src="photo.jpg" alt="Un atardecer sobre el océano">
</picture>

Esto es inválido porque 400 no es un descriptor reconocido — debe ser 400w o un descriptor de densidad como 2x.

✅ Candidata de imagen única

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Un atardecer sobre el océano">
</picture>

Una sola URL sin descriptor es válida y sirve como la candidata por defecto 1x.

✅ Múltiples candidatas con descriptores de anchura

<picture>
  <source
    srcset="photo-small.webp 400w, photo-medium.webp 800w, photo-large.webp 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
    type="image/webp">
  <img src="photo.jpg" alt="Un atardecer sobre el océano">
</picture>

Esto proporciona tres candidatas de imagen con descriptores de anchura, permitiendo al navegador elegir la mejor coincidencia basándose en la ventana de visualización y la densidad de pantalla.

✅ Múltiples candidatas con descriptores de densidad de píxeles

<picture>
  <source srcset="photo.webp 1x, photo-2x.webp 2x" type="image/webp">
  <img src="photo.jpg" alt="Un atardecer sobre el océano">
</picture>

Los descriptores de densidad de píxeles le dicen al navegador qué imagen usar basándose en la proporción de píxeles del dispositivo — 1x para pantallas estándar y 2x para pantallas de alta resolución (Retina).

✅ Eliminar el elemento source cuando no hay imagen disponible

Si tu aplicación genera dinámicamente el valor srcset y a veces no tiene ninguna imagen que proporcionar, omite completamente el elemento <source>:

<picture>
  <img src="photo.jpg" alt="Un atardecer sobre el océano">
</picture>

Esto es válido porque el elemento <img> dentro de <picture> sirve como el fallback requerido y puede funcionar solo.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Iniciar prueba gratuita Ver precios