Boost Site Speed Using Image Processing for Xperience by Kentico

About a month ago, I migrated my blog site's images from Xperience by Kentico's Media Library to the Content Hub, aiming to enhance control over the structured content associated with each asset.

Background

Previously, I used Kentico's Image Processing integration with SkiaSharp to resize images and ensure optimal page size. However, this package only supports the Media Library, not Content Hub assets. To bridge this gap, I developed the open-source, community-driven XperienceCommunity.ImageProcessing integration.

How It Works

When a URL is requested, the new package contains a middleware which intercepts requests for images, and resizes them based on specified query string parameters. Typically through width, height or maxSideSize. The final processed image is then sent to the browser.

Community

True to its name, this package is community-driven. I was thrilled when Milan Lund opened a GitHub issue to contribute new features via a pull request. Naturally, I welcomed his contribution!

Milan’s first contribution via a pull request added image format conversion. Now, you can resize images and serve them in modern formats like WebP, further reducing page load times and enhancing the overall user experience. My blog already utilises this new feature, check out the optimised images on my blog posts.

Milan has published his own blog post, highlighting his experience with the package and providing real-world examples. It’s definitely worth a read!

Conclusion

With the XperienceCommunity.ImageProcessing package, you can enhance your site's performance and achieve better Lighthouse scores. Special thanks to Milan for his detailed blog post and collaboration on this community package.