Effortless Responsive & Lazy Images with LazySizes and Umbraco
MIT License
Effortless Responsive & Lazy Images with LazySizes and Umbraco
Release Downloads
NuGet Package:
Prerelease Downloads
NuGet Package:
.AddSlimsy()
to program.cs before the call to the .Build()
methode.g.
builder.CreateUmbracoBuilder()
.AddBackOffice()
.AddWebsite()
.AddDeliveryApi()
.AddComposers()
.AddSlimsy()
.Build();
@using Slimsy.Enums;
@addTagHelper *, Slimsy
@inject Slimsy.Services.SlimsyService SlimsyService
In your template add the JavaScript files
<script src="/scripts/lazysizes.min.js" async=""></script>
display: block
or display: inline-block;
e.g.
img {
display:block;
}
If you are using LQIP then you will also need to ensure img elements are set to width:100%;
e.g.
img {
display:block;
width:100%;
}
<slimsy-picture>
tag helper or manually adjust your image elements, adding data-srcset
, data-src
, sizes="auto"
& class="lazyload"
attributes<slimsy-picture media-item="@person.Photo" width="323" height="300" css-class="myClass" render-lqip="true" render-webp-alternative="true"></slimsy-picture>
Use the GetSrcSetUrls
UrlHelper extension methods to generate your data-srcset
attributes. For these methods to function correctly your image property types should use the built-in Image Cropper.
<div class="employee-grid__item__image">
<img data-srcset="@Url.GetSrcSetUrls(person.Photo, 323, 300)" srcset="@Url.GetSrcSetUrls(person.Photo, 250, 250, quality: 40)" data-sizes="auto" class="lazyload"/>
</div>
Or inject SlimsyService into your ViewComponents
private readonly SlimsyService _slimsyService;
public ResponsiveImageViewComponent(SlimsyService slimsyService)
{
_slimsyService = slimsyService;
}
<div class="col-md-9">
<article>
@SlimsyService.ConvertImgToResponsive(Model, "richTextBody", renderPicture:true, pictureSources: new []{"webp"})
</article>
</div>
There's quite a lot to this - so check it out in the demo site here
Add/Edit appsettings.json
"Slimsy": {
"WidthStep": 180,
"UseCropAsSrc": false,
"DefaultQuality": 70,
"Format": "",
"BackgroundColor": "",
"AppendSourceDimensions": true,
"EncodeCommas": true,
"AutoOrient": true
}
or edit Startup.cs
to modify SlimsyOptions
.AddSlimsy(options =>
{
options.DefaultQuality = 60;
options.WidthStep = 60;
options.UseCropAsSrc = true;
})
TagHelper also has some options in appsettings.json
(available in v4.1+)
img
tage.g.
"Slimsy": {
"WidthStep": 180,
"UseCropAsSrc": true,
"DefaultQuality": 70,
"TagHelper": {
"SingleSources": [ "gif" ],
"DefaultPictureSources": [
{
"Extension": "avif",
"Quality": 60
},
{
"Extension": "webp",
"Quality": 70
}
],
"ImageDimensions": true
}
}
TagHelper has new parameters
decorative
which renders role="presentation"
on the img
tagfetch-priority
which renders on the img
tag, for example fetchpriority="high"
image-crop-mode
specifies a crop mode such as "Pad"image-crop-anchor
used with crop-mode to set where cropping should be focussedloading
(available v4.2+) you can set to Eager
to not lazy load, useful for optimzing LCP on the first image rendered on the pageThere is not currently a AVIF encoder for ImageSharp, keep an eye on https://github.com/hey-red/ImageSharp.Heif which has amditions of adding a encoder in the future.
Cloudflare Image Resizing does support AVIF encoding and this can be used by Slimsy.
See https://github.com/Jeavon/CloudflareImageUrlGenerator for full details.
dotnet add package Umbraco.Community.CloudflareImageUrlGenerator
.AddCloudflareImageUrlGenerator()
https://developers.cloudflare.com/images/image-resizing/enable-image-resizing/
e.g.
"Slimsy": {
"AppendSourceDimensions": true,
"TagHelper": {
"DefaultPictureSources": [
{
"Extension": "avif",
"Quality": 60
},
{
"Extension": "webp",
"Quality": 70
}
]
}
}
Image paths for avif and webp should begin with /cdn-cgi/image/format=avif,quality=70
Lazysizes.js is awesome and it's part of what makes Slimsy so easy to implement. If you need to find out more information about it or how to hook into it's Javascript events be sure to check out it's GitHub
A test site is included in the solution, the username and password for Umbraco are [email protected]/password1234567890.
This project includes LazySizes which is MIT licensed.
Without the amazing ImageSharp this package wouldn't exist, so many thanks go to James and all the SixLabors team for creating ImageSharp!
Many thanks to Douglas Robar for naming Slimsy.