Earlier this year i wrote about a solution for optimizing the images on your Episerver site. Since then, that solution has been included in the ImageProcessor.Web.Episerver nuget package. With the Picture html helper included in the nuget it’s easy to optimize the images in size, quality, and file size. Images will be responsive, and can be lazy loaded.
The Picture helper renders a picture element. The picture element presents a smorgasbord of images in different sizes and formats. It’s then up to the browser to select the most appropriate image depending on screen resolution, viewport width, network speed, and the rules that you set up.
Update: Similar functionality for Optimizely CMS 12 is now available
This article shows the steps needed to start using the Picture helper, and also describe some of the details a bit more:
- Install the nugets
- Identify, and define the “image types” on your site
- Use the Picture html helper
- Tweak configuration (optional)
Install the nugets
ImageProcessor.Web.Episerver, or ImageProcessor.Web.Episerver.Azure if your site is hosted on Azure.
Define your image types
This is the only part that might might mean some work for you.
An image type contains the specifications for an image on a specific place on your site. Examples of image types: “Top hero image”, “Teaser image”, “Image gallery thumbnail”.
Image types are instances of the class ImageProcessor.Web.Episerver.ImageType. You set the following properties:
- SrcSetWidths, int – The different image widths you want the browser to select from. These values are used when rendering the srcset attribute.
- DefaultImgWidth, int – This image width will be used in browsers that don’t support the picture element. Used when rendering the img element.
- SrcSetSizes, string – Allows us to define the size the image should be according to a set of “media conditions” (similar to css media queries). Values are used to render the sizes attribute.
- HeightRatio (optional) – The aspect ratio for your image.
- Quality (optional) – Default value is 80
Image type samples
Use the Picture helper
In your Razor (.cshtml) view, you use the Picture helper like this:
The rendered markup will be:
<picture> <source sizes="(max-width: 980px) calc((100vw - 40px)), (max-width: 1200px) 368px, 750px" srcset="/globalassets/alloy-plan/alloyplan.png?width=375 375w, /globalassets/alloy-plan/alloyplan.png?width=750 750w, /globalassets/alloy-plan/alloyplan.png?width=980 980w, /globalassets/alloy-plan/alloyplan.png?&width=1500 1500w"> <img alt="" src="/globalassets/alloy-plan/alloyplan.png?width=750"> </picture>
For jpeg images the Picture helper also creates webp versions. The webp version will be shown in browsers that support it, other browsers will fallback to jpeg.
Tweak the configuration
To make it easier to test that everything works as expected, you can add the appsetting “IPE_ShowInfo” in web.config. When that value is “true”, info about the images is shown on the image. To be able to show that info on the image you need to enable the “watermark” plugin for ImageProcessor. That is done in the file /config/imageprocessor processing.config
<plugin name="Watermark" type="ImageProcessor.Web.Processors.Watermark, ImageProcessor.Web" enabled="true" />
I also recommend increasing the time that the images are cached by browsers. That is done by increasing the “browserMaxDays” value in the file /config/imageprocessor cache.config
Add lazy-loading of images
Update: See also the option for native lazy loading that was added in v5.6
The lazyLoadType parameter is what makes this all happen:
@Html.Picture(Url.ContentUrl(Model.Image), ImageTypes.Teaser, LazyLoadType.Progressive)
Will this impact server performance?
I haven’t done any extensive performance testing. But the tests I’ve done, doesn’t show any impact on server performance at all, when using ImageProcessor + Picture helper.
Other links that might be of interest
- Control how Picture helper will crop your images.
- Original articles about the Picture helper are found here and here
- More info about responsive images and picture element here, here, here, and here.
At time of writing I was using Episerver 11.10.4 and ImageProcessor.Web.Episerver 4.2.0. Later updated to use the “IPE_ShowInfo” appsetting introduced in ImageProcessor.Web.Episerver 5.1, and native lay loading included in 5.6
5 thoughts on “A dead-easy way to optimize the images on your Episerver site.”
This is great! I had to recently implement image compression using the ImageResizer nuget with the tag and all the srcset tags inside, written line by line in the HTML, but I like that you implemented a helper so it’s shorter and the HTML is much cleaner. I have yet to try the lazy-loading. Thanks for sharing!
I can’t get the debug info to work. I’ve added the ImageProcessorDebug appsetting and enabled the Watermark plugin. I’m running ImageProcessor.Web.Episerver version 184.108.40.206423.
Since v5.1 the appsetting is called “IPE_ShowInfo”. I will update the text shortly. Please also take a look at the github repo, for the latest documentation.
Hope that helps!
No credit to James Jackson-South? ImageProcessor is open source and is the result of thousands of hours by him