# Responsive images that size themselves, across every SDK

[date: 2026-06-12T12:29:38.214+02:00]

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"`:

```html
<!-- 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:

Terminal window

```bash
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#sizes)
-   [Can I Use — `sizes="auto"` browser support](https://caniuse.com/wf-sizes-auto)
    
-   [Chrome Platform Status — Auto Sizes for Lazy Loaded Images with Srcset](https://chromestatus.com/feature/5191555708616704)
-   [Cloudfour — The catch with `sizes="auto"`](https://cloudfour.com/thinks/ending-responsive-images/)