Everyone knows that they should be implementing responsive images within their websites, however, 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 power website, using a free community package called Slimsy. Any good web developer knows that page performance is important. Most content editors don't have the time, or, the know-how to create and crop good images. Even the web standards folk had issues agreeing on the right way of doing it.
This is where Slimsy comes into play. Slimsy is a really cool Umbraco package that anyone who cares about creating optimal web page performance should check out. After installing it, within 5 minutes, you can update your templates so Umbraco handles the responsive image re-sizing part for you... sounds good right?
How To Implement Responsive Images Within Umbraco
You can install Slimsy via Nuget:
To get your pages to start outputting responsive images you will need to use the Slimsy HTML helper. In the background, Slimsy uses a combination of LazySizes.js, ImageProcessor.Web and the Umbraco image cropper. This means that after installing the package, within your main layout you will need to reference the following two JS libraries.
In terms of configuration, that's it!
How To Make Images That Content Editors Add Responsively?
Making static images that you reference in your views is simple., as seen below you can simply pass in the IPublishedContent into GetSrcSetUrls(), job done.
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:
To get Slimsy to work with normal images, ensure you add the lazyload class to your tag and set the sizes to attribute to 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.
The real challenge is ensuring images that content editors add into a rich-text area are responsive. This is why my favourite feature of Slimsy is the ability to make these types of images automatically responsive! In the following code example, I'm using the Umbraco ModelBuilder to generate a strongly-typed model that I'm passing into my view. In my document type, I have a property called mainContent:
To make any image within that area responsive, you simply need to wrap the call into the ConvertImgToSrcSet() HTML helper, like so:
Simply adding a rich text area into ConvertImgToSrcSet() will convert it. 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, you will notice that images that live below the page fold are not loaded. Wrapping them in Slimsy will add a lazy-loading ability to your site. As you scroll down your page you will see additional image requests getting fired off. Your page is now loading in the most optimal way possible, with optimised images and lazy loading! As I'm hoping you can appreciate from the simplicity of this tutorial, getting a 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 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. Happy Coding 🤘
