Validación HTML: El atributo "sizes" solo puede especificarse si el atributo "srcset" también está presente.

Acerca de este problema HTML

El atributo sizes y el atributo srcset funcionan juntos como un sistema para imágenes responsivas. El atributo srcset proporciona al navegador una lista de candidatos de imagen (normalmente con diferentes anchos o densidades de píxeles), mientras que el atributo sizes le dice al navegador cuánto espacio ocupará la imagen en el diseño. El navegador utiliza ambas piezas de información juntas para elegir el archivo de imagen más apropiado para descargar.

Cuando especificas sizes sin srcset, el atributo no tiene propósito. Solo hay una fuente de imagen (el atributo src), por lo que el navegador no tiene nada de donde elegir, y las pistas de diseño proporcionadas por sizes no tienen sentido. La especificación HTML establece explícitamente que el atributo sizes no debe estar presente a menos que srcset también esté especificado con descriptores de ancho (w). Esto no es solo una preocupación estilística: indica a los validadores y otras herramientas que el marcado está incompleto o es incorrecto, lo que podría señalar un error de copiar y pegar o un atributo faltante.

Este problema ocurre comúnmente cuando:

El atributo srcset se elimina accidentalmente durante la refactorización, dejando sizes huérfano.
Un desarrollador añade sizes en preparación para imágenes responsivas pero olvida añadir srcset.
El código se copia de una plantilla y se modifica parcialmente.

Ejemplos

❌ Inválido: `sizes` sin `srcset`

<img
  src="photo.jpg"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A landscape photo">

El atributo sizes está presente, pero no hay srcset para proporcionar múltiples candidatos de imagen. El navegador no tiene uso para la información de tamaño.

✅ Solución: añade un atributo `srcset` correspondiente

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

Ahora sizes le dice al navegador: “En viewports menores a 600px, la imagen llena el 100% del ancho del viewport; de lo contrario llena el 50%.” El navegador combina esto con los descriptores de ancho en srcset para seleccionar la mejor imagen.

✅ Solución: elimina `sizes` si no necesitas imágenes responsivas

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

Si solo tienes una fuente de imagen única y no necesitas comportamiento responsivo, simplemente elimina el atributo sizes.

✅ Usando `sizes` con `<source>` dentro de `<picture>`

La misma regla se aplica a elementos <source> dentro de un bloque <picture>:

<picture>
  <source
    srcset="photo-dark-400.jpg 400w, photo-dark-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    media="(prefers-color-scheme: dark)">
  <img
    src="photo.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="A landscape photo">
</picture>

Cada elemento que usa sizes también incluye un srcset correspondiente con descriptores de ancho.

Una nota sobre `srcset` con descriptores de densidad de píxeles

El atributo sizes está específicamente diseñado para uso con descriptores de ancho (w) en srcset. Si estás usando descriptores de densidad de píxeles (x) en su lugar, sizes no es necesario:

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

En este caso, el navegador selecciona basándose en la relación de píxeles del dispositivo en lugar del tamaño del viewport, por lo que sizes sería innecesario.