Optimizing Image Performance in Xperience by Kentico

In this article you will learn about the XperienceCommunity.ImageProcessing package that helps you enhance your site's performance by resizing images and serving them in modern formats like webp in Xperience by Kentico.

A short story

During performance testing of a site based on Xperience by Kentico, I noticed an opportunity to load pages faster 🏎️💨 and save cellular data 📱 by serving images in a modern format like webp. Recently, I worked on a project using Kontent.ai, which offers on-the-fly conversion to webp as part of its core product. Unfortunately, this feature is not available in Xperience by Kentico. As confirmed with the Kentico consulting team, converting images to other formats is not included in the core product, nor in any third-party packages, and is not planned for future releases.

While searching for a way to bring format conversion to Xperience by Kentico, I came across a community package called XperienceCommunity.ImageProcessing, created by Liam Goldfinch, a Kentico MVP. The package's main purpose was to resize images stored as Content item assets in Content Hub items, mimicking the resizing functionality for Media Library images, which is part of the core product.

Extending community package with Format Conversion

Since the community package is open-source, I reviewed the code and saw an opportunity 💡 to create a pull request that implements the format conversion functionality and extends support for Media Libraries. With Liam's assistance, this enhancement has been made, and now everyone can optimize images using the XperienceCommunity.ImageProcessing NuGet package.

Package Capabilities

The XperienceCommunity.ImageProcessing package can 💪:

• Resize images by setting their width, height, or maxSideSize.
• Convert image formats to and from webp, jpg, and png.

These actions are applicable to images served as:

• Media Library images on paths starting with the /getmedia segment.
• Content item assets in Content Hub items on paths starting with the /getContentAsset segment.

Installation and Usage Details

Detailed installation steps are provided on the NuGet package page. The package is implemented as middleware that modifies the server response. For example, when a URL like https://yourdomain.com/getContentAsset/rest-of-your-asset-url?width=100&format=webp is requested, the following sequence occurs:

1. Xperience by Kentico responds with the image in its original size and format.
2. The middleware intervenes.
3. It reads the query parameters width=100 and format=webp.
4. The image is resized and converted as specified by the query parameters.
5. The original server response body is replaced with the processed image data.
6. Headers ensuring proper client caching are set.
7. The final response is sent to the browser.

Performance Considerations

Image processing occurs each time the given image is requested unless it is cached by the client web browser. Based on my testing, the processing is fast, and I did not experience any noticeable slowdowns in server response times. However, sites using heavy images may be impacted. To mitigate this, ensure you are using lazy loading for images where possible to avoid loading all page images at once.

Real-World Performance Benefits

How can the package help your site's performance in the real world? By serving images optimized for the given device with the optimal size, considering display pixel density, and in a well-compressed format. Instead of serving one image to all devices like demonstrated in the following Razor template

<img src="@Url.Content(Model.Image.Desktop.Path)" alt="@Model.AltText" loading="lazy" width="@Model.Image.Width" height="@Model.Image.Height">

you can target various types of devices by specifying breakpoint intervals and serving images optimized for them using the <picture> tag:

<picture>
    <source srcset="@Url.Content(Model.Image.Desktop.Path2X) 2x, @Url.Content(Model.Image.Desktop.Path) 1x" media="(min-width: 1024px)">
    <source srcset="@Url.Content(Model.Image.Tablet.Path2X) 2x, @Url.Content(Model.Image.Tablet.Path) 1x" media="(min-width: 480px) and (max-width: 1023px)">
    <source srcset="@Url.Content(Model.Image.Mobile.Path2X) 2x, @Url.Content(Model.Image.Mobile.Path) 1x" media="(max-width: 479px)">
    <img src="@Url.Content(Model.Image.Desktop.Path)" alt="@Model.AltText" loading="lazy" width="@Model.Image.Width" height="@Model.Image.Height">
</picture>

The result HTML would the be like:

<picture>
    <source srcset="/getmedia/rest-of-your-asset-url.jpg?width=3840&format=webp 2x, /getmedia/rest-of-your-asset-url.jpg?width=1920&format=webp 1x" media="(min-width: 1024px)">
    <source srcset="/getmedia/rest-of-your-asset-url.jpg?width=2048&format=webp 2x, /getmedia/rest-of-your-asset-url.jpg?width=1024&format=webp 1x" media="(min-width: 480px) and (max-width: 1023px)">
    <source srcset="/getmedia/rest-of-your-asset-url.jpg?width=960&format=webp 2x, /getmedia/rest-of-your-asset-url.jpg?width=480&format=webp 1x" media="(max-width: 479px)">
    <img src="/getmedia/rest-of-your-asset-url.jpg?width=1920&format=webp" alt="Sample text" loading="lazy" width="1920" height="1100">
</picture>

Conclusion

With the XperienceCommunity.ImageProcessing NuGet package, I hope your site will achieve better Lighthouse scores. Special thanks to Liam Goldfinch for his smooth collaboration and shout-out in his blog post.