41 votes


Effortless Responsive Images with LazySizes and Umbraco

Slimsy v2 is not compatible with Slimsy v1 at all, if you upgrade you will have to refactor all of your code!


Note Slimsy v2.0.0+ requires Umbraco v7.6.0+

LazySizes.js used in conjunction with ImageProcessor.Web and the built-in Umbraco Image Cropper will make your responsive websites images both adaptive and "retina" quality (if supported by the client browser).

Slimsy includes lazysizes.min.js and picturefill.min.js and some helper methods.

Below is an example of how easy it is to use image srcset with a fallback image:

@foreach (var feature in featuredPages)
    var featureImage = Umbraco.TypedMedia(feature.GetPropertyValue<int>("image"));
    <div class="3u">
        <!-- Feature -->
        <section class="is-feature">
        	<img data-srcset="@Url.GetSrcSetUrls(featureImage, 270, 161)" data-src="@Url.GetCropUrl(featureImage, 270, 161)" sizes="auto" class="lazyload" />

Please visit our GitHub for all the information you need to configure and integrate Slimsy into your website projects.

Slimsy v1 info is archived on GitHub at https://github.com/Jeavon/Slimsy/tree/v1


Archived files


Source code

Package owner

Jeavon Leopold

Jeavon Leopold

Jeavon has 13021 karma points

Package Compatibility

This package is compatible with the following versions as reported by community members who have downloaded this package:
Untested or doesn't work on Umbraco Cloud
8.0.x (untested)
7.13.x (untested)
7.12.x (100%)
7.11.x (100%)
7.10.x (100%)
7.9.x (100%)
7.8.x (100%)
7.7.x (100%)
7.6.x (100%)
7.5.x (untested)
7.4.x (100%)
7.3.x (73%)
7.2.x (100%)
7.1.x (100%)
7.0.x (untested)
6.1.x (untested)
6.0.x (untested)

You must login before you can report on package compatibility.

Package Information

  • Package owner: Jeavon Leopold
  • Contributors: Marc Stöcker , Will Phillips
  • Created: 22/05/2014
  • Current version 2.0.0
  • .net Version 4.5
  • License MIT
  • Downloads: 8380