Validación HTML: Valor incorrecto X para el atributo "sizes" en el elemento "img": Tamaño de fuente vacío en Y.

Acerca de este problema HTML

El atributo sizes funciona junto con srcset para indicar al navegador qué tan ancha se mostrará una imagen en varios tamaños de viewport, para que el navegador pueda elegir la fuente de imagen más apropiada antes de que se calcule el diseño de la página. El valor del atributo es una lista separada por comas donde cada entrada consiste en una condición de media opcional seguida de un valor de tamaño de fuente (una longitud CSS). La entrada final en la lista actúa como el tamaño predeterminado y no debería incluir una condición de media.

Cuando el navegador analiza el atributo sizes y encuentra una entrada vacía — es decir, no hay nada significativo entre dos comas o después de una coma al final — no puede resolver esa entrada a un tamaño de fuente válido. El algoritmo de análisis del estándar HTML considera esto como un error. Aunque la mayoría de navegadores ignorarán silenciosamente la entrada vacía y aún mostrarán la imagen, el atributo mal formado puede llevar a comportamientos inesperados e indica un problema de calidad de código que debería ser solucionado.

Las causas comunes de este error incluyen:

Una coma al final del valor de sizes (ej., "100vw, 50vw, ").
Comas dobles en el medio de la lista (ej., "100vw, , 50vw").
Valores generados dinámicamente donde una plantilla o CMS produce una coma incluso cuando una entrada de tamaño se omite condicionalmente.

Solucionar el problema es sencillo: asegúrate de que cada coma en la lista separe dos entradas de tamaño de fuente válidas, y que la lista no comience ni termine con una coma.

Ejemplos

Coma al final (inválido)

La causa más común — una coma después de la última entrada crea un tamaño de fuente vacío:

<img
  src="photo.jpg"
  alt="A mountain landscape"
  sizes="(min-width: 1200px) 800px, (min-width: 600px) 400px, 100vw, "
  srcset="photo-800.jpg 800w, photo-400.jpg 400w, photo-200.jpg 200w">

Coma al final corregida

Elimina la coma al final para que la lista termine con una entrada válida:

<img
  src="photo.jpg"
  alt="A mountain landscape"
  sizes="(min-width: 1200px) 800px, (min-width: 600px) 400px, 100vw"
  srcset="photo-800.jpg 800w, photo-400.jpg 400w, photo-200.jpg 200w">

Coma doble en el medio (inválido)

Una coma doble crea una entrada vacía entre dos tamaños válidos:

<img
  src="banner.jpg"
  alt="Promotional banner"
  sizes="(min-width: 1024px) 960px, , 100vw"
  srcset="banner-960.jpg 960w, banner-480.jpg 480w">

Coma doble corregida

Elimina la coma extra para que cada entrada esté separada por exactamente una coma:

<img
  src="banner.jpg"
  alt="Promotional banner"
  sizes="(min-width: 1024px) 960px, 100vw"
  srcset="banner-960.jpg 960w, banner-480.jpg 480w">

Tamaños generados dinámicamente con una entrada vacía (inválido)

Las plantillas o plataformas CMS a veces producen comas para entradas que están condicionalmente vacías:

<img
  src="hero.jpg"
  alt="Hero image"
  sizes="(min-width: 1400px) 1200px, , (min-width: 768px) 700px, 100vw"
  srcset="hero-1200.jpg 1200w, hero-700.jpg 700w, hero-350.jpg 350w">

Tamaños generados dinámicamente corregidos

Asegúrate de que la lógica de la plantilla solo produzca una coma cuando siga una entrada válida:

<img
  src="hero.jpg"
  alt="Hero image"
  sizes="(min-width: 1400px) 1200px, (min-width: 768px) 700px, 100vw"
  srcset="hero-1200.jpg 1200w, hero-700.jpg 700w, hero-350.jpg 350w">

Si tu atributo sizes se construye dinámicamente, considera filtrar los valores vacíos antes de unirlos con comas, o eliminar las comas al final del resultado final. Un atributo sizes bien formado siempre debería consistir en una o más entradas válidas separadas por comas individuales, con la última entrada sirviendo como el tamaño de fuente predeterminado (típicamente algo como 100vw).