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

Acerca de este problema HTML

El atributo sizes funciona junto con el atributo srcset para ayudar al navegador a elegir la fuente de imagen más apropiada antes de que se calcule el diseño de la página. Describe qué tan ancha se mostrará la imagen bajo varias condiciones de viewport, permitiendo al navegador seleccionar una imagen de tamaño óptimo de los candidatos listados en srcset. Según la especificación HTML, el valor de sizes debe ser una lista de tamaños de origen válida — un conjunto separado por comas de condiciones de medios emparejadas con longitudes, con una longitud por defecto al final. Una cadena vacía ("") no satisface este requisito y por tanto es inválida.

Cuando el navegador encuentra un atributo sizes vacío, no puede determinar el ancho de visualización previsto de la imagen. Esto anula el propósito de las imágenes responsivas y puede causar que el navegador regrese a un comportamiento predeterminado (normalmente asumiendo 100vw), lo que podría resultar en descargar una imagen innecesariamente grande. Más allá del problema funcional, un atributo vacío señala un problema de calidad de código — a menudo significa que una plantilla está generando el atributo incluso cuando no se ha configurado ningún valor.

Por qué esto importa

Cumplimiento de estándares: La especificación HTML requiere explícitamente que sizes sea una lista de tamaños de origen válida y no vacía cuando esté presente. Un valor vacío es un error de análisis.
Rendimiento: Sin un valor sizes apropiado, el navegador no puede tomar una decisión informada sobre cuál candidato de srcset descargar. Esto puede llevar a un desperdicio de ancho de banda y cargas de página más lentas, especialmente en dispositivos móviles.
Calidad de código: Los atributos vacíos desordenan tu marcado y sugieren configuración faltante, haciendo el código más difícil de mantener.

Cómo solucionarlo

Proporciona un valor sizes válido que describa qué tan ancha se renderizará realmente la imagen en diferentes anchos de viewport.
Elimina sizes completamente si no estás usando descriptores de ancho (w) en srcset. Cuando srcset usa descriptores de densidad de píxeles (1x, 2x), el atributo sizes no es necesario.
Elimina tanto sizes como srcset si no necesitas selección de imágenes responsivas en absoluto.

Ejemplos

❌ Atributo `sizes` vacío

<img
  src="photo.jpg"
  srcset="photo-small.jpg 480w, photo-large.jpg 1200w"
  sizes=""
  alt="A mountain landscape">

El sizes="" vacío desencadena el error de validación.

✅ `sizes` válido con un único valor predeterminado

Si la imagen siempre ocupa el ancho completo del viewport:

<img
  src="photo.jpg"
  srcset="photo-small.jpg 480w, photo-large.jpg 1200w"
  sizes="100vw"
  alt="A mountain landscape">

✅ `sizes` válido con condiciones de medios

Si la imagen se muestra en diferentes anchos dependiendo del viewport:

<img
  src="photo.jpg"
  srcset="photo-small.jpg 480w, photo-medium.jpg 800w, photo-large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 33vw"
  alt="A mountain landscape">

Esto le dice al navegador: usa 100vw en viewports de hasta 600px, 50vw hasta 1024px, y 33vw en otros casos.

✅ Eliminando `sizes` cuando se usan descriptores de densidad

Cuando srcset usa descriptores de densidad en lugar de descriptores de ancho, sizes no es aplicable y debe omitirse:

<img
  src="photo.jpg"
  srcset="photo.jpg 1x, photo-2x.jpg 2x"
  alt="A mountain landscape">

✅ Eliminando ambos atributos cuando no son necesarios

Si la selección de imágenes responsivas no es requerida, simplemente usa un <img> estándar:

<img src="photo.jpg" alt="A mountain landscape">

Corrección común de plantilla

Si tu CMS o sistema de plantillas genera condicionalmente estos atributos, asegúrate de que el atributo sizes solo se renderice cuando tenga un valor. Por ejemplo, en una plantilla:

<!-- Antes (siempre genera sizes, incluso cuando está vacío) -->

<img src="photo.jpg" srcset="{{srcset}}" sizes="{{sizes}}" alt="{{alt}}">

<!-- Después (solo genera sizes cuando tiene un valor) -->

<img src="photo.jpg" srcset="{{srcset}}" {{#if sizes}}sizes="{{sizes}}"{{/if}} alt="{{alt}}">