Now that both loading=lazy and aspect-ratio are broadly supported (> 93% of browsers), we are thrilled to enhance our React, Vue and Svelte SDKs by introducing a new image component that takes advantage of the browser's native capabilities!

What does it do?

The new image component:

• Generates a single <picture /> element — much easier to style, no need for a layout prop!;

• Implements lazy-loading using the native loading="lazy" attribute;

• Sets the blur-up thumb placeholder as the background to the image itself;

• Creates the smallest possible JS footprint — in the case of React, it's implemented as a server component, therefore it doesn't generate any JS and can be rendered and optionally cached on the server.

What's it called?

On React, this new image component is called <SRCImage /> to emphasize that it's a server component.

Its Vue and Svelte equivalents are both called <NakedImage />, to distinguish them from the existing <Image /> component that generates a more complex HTML output composed of multiple elements around the main <picture /> element.

What about the existing image component?

The "old" component <Image /> continues to be supported and remains relevant. Since it runs on the browser, it has the ability to set a cross-fade effect between the placeholder and the original image. It also implements lazy-loading through IntersectionObserver, which allows customization of the thresholds at which lazy loading occurs.

So in short, if you need more advanced configuration options, or need to support older browsers, the existing <Image /> continues to be the preferable solution.

Releases

For all the details, you can refer to the release page of individual npm packages:

• React: https://github.com/datocms/react-datocms/releases/tag/v6.0.0

• Vue: https://github.com/datocms/vue-datocms/releases/tag/v6.0.0

• Svelte: https://github.com/datocms/datocms-svelte/releases/tag/v2.0.1