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

Acerca de este problema HTML

El atributo imagesrcset se usa exclusivamente en elementos <link> que tienen rel="preload" y as="image". Refleja el atributo srcset del elemento <img>, permitiendo al navegador precargar el recurso de imagen más apropiado basado en el viewport actual y las condiciones de pantalla. Cuando el validador encuentra imagesrcset="" (un valor vacío), reporta este error porque una cadena vacía no es un conjunto de fuentes válido — debe contener al menos una cadena de candidato de imagen.

Cada cadena de candidato de imagen en el valor imagesrcset consiste en una URL seguida de un descriptor de ancho opcional (ej., 480w) o descriptor de densidad de píxeles (ej., 2x). Múltiples candidatos se separan por comas. Esta es la misma sintaxis usada por el atributo srcset en elementos <img>.

Este problema típicamente surge cuando un CMS, generador de sitios estáticos, o motor de plantillas produce el atributo imagesrcset con un valor vacío — por ejemplo, cuando un campo de imagen responsiva no tiene datos. Los navegadores pueden ignorar el atributo mal formado, pero resulta en HTML inválido, puede causar comportamiento de precarga inesperado, y señala que las sugerencias de recursos de la página están mal configuradas. Solucionarlo asegura el cumplimiento de estándares y que el escáner de precarga del navegador funcione como se pretende.

Cómo solucionarlo

Proporciona un conjunto de fuentes válido — completa imagesrcset con una o más cadenas de candidatos de imagen.
Elimina el atributo — si no tienes múltiples fuentes de imagen para precargar, elimina imagesrcset (e imagesizes) del elemento <link> por completo. Puedes seguir precargando una sola imagen usando solo el atributo href.
Renderizado condicional — si tu sistema de plantillas podría producir un valor vacío, añade lógica para omitir el atributo cuando no haya fuentes responsivas disponibles.

Cuando uses imagesrcset, también debes incluir el atributo imagesizes (reflejando el atributo sizes en <img>) para que el navegador pueda seleccionar el candidato correcto basado en información de diseño.

Ejemplos

❌ Un `imagesrcset` vacío desencadena el error

<link rel="preload" as="image" href="hero.jpg" imagesrcset="" imagesizes="">

El valor vacío de imagesrcset es inválido y produce el error de validación de W3C.

✅ `imagesrcset` válido con descriptores de ancho

<link
  rel="preload"
  as="image"
  href="hero-800.jpg"
  imagesrcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  imagesizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px">

Esto dice al navegador que precargue la imagen más apropiada basada en el ancho del viewport, coincidiendo con el comportamiento responsivo del elemento <img> correspondiente en la página.

✅ `imagesrcset` válido con descriptores de densidad de píxeles

<link
  rel="preload"
  as="image"
  href="logo.png"
  imagesrcset="logo.png 1x, logo@2x.png 2x">

Esto precarga la variante de logo correcta basada en la densidad de píxeles del dispositivo.

✅ Eliminando el atributo cuando no existen fuentes responsivas

<link rel="preload" as="image" href="hero.jpg">

Si solo tienes una sola imagen para precargar, simplemente usa href sin imagesrcset. Esto es válido y evita el error por completo.

✅ Renderizado condicional en una plantilla

Si estás usando un lenguaje de plantillas, incluye condicionalmente el atributo:

<!-- Ejemplo de pseudocódigo -->

<link
  rel="preload"
  as="image"
  href="hero.jpg"
  {% if responsive_sources %}
    imagesrcset="{{ responsive_sources }}"
    imagesizes="{{ image_sizes }}"
  {% endif %}>

Esto previene que el atributo se renderice con un valor vacío cuando no hay datos de imagen responsiva disponibles.