Performance optimization New

Responsive images that size themselves, across every SDK

June 12th, 2026

TL;DR — Getting correctly-sized responsive images used to mean hand-writing a sizes prop that mirrored your CSS layout, and keeping it in sync as the design changed. Update any DatoCMS framework SDK and you can stop. Never set sizes? It's a free win with no code changes. Did set it? You can delete it.

Responsive images have always been 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 to you: hand-write a sizes value mirroring your CSS layout, and keep it in sync every time the design changed. Skip it, and you got the safe-but-pessimistic "assume the image is as wide as the viewport", so a 400px sidebar image on a 1600px screen downloaded the full-viewport candidate anyway: roughly 16× more pixels than it needed.

Welcome, `sizes=auto`!

Browsers now have a proper fix: sizes="auto". On a lazily-loaded image, it tells the browser to drop the guess and 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. The manual bookkeeping is gone: the browser does the measuring you used to do by hand.

What changed

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" />

The amount of work on your side: none. Upgrade the package and your existing <Image> components start requesting right-sized files on their own.

When it kicks in, and when it doesn't

You stay in control. If you pass an explicit sizes prop, or your responsiveImage GraphQL query already returns a sizes value, that wins — we never override it.
Priority images are untouched. Images marked with the priority prop load eagerly, and sizes="auto" requires loading="lazy", so they keep their current behavior.
It needs a real layout size. 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 exactly 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 standard across image libraries, and the exact behavior you have today. So there's no regression anywhere: just a free optimization on the browsers that can do it, with more joining the list over time.

Available now

Upgrade 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

Product Updates