Responsive images that size themselves, across every SDK

Getting correctly-sized responsive images used to mean adding a sizes prop that mirrored your CSS layout, and keeping it in sync as the design changed. No more. Update any DatoCMS framework SDK and you can stop dealing with that.

Responsive images were a burden

The whole point of a responsive srcset is to let the browser pick the smallest image that still looks sharp. But to choose, it has to know how wide the image will actually render, and it needs that number up front, while parsing the HTML, before any CSS or layout exists.

It can't measure the element itself, so the job fell on you: hand-write a sizes value mirroring your CSS layout, and keep it in sync every time the design changed.

Hello, sizes=auto!

Browsers now have a proper fix: sizes="auto". On a lazily-loaded image, it tells the browser to use the element's real, laid-out width when choosing a srcset candidate. Because a lazy image is fetched after layout, the box is already measured by the time the request goes out, so the choice is exact, not estimated.

When you don't pass an explicit sizes prop, all four framework SDKs: react-datocms, vue-datocms, @datocms/svelte, and @datocms/astro, now emit sizes="auto" (with 100vw kept as a fallback) together with loading="lazy":

<!-- before -->
<img srcset="… 200w, 400w, 800w, 1600w" sizes="100vw" loading="lazy" />

<!-- now -->
<img srcset="… 200w, 400w, 800w, 1600w" sizes="auto, 100vw" loading="lazy" />

Upgrade the package and your existing <Image> components start requesting right-sized files on their own.

Under the hood

• If you pass an explicit sizes prop, or your responsiveImage GraphQL query already returns a sizes value, we never override it.

• Images marked with the priority prop load eagerly, and sizes="auto" requires loading="lazy", so they keep their current behavior.

• Every SDK component already sets aspect-ratio + width: 100% + a max-width, which is exactly what auto needs to resolve to the correct box, so the default styling already does the right thing.

Browser support and graceful fallback

sizes="auto" is supported in Chrome and Edge 126+, Opera, Samsung Internet, and Firefox 150+. Safari doesn't support it yet.

That's why we emit sizes="auto, 100vw" rather than a bare auto: browsers that don't understand auto skip it and fall back to 100vw — the safe default that's been the de-facto, so there's no regression anywhere.

Upgrade the SDKs to pick it up:

npm i react-datocms@latest      # React
npm i vue-datocms@latest        # Vue
npm i @datocms/svelte@latest    # Svelte
npm i @datocms/astro@latest     # Astro

Further context

• MDN — the sizes attribute and the auto keyword

• Can I Use — sizes="auto" browser support

• Chrome Platform Status — Auto Sizes for Lazy Loaded Images with Srcset

• Cloudfour — The catch with sizes="auto"