v6.0.0

Introducing server component

Now that both loading=lazy and aspect-ratio are broadly supported (> 93% of browsers) we can avoid complex JS to achieve lazy-loaded images with placeholders!

<SRCImage /> is a React Server Component, so it can be rendered and optionally cached on the server. It doesn't create any JS footprint. It generates a single <picture /> element and implements lazy-loading using the native loading="lazy" attribute. The placeholder is set as the background to the image itself.

Be careful: the placeholder is not removed when the image loads, so it's not recommended to use this component if you anticipate that the image may have an alpha channel with transparencies.

Major changes to <Image /> component:

• removed lazyLoad prop: lazy loading is automatically disabled for images using priority

Other

All the examples have been consolidated into a single SPA React application to ensure a straightforward maintenance process: https://react-datocms-example.netlify.app/

v5.0.3...v6.0.0