Our.Umbraco.Slimsy 4.1.0

.NET 6.0
dotnet add package Our.Umbraco.Slimsy --version 4.1.0
NuGet\Install-Package Our.Umbraco.Slimsy -Version 4.1.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Our.Umbraco.Slimsy" Version="4.1.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Our.Umbraco.Slimsy --version 4.1.0
#r "nuget: Our.Umbraco.Slimsy, 4.1.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Our.Umbraco.Slimsy as a Cake Addin
#addin nuget:?package=Our.Umbraco.Slimsy&version=4.1.0

// Install Our.Umbraco.Slimsy as a Cake Tool
#tool nuget:?package=Our.Umbraco.Slimsy&version=4.1.0

Slimsy v4

Effortless Responsive & Lazy Images with LazySizes and Umbraco

Slimsy v4 is made for Umbraco v10, v11 & v12!

alternate text is missing from this package README image

Release Downloads

NuGet Package: NuGet release

Prerelease Downloads

NuGet Package: MyGet build

Build status


1. Install from NuGet

2. Add to Startup.cs in the ConfigureServices method


3. Add to _ViewImports.cshtml

@using Slimsy.Enums;
@addTagHelper *, Slimsy
@inject Slimsy.Services.SlimsyService SlimsyService

4. Add lazysizes.min.js & to your templates/views

In your template add the JavaScript files

<script src="/scripts/lazysizes.min.js" async=""></script>

5. Ensure all img elements are set to display: block or display: inline-block;


img {

If you are using LQIP then you will also need to ensure img elements are set to width:100%;


img {

6. Use the <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"/>

Or inject SlimsyService into your ViewComponents

private readonly SlimsyService _slimsyService;
public ResponsiveImageViewComponent(SlimsyService slimsyService)
	_slimsyService = slimsyService;

7 (optional). Adjust the rendering of your TinyMce Richtext editors

<div class="col-md-9">
        @SlimsyService.ConvertImgToResponsive(Model, "richTextBody", renderPicture:true, pictureSources: new []{"webp"})

8 (optional). Adjust the renderer of media within the Grid editor

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": "",
    "BGColor": ""

or edit Startup.cs to modify SlimsyOptions

.AddSlimsy(options =>
    options.DefaultQuality = 60;
    options.WidthStep = 60;
    options.UseCropAsSrc = true;

Available in v4.1+

TagHelper has some options in appsettings.json

  • SingleSources - allows specific file extensions to only render a single source
  • DefaultPictureSources - allows multiple picture sources to be defined, example below is for both avif and webp formats
  • ImageDimensions - defines if width and height attributes should be rendered on the img tag


  "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 tag
  • fetch-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 focussed

How to use AVIF format in v4.1+

There 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.

1. Install the CloudflareImageUrlGenerator package

See https://github.com/Jeavon/CloudflareImageUrlGenerator for full details.

dotnet add package Umbraco.Community.CloudflareImageUrlGenerator

2. Add to Startup.cs in the ConfigureServices method


3. Enable Image Resizing on Cloudflare


4. Set the avif format as a DefaultPictureSources in appsettings.json


  "Slimsy": {
    "TagHelper": {
      "DefaultPictureSources": [
          "Extension": "avif",
          "Quality": 60
          "Extension": "webp",
          "Quality": 70

5. Check the rendered sources

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

Test Site & Source Code

A test site is included in the solution, the username and password for Umbraco are admin@admin.com/password1234567890.

To run the Blob Test site you will need a Azure storage account, to set the connection string in a local user secret with the TestSite.TestSiteBlobs folder run

dotnet user-secrets set "Umbraco:Storage:AzureBlob:Media:ConnectionString" "DefaultEndpointsProtocol=https;AccountName=;AccountKey=;EndpointSuffix=core.windows.net"

Credits and references

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.

Change log


Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Additional computed target framework(s)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
4.1.0 2,155 9/22/2023
4.1.0-beta4 2,750 8/9/2023
4.1.0-beta3 500 7/20/2023
4.1.0-beta2 380 7/13/2023
4.1.0-beta1 276 6/29/2023
4.0.3 6,739 4/5/2023
4.0.2 6,520 11/25/2022
4.0.1 435 11/21/2022
4.0.0 6,979 9/20/2022
4.0.0-beta1 352 8/3/2022
3.0.0 36,557 5/22/2020
3.0.0-beta5 987 5/14/2020
3.0.0-beta4 576 4/9/2020
3.0.0-beta3 4,219 10/15/2019
3.0.0-beta2 2,043 7/29/2019
3.0.0-beta1 4,343 4/2/2019
2.1.0-beta2 4,685 10/3/2018
2.1.0-beta1 805 10/2/2018
2.0.0 22,435 4/27/2018
2.0.0-beta4 1,137 3/14/2018
2.0.0-beta3 1,966 1/5/2018
2.0.0-beta2 1,264 10/31/2017
2.0.0-beta1 892 10/25/2017
1.1.7 33,958 2/3/2016
1.1.6 2,945 11/3/2015
1.1.4 7,690 2/26/2015