Validación HTML: Valor incorrecto X para el atributo "srcset" en el elemento "source": Se esperaba un número mayor que cero pero se encontró "0" en Y.

Acerca de este problema HTML

El atributo srcset permite a los navegadores elegir inteligentemente qué imagen cargar basándose en el tamaño del viewport y la relación de píxeles del dispositivo. Cada entrada en un srcset consiste en una URL seguida de un descriptor de ancho (como 300w) o un descriptor de densidad de píxeles (como 2x). Al usar descriptores de ancho, el valor representa el ancho intrínseco en píxeles del archivo de imagen, es decir, el ancho real de la imagen tal como está almacenada en el disco.

Un descriptor de ancho de 0w viola la especificación HTML, que requiere que los descriptores de ancho sean números enteros mayores que cero. Una imagen de ancho cero no puede participar de manera significativa en el proceso de selección de fuente del navegador. El navegador usa estos valores de ancho en combinación con el atributo sizes para calcular qué imagen se ajusta mejor al diseño actual: un valor de cero rompería completamente este cálculo.

Este problema ocurre comúnmente cuando:

Las dimensiones de las imágenes se generan dinámicamente y se usa un valor predeterminado de 0 para datos faltantes.
Un placeholder o estado vacío se incluye accidentalmente en el srcset.
Un CMS o herramienta de construcción genera un descriptor 0w para imágenes cuyas dimensiones no se calcularon.

Por qué es importante

Cumplimiento de estándares: La especificación HTML requiere explícitamente que los descriptores de ancho sean números enteros positivos. Los validadores marcarán 0w como un error.
Comportamiento del navegador: Aunque los navegadores pueden ignorar silenciosamente la entrada inválida, no puedes confiar en un manejo consistente en todos los navegadores y versiones. El algoritmo de selección de imágenes puede comportarse de manera impredecible.
Rendimiento: Un srcset bien formado es clave para la carga responsiva de imágenes. Los descriptores inválidos pueden impedir que los navegadores seleccionen la imagen óptima, llevando a descargas innecesariamente grandes o mala calidad de imagen.

Cómo solucionarlo

Abre el archivo de imagen asociado con el descriptor 0w y verifica su ancho real en píxeles usando un editor de imágenes o la línea de comandos.
Reemplaza 0w con el ancho correcto (por ejemplo, 150w para una imagen de 150 píxeles de ancho).
Si la imagen es realmente de ancho cero o es un placeholder, elimina completamente esa entrada del srcset.
Asegúrate de que cada entrada restante tenga un descriptor de ancho único y positivo.

Ejemplos

❌ Inválido: descriptor de ancho de `0w`

<picture>
  <source
    srcset="/images/icon_placeholder.png 0w,
            /images/icon_large.png 600w"
    media="(max-width: 600px)">
  <img src="/images/icon_fallback.png" alt="App logo">
</picture>

El descriptor 0w desencadena el error de validación porque cero no es un ancho válido.

✅ Corregido: todos los descriptores de ancho son positivos

<picture>
  <source
    srcset="/images/icon_small.png 300w,
            /images/icon_large.png 600w"
    media="(max-width: 600px)">
  <img src="/images/icon_fallback.png" alt="App logo">
</picture>

Cada entrada ahora tiene un descriptor de ancho significativo (300w y 600w) que refleja el ancho real en píxeles de la imagen correspondiente.

❌ Inválido: `0w` en un elemento `<img>`

<img
  srcset="/images/hero_tiny.jpg 0w,
          /images/hero_medium.jpg 800w,
          /images/hero_large.jpg 1200w"
  sizes="100vw"
  src="/images/hero_medium.jpg"
  alt="Mountain landscape">

✅ Corregido: entrada de placeholder eliminada o corregida

Si la imagen pequeña tiene 400 píxeles de ancho, usa 400w:

<img
  srcset="/images/hero_tiny.jpg 400w,
          /images/hero_medium.jpg 800w,
          /images/hero_large.jpg 1200w"
  sizes="100vw"
  src="/images/hero_medium.jpg"
  alt="Mountain landscape">

Alternativamente, si la imagen no pertenece al conjunto en absoluto, simplemente elimínala:

<img
  srcset="/images/hero_medium.jpg 800w,
          /images/hero_large.jpg 1200w"
  sizes="100vw"
  src="/images/hero_medium.jpg"
  alt="Mountain landscape">

Al usar una herramienta de construcción o CMS que genera valores srcset dinámicamente, añade una verificación para filtrar cualquier entrada donde el ancho calculado sea cero o esté faltante antes de renderizar el atributo. Esto previene que el marcado inválido llegue a producción.