El atributo “sizes” debe especificarse solo si también se especifica el atributo “srcset”.

El atributo sizes y el atributo srcset están diseñados para funcionar como una pareja para la entrega de imágenes responsivas. El atributo srcset proporciona al navegador una lista de archivos de imagen y sus anchos intrínsecos (ej. 480w, 800w), mientras que el atributo sizes le dice al navegador cuánto espacio ocupará la imagen en el diseño a diferentes tamaños de viewport. El navegador combina esta información para seleccionar el archivo de imagen más apropiado para descargar.

Cuando sizes aparece sin srcset, no sirve para nada. El navegador solo tiene la imagen individual especificada en el atributo src, así que no hay decisión que tomar sobre qué imagen cargar. La especificación HTML requiere explícitamente que sizes no debe estar presente a menos que srcset también esté especificado con descriptores de ancho.

Este error comúnmente ocurre cuando un CMS o sistema de plantillas genera el atributo sizes por defecto, cuando srcset se elimina accidentalmente durante refactorización, o cuando los desarrolladores copian fragmentos de marcado sin incluir todos los atributos necesarios.

Más allá del cumplimiento de estándares, dejar atributos sizes huérfanos crea código confuso y difícil de mantener. Otros desarrolladores (o tú en el futuro) pueden asumir que las imágenes responsivas están configuradas cuando no lo están, llevando a tiempo perdido en depuración.

Cómo arreglarlo

Tienes dos opciones:

1. Agregar un atributo srcset si quieres que el navegador elija entre múltiples tamaños de imagen basándose en el ancho del viewport. El srcset debe usar descriptores de ancho (w) para que sizes tenga sentido.
2. Eliminar el atributo sizes si no necesitas imágenes responsivas y un solo src es suficiente.

Ten en cuenta que sizes también es válido en elementos <source> dentro de un elemento <picture> — la misma regla aplica ahí. Cada <source> con un atributo sizes debe tener también un atributo srcset.

Ejemplos

❌ Incorrecto: sizes sin srcset

<img
  src="image.jpg"
  sizes="(max-width: 600px) 480px, 800px"
  alt="A mountain landscape">

El atributo sizes está presente pero no hay srcset, así que el navegador no tiene imágenes alternativas de las cuales elegir.

✅ Correcto: sizes emparejado con srcset

<img
  src="image-800w.jpg"
  srcset="image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  alt="A mountain landscape">

Aquí, srcset proporciona dos imágenes con sus anchos intrínsecos. El atributo sizes le dice al navegador: “Si el viewport tiene 600px o menos de ancho, la imagen se mostrará a 480px de ancho; de otra manera, se mostrará a 800px de ancho.” El navegador utiliza esta información para descargar el archivo más eficiente.

✅ Correcto: eliminar sizes cuando no se necesitan imágenes responsivas

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

Si una sola imagen es suficiente, simplemente elimina el atributo sizes.

❌ Incorrecto: sizes en un <source> sin srcset

<picture>
  <source
    media="(min-width: 800px)"
    sizes="50vw">
  <img src="fallback.jpg" alt="A sunset over the ocean">
</picture>

✅ Correcto: sizes en un <source> con srcset

<picture>
  <source
    media="(min-width: 800px)"
    srcset="wide-480w.jpg 480w, wide-960w.jpg 960w"
    sizes="50vw">
  <img src="fallback.jpg" alt="A sunset over the ocean">
</picture>

El elemento <source> ahora incluye un srcset con descriptores de ancho, dándole al navegador las imágenes candidatas que necesita para hacer uso de sizes.

Más información:

MDN Reference

MDN: sizes attribute

→

MDN Reference

MDN: srcset attribute

→