Info srcset con descriptores de ancho sin atributo sizes
Por qué un <img srcset> que usa descriptores de ancho también necesita un atributo sizes, y qué elige el navegador sin él.
El validador marca un <img srcset> cuyos candidatos usan descriptores de ancho (por ejemplo 800w) pero no tienen un atributo sizes junto a él.
Ejemplo
<!-- Incorrecto: el navegador tiene que adivinar el tamaño de visualización -->
<img src="foto-400w.jpg"
srcset="foto-400w.jpg 400w, foto-800w.jpg 800w, foto-1600w.jpg 1600w"
alt="Foto del producto">
<!-- Correcto -->
<img src="foto-400w.jpg"
srcset="foto-400w.jpg 400w, foto-800w.jpg 800w, foto-1600w.jpg 1600w"
sizes="(min-width: 768px) 50vw, 100vw"
alt="Foto del producto">Por qué importa
Los descriptores de ancho (400w) le dicen al navegador qué tan grande es realmente cada archivo de imagen candidato, pero no qué tan grande se va a mostrar la imagen — eso es lo que da sizes. Sin él, la especificación dice que el navegador debe asumir que la imagen se muestra tan ancha como todo el viewport, lo cual generalmente significa que elige un archivo innecesariamente grande en cualquier layout donde la imagen en realidad es más chica que el ancho completo (una miniatura, un elemento de grilla, una imagen de barra lateral). Los dos atributos trabajan juntos: srcset lista lo que está disponible, sizes dice qué tan grande se va a renderizar realmente, y el navegador combina ambos con la densidad de píxeles del dispositivo para elegir el mejor archivo.
Frequently asked questions
¿Necesito sizes si solo uso descriptores de densidad (1x, 2x)?
No — sizes solo es relevante para los descriptores de ancho (400w). Los descriptores de densidad ya le dicen al navegador exactamente qué archivo elegir según la relación de píxeles del dispositivo, ya que en ese caso se asume que el tamaño de visualización es el tamaño CSS natural de la imagen.
¿Cuál es un valor razonable de sizes si no estoy seguro?
100vw (todo el ancho del viewport) es un valor por defecto seguro si la imagen alguna vez se muestra a ancho completo en algún breakpoint — se equivoca del lado de que el navegador elija un archivo más grande de lo estrictamente necesario en vez de uno borroso.