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ó “w” en Y

Los atributos sizes y srcset trabajan juntos para habilitar imágenes responsivas, pero cumplen roles distintos y usan sintaxis diferentes. El atributo srcset enumera los archivos de imagen disponibles junto con sus anchos intrínsecos usando el descriptor w (por ejemplo, 800w significa que el archivo de imagen tiene 800 píxeles de ancho). El atributo sizes, por otro lado, le dice al navegador qué ancho tendrá realmente la imagen renderizada en el diseño, usando unidades de longitud CSS estándar. El navegador combina esta información —sabiendo qué archivos están disponibles y qué tan grande aparecerá la imagen— para elegir el archivo más eficiente para descargar.

Un error común es confundir estas dos sintaxis, típicamente copiando un descriptor de ancho como 860w del srcset y colocándolo en sizes. Como w no es una unidad CSS, el validador la rechaza. Esto importa porque un valor sizes inválido impide que el navegador calcule correctamente qué fuente de imagen usar, potencialmente causando que descargue una imagen innecesariamente grande (desperdiciando ancho de banda) o una imagen muy pequeña (resultando en mala calidad).

Cómo funciona el atributo sizes

El atributo sizes acepta una lista separada por comas de condiciones de media emparejadas con longitudes CSS, más una longitud predeterminada opcional al final. Cada entrada sigue el patrón (condición-de-media) longitud. El navegador evalúa las condiciones en orden y usa la longitud de la primera condición que coincida. Si ninguna coincide, usa el valor predeterminado final.

Las unidades de longitud CSS válidas incluyen px, em, rem, vw, vh, ch, cm, mm, in, pt, pc, y expresiones calc() de CSS. Puedes combinar unidades con calc() para un dimensionamiento más preciso —por ejemplo, calc(100vw - 2rem).

Ejemplos

❌ Incorrecto: usar w en sizes

Esto desencadena el error de validación porque 860w es un descriptor de ancho de srcset, no una longitud CSS:

<img
  alt="Una foto de paisaje"
  sizes="860w"
  srcset="photo-small.jpg 430w, photo-large.jpg 860w"
  src="photo-large.jpg">

✅ Correcto: usar px en sizes

Reemplaza el valor w con una longitud CSS que refleje el tamaño de visualización real de la imagen:

<img
  alt="Una foto de paisaje"
  sizes="860px"
  srcset="photo-small.jpg 430w, photo-large.jpg 860w"
  src="photo-large.jpg">

✅ Correcto: sizes responsivo con condiciones de media

Usa condiciones de media para especificar diferentes tamaños de visualización en diferentes anchos de viewport:

<img
  alt="Una foto de paisaje"
  sizes="(min-width: 1024px) 860px, (min-width: 568px) 430px, 100vw"
  srcset="photo-small.jpg 430w, photo-large.jpg 860w"
  src="photo-large.jpg">

Esto le dice al navegador:

• En viewports de 1024px y más anchos, la imagen se muestra con 860px de ancho.
• En viewports de 568px y más anchos, la imagen se muestra con 430px de ancho.
• En viewports más pequeños, la imagen llena todo el ancho del viewport (100vw).

✅ Correcto: usar calc() en sizes

Cuando el ancho de la imagen depende de padding o márgenes, calc() proporciona dimensionamiento preciso:

<img
  alt="Una foto de paisaje"
  sizes="(min-width: 768px) calc(50vw - 2rem), calc(100vw - 1rem)"
  srcset="photo-small.jpg 400w, photo-medium.jpg 800w, photo-large.jpg 1200w"
  src="photo-medium.jpg">

Puntos clave

• El descriptor w pertenece solo al srcset, donde describe el ancho intrínseco de cada archivo de imagen.
• El atributo sizes usa unidades de longitud CSS (px, vw, em, calc(), etc.) para describir qué tan ancha aparecerá la imagen en pantalla.
• Si tu imagen siempre se muestra con un ancho fijo, un valor simple como sizes="300px" es suficiente.
• Si el ancho de tu imagen varía según el viewport, usa condiciones de media con longitudes CSS apropiadas para darle al navegador la información que necesita para seleccionar la mejor fuente.

Más información:

MDN Reference

MDN Web Docs: img sizes attribute

→

web.dev Article

Web.dev: Responsive Images | sizes attribute explained

→