Web Performance: Sitecore Image resizing at CDN with CloudFlare and Akamai — Overview

Photo by CHARLI on Unsplash

Introduction

A Picture Speaks a Thousand Words - Fred R. Barnard, 1920

As we all know, a photo / picture can communicate to the audience in so many ways. A picture can convey an emotional context, with background settings. A web site often has images to help convey the message. Hero banners, photo galleries.

Modern Web Pages are very image heavy. Some interesting facts:

• Approximately 63% page weight are images
• Average web page has 60 images
• Responsive web site designs catering for different types of devices

Online consumers and users often rely on images to help them make purchase, or user journey onward decisions. Increasingly, users are browsing using their mobile phones over a cellular network. Non optimised images will slow down the site, which has an effect on general site speed, and affects SEO site ranking. Slower web sites also affects user conversion. Site speed affecting conversion hypothesis has been tested to death already.

Optimising Images

There are many image optimisation techniques available to produce lower image file sizes.

A designer can go through all the images, resize / crop them accordingly, using the naked eye to judge the lowest image quality to use without sacrificing quality. However this is a tedious task to provide different sizes of images. Appropriate Disk storage is also required to store all variations with the appropriate file names. Images with very heavy Red / Orange / Pink colours are very difficult to optimise without losing quality.

Modern browsers support NextGen image formats (eg. WebP, JPEG XR, JPEG 2000). Image file sizes generally are reduced by 15–25% when using NextGen format. This creates another 2 to 3 variations required for each image crop.

More automated tools can combine a few number of techniques all in one command. Usually, they include removal of Meta / EXIF data, transferring Progressive JPEGs, and apply a predefined level of image quality using either lossless / lossy tools. Automated tools are often run on pre-processing, meaning optimisation is done before images are stored, or on the fly, meaning the optimisation is only run and then stored in cache when requested. This often introduces additional load to hardware resources when optimisation is automated.

One interesting technique is to use Progressive JPEGs instead of Baseline JPEGs. This will give user a perceived experience to see the image with a full context whilst loading.

Baseline JPEG loads from top to bottom

Progressive JPEG loads from low quality to high

Progressive JPEGs are usually slightly larger in file size compare to Baseline JPEGs. However, the perceived experience for a user to see a full image earlier is a good trade off, and is also considered as a higher score when it comes to site speed audits.

Sitecore’s History with Images

Sitecore has image resizing capabilities and optimisations since v6.x. Image Resizing query string parameters are used to resized / transform images. There are some interesting Out-of-the-Box settings available and definitely worth taking a look:

• Media.Resizing.MaxHeight / Media.Resizing.MaxWidth — Maximum width for dynamically resized images. If the requested width exceeds this value, Sitecore resizes the image to this width. A value of 0 disables this limit.
• Media.Resizing.Quality — Specifies the level of compression to use when resizing images. See also System.Drawing.Imaging.Encoder.Quality.
• Media.Resizing.CompositingMode — Specifies how the source colours are combined with the background colours when resizing images. See also System.Drawing.Drawing2D.CompositingMode.
• Media.Resizing.PixeloffsetMode — Specifies how pixels are offset when resizing images as the offset affects resizing speed. See also System.Drawing.Drawing2D.PixelOffsetMode enum. Use HighQuality if using CDN to optimise images
• Media.InterpolationMode — The interpolation mode to use when resizing images. See also System.Drawing.Drawing2D.InterpolationMode enum. Use HighQualityBicubic for best quality, especially when using CDN to optimise images
• Media.AlwaysAppendRevision (available as of 8.2.5) — this should always be true to form part of CDN cache key. If this querystring parameter is available, the CDN cache should be set to a very long time. I usually set the CDN cache to 1 year. For older versions of Sitecore, you can check out
• Media.RequestProtection.Enabled — this is set to true by default. The only issue I am seeing is that if the hash that is supplied is not correctly validated, it returns the full image, which can slow down Sitecore / IIS as it is busy slowly serving out all the bytes down the tube.

Sitecore also provides Responsive Image field and variant field in Sitecore Experience Accelerator as of v1.7.

Other notable tools that are in the Sitecore Community:

• Dianoga — massive shout out to current maintainer Mark Gibbons
• Sitecore Image Compression and Next-Gen Conversion
• Sitecore Media Library Enhancements

Use CDN to Optimise / Resize Images

There are quite a few valid and good reasons to offload the optimisation and resizing of images to the CDN.

• Minimal code changes on Sitecore — hopefully there are no, or extremely minimal code changes required from Sitecore
• Offloading the workload to the CDN — free up CPU, memory, disk space and disk I/O to process the real, meaty and chunky processes from Sitecore. It may lead to reduction in infrastructure costs (maybe ? one can always hope, right ? )
• Using Edge Caching as a security strategy — offloading any form of Denial of Service, or massive different types of variations with optimisation and resizing requests to the CDN. It is now the CDN’s responsibility, not the infrastructure’s responsibility.

The following is an example of the CDN architecture with image resizing and optimisation.

Using Akamai Image Manager Request Flow as an example

In the user flow above, the end user is requesting for a cropped and optimised image. The path from the Real Time Image Server to the origin web application is known as the “Pristine Image Path”, which should contain a cache key with the full size, unaltered image. The path from the user to Super Cache 0/1 is known as the “Derivative Image Path”, where the optimised, resized, transformed, cropped image is stored. There can be a large number of different sizes, crops, transformations of the same image that a company’s various web applications need to serve out. Imagine doing all the image resizing, transformation, cropping, optimisation all in the Sitecore. Sitecore is going to have to work really hard to churn those different variations of the same image out. Now multiply that by 50, 100, 500 images.

There are two sets of Edge cache in play here, and this is the reason why CDN Image Optimisation and Resizing can be considered as a security strategy.

Summary

I have outlined how images are traditionally used in Sitecore. There are definitely advantages of offloading image resizing and optimisation to the CDN.

1. Web Performance: Sitecore Image resizing at CDN with CloudFlare and Akamai — Overview
2. Web Performance: Sitecore Image resizing at CDN with CloudFlare and Akamai — CloudFlare
3. Web Performance: Sitecore Image resizing at CDN with CloudFlare and Akamai — Akamai
4. Web Performance: Sitecore Image resizing at CDN with CloudFlare and Akamai — Roll Out