Validación HTML: Valor incorrecto X para el atributo "sizes" en el elemento "source": 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

El atributo sizes le dice al navegador qué tan ancha se mostrará una imagen en varios tamaños de ventana gráfica, para que pueda elegir el mejor candidato de srcset antes de que se haya cargado el CSS. Cada entrada en la lista sizes es o bien una condición de media emparejada con una longitud CSS, o una longitud de respaldo sin condición al final. La especificación HTML requiere que estas longitudes sean valores CSS <length> válidos, lo que significa un número seguido por una unidad reconocida. La lista completa de unidades aceptadas incluye px, em, ex, ch, rem, vw, vh, vmin, vmax, cm, mm, in, pt, pc, y las nuevas unidades de ventana gráfica como svw, lvw, dvw, svh, lvh, dvh, y otras.

La función calc() también está permitida, lo que te permite combinar unidades — por ejemplo, calc(100vw - 2rem).

Por qué esto importa

El atributo sizes se analiza antes de que ocurra el diseño, lo que significa que el navegador depende de que sea sintácticamente correcto para tomar decisiones inteligentes de descarga. Un valor inválido fuerza al navegador a recurrir a un tamaño predeterminado (típicamente 100vw), lo que puede llevar a descargar imágenes que son demasiado grandes o demasiado pequeñas. Más allá del rendimiento, un valor inválido de sizes viola la especificación HTML, y algunos navegadores pueden manejar la entrada mal formada de manera inconsistente, llevando a comportamientos impredecibles entre dispositivos.

Errores comunes

Falta completamente la unidad: Escribir 800 en lugar de 800px. Los números sin unidades no son longitudes CSS válidas (la única excepción en CSS es 0, pero incluso 0 debería tener una unidad en sizes para claridad).
Usar porcentajes: Escribir 50% en lugar de 50vw. Los porcentajes no están permitidos en sizes porque el navegador no ha realizado el diseño todavía y no sabe a qué sería relativo el porcentaje. Usa unidades de ventana gráfica como vw en su lugar.
Errores tipográficos o caracteres extra: Un carácter extraviado, coma mal colocada, o espacio en blanco faltante puede cambiar la posición del analizador y hacer que encuentre tokens inesperados donde espera una unidad.
Usar auto en <source>: La palabra clave auto para sizes solo es válida en elementos <img> (y requiere el atributo loading="lazy"). Usarla en <source> disparará un error de validación.

Cómo solucionarlo

Encuentra la posición indicada en el mensaje de error (“en Z”) para localizar el valor problemático.
Si el valor es un número sin unidad, añade la unidad correcta (ej., cambia 600 a 600px).
Si el valor usa %, reemplázalo con una unidad relativa a la ventana gráfica como vw.
Asegúrate de que las comas separen cada par condición-media/longitud, y que la lista termine con una longitud de respaldo.

Ejemplos

Añadir una unidad faltante

El valor 800 en el atributo sizes no es una longitud CSS válida porque no tiene unidad.

<!-- ❌ Inválido: "800" le falta una unidad -->

<img
  src="hero-800.jpg"
  srcset="hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(min-width: 900px) 800, 100vw"
  alt="Imagen hero">

<!-- ✅ Válido: "800px" tiene una unidad apropiada -->

<img
  src="hero-800.jpg"
  srcset="hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(min-width: 900px) 800px, 100vw"
  alt="Imagen hero">

Reemplazar un porcentaje con una unidad de ventana gráfica

Los porcentajes no están permitidos en sizes. Usa vw para expresar un ancho relativo a la ventana gráfica.

<!-- ❌ Inválido: "50%" no es una unidad permitida en sizes -->

<img
  src="card-600.jpg"
  srcset="card-600.jpg 600w, card-900.jpg 900w"
  sizes="50%"
  alt="Tarjeta de producto">

<!-- ✅ Válido: "50vw" significa 50% del ancho de la ventana gráfica -->

<img
  src="card-600.jpg"
  srcset="card-600.jpg 600w, card-900.jpg 900w"
  sizes="50vw"
  alt="Tarjeta de producto">

Solucionando el problema en un elemento `<source>`

Las mismas reglas aplican a los elementos <source> dentro de <picture>. Cada valor de longitud necesita una unidad válida.

<!-- ❌ Inválido: "600" en <source> le falta una unidad -->

<picture>
  <source
    type="image/webp"
    srcset="hero-600.webp 600w, hero-1200.webp 1200w"
    sizes="(min-width: 768px) 600, 100vw">
  <img
    src="hero-600.jpg"
    srcset="hero-600.jpg 600w, hero-1200.jpg 1200w"
    sizes="(min-width: 768px) 600px, 100vw"
    alt="Imagen hero">
</picture>

<!-- ✅ Válido: tanto <source> como <img> usan unidades apropiadas -->

<picture>
  <source
    type="image/webp"
    srcset="hero-600.webp 600w, hero-1200.webp 1200w"
    sizes="(min-width: 768px) 600px, 100vw">
  <img
    src="hero-600.jpg"
    srcset="hero-600.jpg 600w, hero-1200.jpg 1200w"
    sizes="(min-width: 768px) 600px, 100vw"
    alt="Imagen hero">
</picture>

Usar `calc()` para tamaños con unidades mixtas

Puedes usar calc() para combinar diferentes unidades, lo que es especialmente útil cuando se tiene en cuenta el padding o márgenes.

<img
  src="article-800.jpg"
  srcset="article-800.jpg 800w, article-1200.jpg 1200w"
  sizes="(min-width: 1024px) calc(100vw - 4rem), 100vw"
  alt="Imagen de artículo">

Múltiples espacios con diferentes condiciones

Un atributo sizes bien formado con varias condiciones de media, terminando con una longitud de respaldo sin condición:

<picture>
  <source
    type="image/avif"
    srcset="banner-480.avif 480w, banner-960.avif 960w, banner-1440.avif 1440w"
    sizes="(min-width: 1200px) 960px, (min-width: 600px) 80vw, 100vw">
  <img
    src="banner-480.jpg"
    srcset="banner-480.jpg 480w, banner-960.jpg 960w, banner-1440.jpg 1440w"
    sizes="(min-width: 1200px) 960px, (min-width: 600px) 80vw, 100vw"
    alt="Banner responsivo">
</picture>

El patrón general es: sizes="(condición) longitud, (condición) longitud, longitud-de-respaldo". Cada longitud en esa lista — incluyendo el respaldo — debe ser una longitud CSS válida con una unidad o una expresión calc(). Si el error del validador apunta a una posición específica de carácter, inspecciona ese punto exacto para una unidad faltante, un % extraviado, o espacio en blanco mal formado y reemplázalo con una de las unidades reconocidas.