Easy Responsive Images in Umbraco With Slimsy

Everyone knows that they should be implementing responsive images within their websites; few people actually take the time to do it.  In this tutorial, you will learn how you can quickly and simply integrate responsive images in your Umbraco, using a free package called Slimsy.

What Is Slimsy?

Slimsy is a really cool Umbraco package that anyone who cares about creating optimal web page performance should check-out. Any good web developer knows performance is important. We all know we should implement responsive images, however, the majority of websites don't bother.  Most projects have tight deadlines.  Content editors complain that creating responsive images takes too much time.  Even the web standard people had issues agreeing on the right way of doing it.  

This is where Slimsy comes into play.  After installing it, within 5 minutes, you can update your templates so Umbraco handles everything for you..  sounds good right?

How To Implement Responsive Images Within Umbraco

You can install Slimsy via Nuget:

To get responsive images working in your project, within your views you will need to use the Slimsy HTML helpers.  In the background, Slimsy uses a combination of 'LazySizes.js', ImageProcessor.Web and the Umbraco image cropper in order to work.  This means that within your layout/script references section you will need to reference the following two JS libraries.  

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

In terms of configuration, that's it!

How To Make Images That Content Editors Add Responsive?

Making all the static images - images content editors can't change - within your templates and views is simple enough.  The real challenge is ensuring images that content editors add are responsive as well.  Once a document type with a rich-text area has been created, you're stuffed!  This is why my favorite feature of Slimsy is the ability to make images that content editors add into rich-text areas responsive.. .without them having to do anything!

 

In the following code example, I'm using the ModelBuilder to generate a strongly-typed model that I'm passing into my view.  In my document type, I have a property called MainContent:

        [ImplementPropertyType("mainContent")]
        public IHtmlString MainContent { get; }

To make any image within that area responsive, you simply need to wrap the call into the ConvertImgToSrcSet HTML helper, like so

            <div class="content-page__content">
                @Html.ConvertImgToSrcSet(Model.CurrentPage.MainContent.ToHtmlString(), true, true)
            </div>

Simply using this helper, when the page renders, if you look in the page source, you will see that Slimsy has added a srcset attribute on the image with multiple breakpoints, as seen below:

If you also care to check, if you have images on your page, not in the initial page load they will be lazy loaded.  As you scroll down your page you will see additional image requests getting fired off.  In this way, your page will load in the most optimal way possible.

As I'm hoping you can appreciate from the simplicity of this tutorial, getting responsive image working in your solution can be done in less than half an hour, so there really isn't an excuse for not trying it out.

Slimsy, doesn't just work on rich text areas,  it will also work on your normal images.  If you have a normal image defined within your document type, in your view if you render it using the Slimsy helpers it will be lazy loaded and the different responsive breakpoints and src-sets will be generated for you:

<img data-srcset="@Url.GetSrcSetUrls(imageViewModel.ImageBlock.Image, new AspectRatio(16, 9))" data-src="@Url.GetCropUrl(imageViewModel.ImageBlock.Image)" sizes="auto" class="lazyload" />

To get it working, ensure you add the 'lazyload' class to your tag and the sizes 'auto'.  To generate the src and the data-src links.  Pass your image as IPublishedContent, into the GetCropUrl() helper to allow Umbraco to auto-generate the images for you.  Use the Slimsy GetSrcSetUrls() passing in the image and the aspect ratio to get the full data-src set for you.

Slimsy really is simple to use and it will improve your page response times, so I highly recommend you check it out.  You can find some more information about Slimsy here.

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top