Validación HTML: Valor incorrecto "" para el atributo "imagesizes" en el elemento "link": No debe estar vacío.

Acerca de este problema HTML

El atributo imagesizes se usa exclusivamente en elementos <link> que tienen rel="preload" y as="image". Funciona en conjunto con el atributo imagesrcset para permitir que el navegador precargue la imagen más apropiada de un conjunto de candidatos — reflejando cómo funcionan sizes y srcset en un elemento <img>. Cuando el navegador encuentra estos atributos en un <link>, puede comenzar a obtener el recurso de imagen correcto temprano, incluso antes de analizar la etiqueta <img> en el cuerpo del documento.

Cuando imagesizes se establece como una cadena vacía (""), el navegador no tiene información sobre el tamaño de visualización previsto de la imagen, lo que anula el propósito de la precarga de imágenes responsivas. El navegador no puede seleccionar el mejor candidato de imagesrcset sin saber qué tan grande se renderizará la imagen. Un valor vacío es inválido según la especificación HTML, que requiere que el atributo contenga una lista de tamaños de origen válida (la misma sintaxis utilizada por el atributo sizes en <img>).

Esto importa tanto para el rendimiento como para el cumplimiento de estándares. La precarga responsiva es una optimización de rendimiento — un imagesizes vacío socava eso al dejar al navegador incapaz de tomar una decisión informada. Desde una perspectiva de estándares, el validador rechaza correctamente el valor vacío porque el espacio de valores definido del atributo no incluye la cadena vacía.

Cómo solucionarlo

Proporciona un valor de tamaños válido que coincida con el atributo sizes en el elemento <img> correspondiente en tu página. Esto le dice al navegador qué tan ancha será la imagen en varios anchos de viewport.
Elimina imagesizes por completo si no necesitas precarga responsiva. Si estás precargando una sola imagen (usando href en lugar de imagesrcset), no necesitas imagesizes en absoluto.

Ejemplos

❌ Incorrecto: atributo `imagesizes` vacío

<link
  rel="preload"
  as="image"
  imagesrcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  imagesizes="">

El imagesizes="" vacío desencadena el error de validación e impide que el navegador seleccione el candidato de imagen correcto.

✅ Corregido: proporcionando un valor de tamaños válido

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

El valor de imagesizes usa la misma sintaxis que el atributo sizes en <img>. Proporciona condiciones de medios emparejadas con longitudes, con una longitud de respaldo al final. Este valor debe coincidir con el atributo sizes en el elemento <img> correspondiente en tu marcado.

✅ Corregido: imagen simple de ancho completo

<link
  rel="preload"
  as="image"
  imagesrcset="banner-640.jpg 640w, banner-1280.jpg 1280w"
  imagesizes="100vw">

Si la imagen abarca todo el ancho del viewport, 100vw es un valor sencillo y válido.

✅ Corregido: eliminando el atributo cuando no es necesario

<link rel="preload" as="image" href="logo.png">

Si estás precargando una sola imagen no responsiva, omite tanto imagesrcset como imagesizes y usa el atributo href en su lugar. El atributo imagesizes solo tiene sentido cuando se empareja con imagesrcset.