Introducing <datocms-naked-image />
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!
<datocms-naked-image /> generates minimum JS footprint, outputs 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.
Major changes to existing <datocms-image>:
- removed
lazy-load: lazy loading is automatically disabled for images usingpriority - removed
root-style: you can simply usestyleto style the root element - removed
explicit-width - added
loadevent - added
rootRefandimageRefas public properties
Other
All the examples have been consolidated into a single SPA React application to ensure a straightforward maintenance process.