Optimizing Images with Kentico 13 and Xperience by Kentico

Images play a crucial role in making websites more engaging and visually appealing. High-quality images can enhance the overall user experience, conveying messages more effectively and capturing the audience's attention. However, if not optimized, images can significantly hinder website performance, leading to slow page speeds and a poor user experience -  especially on mobile connections. Properly optimizing images is essential to balance visual appeal and performance, ensuring a smooth and efficient web experience. 

 Optimizing images for web delivery 

When optimizing images for the web, the design of the website is a crucial first consideration. Ensuring consistency during the design phase helps reduce the number of different image sizes required. For example, when the same image is presented on a website at differing dimensions, a user’s browser must either download the image at each size or once at its largest size. 

To mitigate this, we strive to limit image configurations to as few sizes as possible depending on the purpose of the image. This approach not only minimizes downloads but also enhances page load times and overall website performance. 

At Zeroseven, we want to make it as easy as possible for our clients to manage their content without worrying about the impact on website performance and page load times. When it comes to image handling, this often means ensuring that any image uploaded is automatically resized, compressed, and formatted for optimal output based on where it will be used on the website. 

What options are already available in Kentico? 

Kentico offers content editors the ability to edit their images directly within the media library. Through the Kentico administration interface, the following options are available for editing media: 

• Cropping and resizing 
• Rotating and flipping 
• Converting between jpg, png, gif, and bmp formats 
• Converting to greyscale 
• Changing the title and description of the file 

Taking It to the Next Level 

At Zeroseven, we go beyond the built-in Kentico functionality by using advanced libraries available in the .NET space to automatically optimize images as they are requested from the server. For our .NET Framework solutions, we use ImageProcessor, and for our .NET Core solutions, we use ImageSharp. These libraries offer a range of image manipulation options that exceed Kentico's built-in capabilities. 

We have used these libraries to: 

• Automatically resize images based on their required output dimensions 
• Optimize images for web using lossless compression to minimize file size without affecting quality 
• Apply color tinting to change the overall color of the image 
• Embed watermarks automatically on product images 
• Automatically blur images 
• Change image formats automatically 
• Strip Exif data from images 

Depending on the image formatting requirements, some behaviors are embedded into the website codebase to ensure consistency, while most image handling is specified in the query string parameters. As images are requested from the server, the code analyzes the provided query string parameters and manipulates the image accordingly. 

What About Security? 

Since images are dynamically resized by the web server based on provided dimensions, potential vulnerabilities could be exploited if sufficient precautions aren't taken. Each image URL includes a unique hash auto-generated based on the query parameters and a secret key configured in the application. Before performing any actions, the server validates this hash. If there is a discrepancy, the image request is flagged as invalid, and a 404 status is returned. 

Won't Resizing Images Create a Lot of Work for the Server? 

To avoid generating each image on every request, our websites specify caching locations. Once the first request for a given image and its parameters is processed, the image is saved based on a unique combination of the image path and parameters. Subsequent requests for the same image and parameters return the cached image, requiring no additional computing power beyond serving a standard image. 

Content Delivery Networks 

To take things a step further in terms of caching and reducing the usage of server resources, a Content Delivery Network (CDN) can be used. Content Delivery Networks enhance image delivery by storing copies of the images on servers all over the world and serving them from the server closest to the user, thus significantly reducing load times, improving response rates and offloading the work of serving the image from the web server. When working with a CMS, the CDN needs to be configured to handle the managed content, ensuring it serves the freshest images. 

What If I Don’t Want the Images to Be Resized in My Gallery? 

During the discovery process, we determine if there are situations where returning images in their native dimensions is important. When necessary, we can display images without applying resizing or compression. In most cases, for galleries, we apply at least a lossless compression to ensure users receive full-size, high-quality images but with a smaller file size.

Optimizing images is a critical aspect of web development that directly impacts the performance and user experience of a website. With Kentico 13 and Xperience by Kentico, combined with advanced .NET libraries like ImageProcessor and ImageSharp, we at Zeroseven are equipped to deliver highly optimized, visually appealing images that enhance website performance. By implementing best practices in image optimization, we ensure that our clients can manage their content effortlessly while maintaining fast page load times and a seamless user experience. Whether through built-in Kentico tools or advanced custom solutions, our goal is to balance aesthetics and functionality, providing an optimal web experience for all users.