Validación HTML: Valor incorrecto X para el atributo "sizes" en el elemento "img": Se esperaban unidades (una de "em", "ex", "ch", "rem", "cap", "ic", "vw", "svw", "lvw", "dvw", "vh", "svh", "lvh", "dvh", "vi", "svi", "lvi", "dvi", "vb", "svb", "lvb", "dvb", "vmin", "svmin", "lvmin", "dvmin", "vmax", "svmax", "lvmax", "dvmax", "cm", "mm", "q", "in", "pc", "pt", "px") pero se encontró Y en Z.

Acerca de este problema HTML

Cómo funciona el atributo `sizes`

El atributo sizes funciona junto con srcset para habilitar imágenes responsivas. Cuando proporcionas srcset con descriptores de ancho (ej., 400w, 800w), el navegador necesita saber qué tan ancha será realmente la ranura de la imagen en pantalla para poder elegir el mejor candidato. Eso es lo que proporciona sizes: una lista separada por comas de descriptores de tamaño que le dicen al navegador el ancho renderizado de la imagen bajo varias condiciones del viewport.

Cada entrada en la lista sigue este patrón:

Condición de media opcional seguida de una longitud CSS: (max-width: 600px) 100vw
Una longitud de respaldo final sin condición de media: 33vw

El navegador evalúa las condiciones de media de izquierda a derecha y usa la longitud de la primera condición que coincida. Si ninguna condición coincide, se usa el respaldo.

Por qué ocurre este error

El validador verifica que cada token de longitud en sizes use una de las unidades de longitud CSS absolutas o relativas reconocidas: em, ex, ch, rem, cap, ic, vw, vh, vmin, vmax, cm, mm, q, in, pc, pt, px, y sus variantes de viewport pequeño/grande/dinámico (svw, lvw, dvw, svh, lvh, dvh, svi, lvi, dvi, svb, lvb, dvb, svmin, lvmin, dvmin, svmax, lvmax, dvmax).

Los porcentajes (%) no están permitidos. Este es un punto común de confusión: aunque % es válido en la mayoría de contextos CSS, el atributo sizes lo prohíbe explícitamente porque un porcentaje sería ambiguo (¿porcentaje de qué?). La unidad vw es típicamente el reemplazo correcto cuando quieres expresar una fracción del ancho del viewport.

Estos son los errores más comunes que desencadenan este error:

Unidades faltantes: sizes="100" — un número sin unidad no tiene significado.
Usar porcentajes: sizes="50%" — usa 50vw en su lugar.
Errores tipográficos en nombres de unidades: 100pxx, 100vws, 50 vw (con un espacio entre el número y la unidad).
Múltiples longitudes en una sola entrada: sizes="(min-width: 800px) 50vw 400px" — cada entrada debe contener exactamente una longitud.
Usar calc() incorrectamente: Aunque calc() es válido en sizes, las expresiones dentro también deben usar unidades válidas.

Por qué es importante

Cuando el valor de sizes está mal formado, los navegadores recurren por defecto a 100vw, lo que significa que cada imagen es tratada como si ocupara todo el ancho del viewport. Esto anula el propósito de las imágenes responsivas: el navegador puede descargar archivos innecesariamente grandes en pantallas pequeñas, desperdiciando ancho de banda y ralentizando la carga de páginas. Los valores válidos de sizes son esenciales para la optimización adecuada de imágenes.

Además, el HTML inválido puede causar comportamiento impredecible entre diferentes navegadores y versiones. El marcado que cumple con los estándares asegura renderizado consistente y compatibilidad futura.

Cómo solucionarlo

Encuentra la posición indicada en el mensaje de error (la parte “en Z”) — esto te dice exactamente dónde en la cadena sizes se encontró el token inválido.
Verifica números sin unidad y agrega la unidad apropiada (px, vw, em, etc.).
Reemplaza % con vw si tenías la intención de un porcentaje del ancho del viewport.
Corrige cualquier error tipográfico en los nombres de unidades.
Asegúrate de que cada entrada separada por comas tenga exactamente una longitud, opcionalmente precedida por una condición de media entre paréntesis.
Verifica que no haya espacio entre el número y su unidad — 100vw es correcto, 100 vw no lo es.

Ejemplos

❌ Número sin unidad

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

✅ Corregido: agregar unidades `vw` y `px`

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

❌ Usando porcentaje inválido

<img
  src="banner-800.jpg"
  srcset="banner-800.jpg 800w, banner-1600.jpg 1600w"
  sizes="(max-width: 700px) 100%, 80%"
  alt="Promotional banner">

✅ Corregido: reemplazar `%` con `vw`

<img
  src="banner-800.jpg"
  srcset="banner-800.jpg 800w, banner-1600.jpg 1600w"
  sizes="(max-width: 700px) 100vw, 80vw"
  alt="Promotional banner">

❌ Múltiples longitudes en una entrada

<img
  src="hero-640.jpg"
  srcset="hero-640.jpg 640w, hero-1280.jpg 1280w"
  sizes="(min-width: 800px) 50vw 400px, 100vw"
  alt="Hero image">

✅ Corregido: una longitud por entrada, separadas por comas

<img
  src="hero-640.jpg"
  srcset="hero-640.jpg 640w, hero-1280.jpg 1280w"
  sizes="(min-width: 800px) 50vw, 100vw"
  alt="Hero image">

❌ Error tipográfico en nombre de unidad

<img
  src="thumb-320.jpg"
  srcset="thumb-320.jpg 320w, thumb-640.jpg 640w"
  sizes="320pxx"
  alt="Thumbnail">

✅ Corregido: corregir la unidad

<img
  src="thumb-320.jpg"
  srcset="thumb-320.jpg 320w, thumb-640.jpg 640w"
  sizes="320px"
  alt="Thumbnail">

✅ Múltiples condiciones de media con un respaldo

<img
  src="photo-640.jpg"
  srcset="photo-640.jpg 640w, photo-960.jpg 960w, photo-1280.jpg 1280w"
  sizes="(min-width: 1200px) 800px, (min-width: 800px) 60vw, 90vw"
  alt="Landscape photo">

✅ Usando `calc()` con unidades válidas

<img
  src="article-img-400.jpg"
  srcset="article-img-400.jpg 400w, article-img-800.jpg 800w"
  sizes="(min-width: 960px) calc(50vw - 2rem), 100vw"
  alt="Article illustration">

La función calc() es válida dentro de sizes y es útil cuando el ancho de la imagen depende de una combinación del tamaño del viewport y espaciado fijo como padding o márgenes. Solo asegúrate de que cada valor dentro de calc() también use unidades válidas.