# New lightweight Image component for React, Vue and Svelte

[date: 2024-04-09T15:35:49.719+02:00]

Now that both [`loading=lazy`](https://caniuse.com/loading-lazy-attr) and [`aspect-ratio`](https://caniuse.com/?search=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](https://web.dev/articles/browser-level-image-lazy-loading);
    
-   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](https://nextjs.org/docs/app/building-your-application/rendering/server-components), 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 />`](https://github.com/datocms/react-datocms/blob/master/docs/image.md#image) 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](https://github.com/datocms/react-datocms/releases/tag/v6.0.0)
-   Vue: [https://github.com/datocms/vue-datocms/releases/tag/v6.0.0](https://github.com/datocms/vue-datocms/releases/tag/v6.0.0)
    
-   Svelte: [https://github.com/datocms/datocms-svelte/releases/tag/v2.0.1](https://github.com/datocms/datocms-svelte/releases/tag/v2.0.1)