Skip to content

v0.6.13 — automatic sizes="auto"

Latest

Choose a tag to compare

@stefanoverna stefanoverna released this 12 Jun 10:08

Automatic sizes="auto" for lazy-loaded responsive images

When you don't pass an explicit sizes prop (and the image isn't priority), the image components now emit sizes="auto, 100vw" together with loading="lazy".

On supporting browsers (Chrome/Edge 126+, Opera, Samsung Internet, Firefox 150+) the browser picks the optimal srcset candidate from the image's real laid-out width instead of assuming the full viewport width (100vw) — often a much smaller download. Browsers without support (e.g. Safari) fall back to 100vw, i.e. the previous behavior, so there is no regression.

  • An explicit sizes (prop, or coming from the responsiveImage GraphQL query) still takes precedence — we never override it.
  • priority images are unchanged (they load eagerly, and sizes="auto" requires loading="lazy").
  • Applies to both the SSR/native components and the JavaScript lazy-loading components.