Effortless Responsive Images with LazySizes and Umbraco
LazySizes.js used in conjunction with ImageSharp.Web and the built-in Umbraco Image Cropper will make your responsive website's images both adaptive and "retina" quality (if supported by the client browser).
Slimsy includes lazysizes.min.js
Below is an example of how easy it is to render a multi source picture tag with a fallback image using v4 in Umbraco v10
<slimsy-picture media-item="@person.Photo" width="323" height="300" css-class="myClass" render-lqip="true" render-webp-alternative="true"></slimsy-picture>
Please visit our GitHub for all the information you need to configure and integrate Slimsy into your website projects.