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

Acerca de este problema HTML

El atributo srcset te permite proporcionar múltiples fuentes de imagen para que el navegador pueda elegir la más apropiada basándose en el tamaño del viewport del usuario o la densidad de pantalla. Hay dos modos distintos para srcset:

Modo descriptor de ancho — cada candidato especifica su ancho intrínseco usando un descriptor w (ej. 400w). Este modo requiere el atributo sizes para que el navegador sepa cuánto espacio ocupará la imagen en el layout y pueda calcular qué fuente descargar.
Modo descriptor de densidad de píxeles — cada candidato especifica una densidad de píxeles usando un descriptor x (ej. 2x). Este modo no debe incluir un atributo sizes.

Cuando incluyes un atributo sizes pero olvidas añadir descriptores de ancho a una o más entradas de srcset, el navegador tiene información incompleta. La especificación HTML establece explícitamente que si sizes está presente, todas las cadenas candidatas de imagen deben usar descriptores de ancho. Una entrada sin descriptor por defecto es 1x (un descriptor de densidad de píxeles), lo cual entra en conflicto con el modo descriptor de ancho activado por sizes. Esta discordancia hace que el validador W3C reporte el error.

Más allá de la validación, esto importa para el rendimiento en el mundo real. Las imágenes responsivas son una de las herramientas más efectivas para reducir el peso de la página en pantallas más pequeñas. Si los descriptores faltan o no coinciden, los navegadores pueden descargar una imagen que es demasiado grande o demasiado pequeña, perjudicando tanto el rendimiento como la calidad visual.

Cómo solucionarlo

Tienes dos opciones dependiendo de tu caso de uso:

Opción 1: añadir descriptores de ancho a todos los candidatos de `srcset`

Si necesitas que el navegador seleccione imágenes basándose en el tamaño del viewport (el patrón más común de imágenes responsivas), mantén el atributo sizes y asegúrate de que cada entrada de srcset tenga un descriptor w que coincida con el ancho en píxeles intrínseco de la imagen.

Opción 2: eliminar `sizes` y usar descriptores de densidad de píxeles

Si solo necesitas servir imágenes de mayor resolución para pantallas de alta densidad de píxeles (ej. pantallas Retina) y la imagen siempre se renderiza con el mismo tamaño CSS, elimina el atributo sizes y usa descriptores x en su lugar.

Ejemplos

❌ Incorrecto: `sizes` presente pero entrada de `srcset` sin descriptor de ancho

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg, photo-800.jpg"
  sizes="(min-width: 600px) 800px, 100vw"
  alt="Un paisaje montañoso">

Ambas entradas de srcset carecen de un descriptor de ancho. Como sizes está presente, el validador reporta un error para cada candidato.

✅ Correcto: `sizes` presente con descriptores de ancho en cada candidato

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w"
  sizes="(min-width: 600px) 800px, 100vw"
  alt="Un paisaje montañoso">

Cada candidato ahora especifica su ancho intrínseco (400w y 800w), lo cual le dice al navegador el ancho real en píxeles de cada archivo fuente. El navegador combina esto con el valor de sizes para elegir la mejor opción.

❌ Incorrecto: mezclando descriptores de ancho y entradas simples

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg"
  sizes="(min-width: 600px) 800px, 100vw"
  alt="Un paisaje montañoso">

El segundo candidato (photo-800.jpg) no tiene su descriptor de ancho. Todos los candidatos deben tener uno cuando sizes está presente — no solo algunos de ellos.

✅ Correcto: descriptores de densidad de píxeles sin `sizes`

<img
  src="photo-800.jpg"
  srcset="photo-800.jpg 1x, photo-1600.jpg 2x"
  alt="Un paisaje montañoso">

Aquí se elimina el atributo sizes, y cada entrada de srcset usa un descriptor de densidad de píxeles (1x, 2x). Esto es válido y apropiado cuando la imagen siempre ocupa las mismas dimensiones CSS independientemente del ancho del viewport.

❌ Incorrecto: usando `sizes` con descriptores de densidad de píxeles

<img
  src="photo-800.jpg"
  srcset="photo-800.jpg 1x, photo-1600.jpg 2x"
  sizes="(min-width: 600px) 800px, 100vw"
  alt="Un paisaje montañoso">

El atributo sizes y los descriptores x no se pueden combinar. O cambia a descriptores w o elimina sizes.

Referencia rápida

Patrón	Descriptor de `srcset`	¿`sizes` requerido?
Selección basada en viewport	Ancho (`w`)	Sí
Selección basada en densidad	Densidad de píxeles (`x`)	No — debe omitirse

Recuerda que el valor w en srcset se refiere al ancho intrínseco en píxeles del archivo de imagen (ej. una imagen de 800 píxeles de ancho obtiene 800w), mientras que los valores en sizes usan unidades de longitud CSS como px, vw, o em para describir qué tan ancha se renderizará la imagen en el layout.