Validación HTML: Valor incorrecto para el atributo "srcset" en el elemento "source": No se especificó el ancho para la imagen X. (Cuando el atributo "sizes" está presente, todas las cadenas candidatas de imagen deben especificar un ancho.)

Acerca de este problema HTML

El atributo srcset soporta dos tipos de descriptores: descriptores de ancho (como 480w) y descriptores de densidad de píxeles (como 2x). Sin embargo, estos dos tipos no pueden mezclarse, y el atributo sizes solo es compatible con descriptores de ancho. El atributo sizes le dice al navegador qué tan ancha se mostrará la imagen en varios tamaños de viewport, y el navegador usa esta información junto con los descriptores de ancho en srcset para elegir el archivo de imagen más apropiado. Si sizes está presente pero una imagen candidata carece de un descriptor de ancho, el navegador no puede realizar este cálculo correctamente.

Esto importa por varias razones. Primero, viola la especificación HTML de WHATWG, que explícitamente requiere que cuando sizes está presente, todas las imágenes candidatas deben usar descriptores de ancho. Segundo, los navegadores pueden ignorar valores de srcset mal formados o recurrir a comportamientos inesperados, resultando en que se cargue la imagen incorrecta — potencialmente perjudicando el rendimiento al descargar archivos innecesariamente grandes o degradando la calidad visual al seleccionar una imagen demasiado pequeña. Tercero, el marcado compatible con estándares asegura un comportamiento consistente y predecible en todos los navegadores y dispositivos.

Un error común es especificar una URL simple sin ningún descriptor, o mezclar descriptores de densidad (1x, 2x) con el atributo sizes. Una cadena candidata de imagen sin ningún descriptor por defecto es 1x, que es un descriptor de densidad — y eso entra en conflicto con la presencia de sizes.

Ejemplos

❌ Incorrecto: Descriptor de ancho faltante con `sizes` presente

<picture>
  <source
    srcset="image-small.jpg, image-large.jpg 1024w"
    sizes="(max-width: 600px) 480px, 800px">
  <img src="image-fallback.jpg" alt="Un paisaje escénico">
</picture>

Aquí, image-small.jpg no tiene descriptor de ancho. Dado que sizes está presente, esto activa el error de validación.

❌ Incorrecto: Usar descriptores de densidad con `sizes`

<img
  srcset="image-1x.jpg 1x, image-2x.jpg 2x"
  sizes="(max-width: 600px) 480px, 800px"
  src="image-fallback.jpg"
  alt="Un paisaje escénico">

Los descriptores de densidad (1x, 2x) son incompatibles con el atributo sizes.

✅ Correcto: Todos los candidatos tienen descriptores de ancho

<picture>
  <source
    srcset="image-small.jpg 480w, image-large.jpg 1024w"
    sizes="(max-width: 600px) 480px, 800px">
  <img src="image-fallback.jpg" alt="Un paisaje escénico">
</picture>

Cada imagen candidata ahora incluye un descriptor de ancho, que se empareja correctamente con el atributo sizes.

✅ Correcto: Usar descriptores de densidad sin `sizes`

Si quieres usar descriptores de densidad en lugar de descriptores de ancho, simplemente elimina el atributo sizes:

<img
  srcset="image-1x.jpg 1x, image-2x.jpg 2x"
  src="image-fallback.jpg"
  alt="Un paisaje escénico">

Esto es válido porque los descriptores de densidad no requieren (y no deberían usarse con) el atributo sizes.

✅ Correcto: Descriptores de ancho en `<img>` con `sizes`

<img
  srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1280.jpg 1280w"
  sizes="(max-width: 400px) 320px, (max-width: 800px) 640px, 1280px"
  src="photo-640.jpg"
  alt="Un primer plano de una flor">

Cada entrada en srcset especifica su ancho intrínseco, y sizes le dice al navegador qué ancho de visualización esperar en cada breakpoint. El navegador luego selecciona automáticamente la imagen que mejor se ajuste.