Validación HTML: Valor incorrecto X para el atributo "sizes" en el elemento "source": condición de medios incorrecta: error de análisis en Y

Acerca de este problema HTML

El atributo sizes le dice al navegador qué tan ancha se mostrará una imagen en diferentes tamaños de ventana gráfica, para que pueda elegir el mejor candidato de srcset. Solo se aplica cuando srcset usa descriptores de ancho (por ejemplo, 480w, 800w). El valor es una lista separada por comas donde:

Cada entrada (excepto la última) es una condición de medios entre paréntesis seguida de una longitud CSS — por ejemplo, (min-width: 800px) 50vw.
La entrada final es una longitud de respaldo sin condición de medios — por ejemplo, 100vw.

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

La sintaxis de condición de medios refleja las consultas de medios CSS pero sin la palabra clave @media. Puedes usar operadores lógicos como and, or, y not, y características como min-width, max-width, orientation, etc.

Por qué ocurre este error

El validador analiza el valor sizes según el estándar HTML vigente y la especificación de Consultas de Medios CSS. Se activa un error de análisis cuando el valor no se ajusta a la gramática esperada. Las causas comunes incluyen:

Paréntesis faltantes alrededor de la condición de medios: min-width: 600px 50vw en lugar de (min-width: 600px) 50vw.
Longitud faltante después de una condición de medios: (min-width: 800px) sin ninguna longitud después.
Unidades inválidas o faltantes en la longitud: 50 en lugar de 50vw, 50px, o 50rem.
Comas finales o separadores extra: (min-width: 600px) 50vw, , 100vw.
Sintaxis inválida de característica de medios: errores tipográficos como (minwidth: 600px) o usar tokens no soportados.
Usar sizes con descriptores de densidad de píxeles: cuando srcset usa 1x, 2x en lugar de descriptores de ancho, el atributo sizes no tiene sentido y puede confundir a los validadores.

Por qué es importante

Selección de imagen del navegador: Los navegadores dependen de un valor sizes correctamente analizado para elegir la imagen óptima de srcset. Un valor malformado hace que el navegador recurra a un tamaño predeterminado (típicamente 100vw), lo que puede resultar en descargar imágenes innecesariamente grandes en pantallas pequeñas o imágenes borrosas en pantallas grandes.
Cumplimiento de estándares: Los valores sizes inválidos violan la especificación HTML y pueden comportarse de manera impredecible en diferentes navegadores.
Rendimiento: Los valores sizes correctos son esenciales para la optimización de imágenes responsivas. Sin ellos, pierdes los ahorros de ancho de banda que srcset con descriptores de ancho está diseñado para proporcionar.

Cómo solucionarlo

Envuelve cada condición de medios entre paréntesis: (min-width: 600px), no min-width: 600px.
Incluye siempre una longitud CSS válida después de cada condición: (min-width: 600px) 50vw, no solo (min-width: 600px).
Termina con una longitud de respaldo que no tenga condición: 100vw.
Usa unidades de longitud CSS válidas: vw, px, em, rem, o expresiones calc().
Elimina las comas finales o duplicadas.
Omite sizes por completo si tu srcset usa descriptores de densidad de píxeles (1x, 2x).

Ejemplos

Incorrecto: paréntesis faltantes alrededor de la condición de medios

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

Correcto: paréntesis añadidos

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

Incorrecto: longitud faltante después de la condición de medios

<img
  src="banner-800.jpg"
  srcset="banner-400.jpg 400w, banner-800.jpg 800w"
  sizes="(min-width: 700px), 100vw"
  alt="A promotional banner">

La primera entrada (min-width: 700px) no tiene valor de longitud — la coma hace que parezca una entrada separada, pero está incompleta.

Correcto: longitud añadida después de la condición

<img
  src="banner-800.jpg"
  srcset="banner-400.jpg 400w, banner-800.jpg 800w"
  sizes="(min-width: 700px) 60vw, 100vw"
  alt="A promotional banner">

Incorrecto: usar `sizes` con descriptores de densidad de píxeles

<img
  src="avatar.jpg"
  srcset="avatar@1x.jpg 1x, avatar@2x.jpg 2x"
  sizes="(min-width: 600px) 80px, 40px"
  alt="User avatar">

El atributo sizes solo tiene sentido con descriptores de ancho (w). Cuando srcset usa descriptores de densidad (1x, 2x), omite sizes.

Correcto: `sizes` eliminado para descriptores de densidad

<img
  src="avatar.jpg"
  srcset="avatar@1x.jpg 1x, avatar@2x.jpg 2x"
  alt="User avatar">

Incorrecto: coma final

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

Correcto: coma final eliminada

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

Usar `sizes` en un `<source>` dentro de `<picture>`

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

Usar condiciones de medios compuestas

Puedes combinar condiciones con and:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(min-width: 900px) and (orientation: landscape) 50vw, 100vw"
  alt="A sample photo">

Documento válido completo

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Responsive Image Example</title>
  </head>
  <body>
    <img
      src="pic-800.jpg"
      srcset="pic-400.jpg 400w, pic-800.jpg 800w"
      sizes="(min-width: 600px) 50vw, 100vw"
      alt="A picture demonstrating valid sizes usage">
  </body>
</html>