Image Processing Insights

By Martin Williams

Updated on February 23, 2022

Optimization and delivery of images play a key role in web development. KeyCDN has significantly simplified the way images are transformed and delivered with our Image Processing service. Our solution doesn't require any change on the origin server. Today, there's no more reason for not using the next-generation image format WebP and optimizing images all the way through. It improves the user experience, results in less bandwidth usage, and makes your website faster.

How to measure performance

The Website Speed Test is the ideal tool for measuring the performance of your website. It offers a full range of performance grades and suggestions where we outline the performance potential in detail.

There's an overall grade shown in the top section together with the loading time, the overall website size, and the total number of requests. Further down, there are detailed performance grades for various topics. Three of them are related to images, namely:

Deliver images in the next-gen formats: This section outlines the images that should be delivered in a different format. Images are often still served in an old image format and the overall website loading time is unnecessarily delayed by that.
Properly size images: Scaled images will definitely reduce the overall website size. Our Image Processing service makes it easy to do that.
Optimize images: Any image listed here has the potential to be smaller in size. Our Image Processing service will automatically optimize the image quality and reduce the size of the image if no query string is provided.

WebP is the way to go

WebP was first developed by Google back in 2010 and has now become the successor of JPEG. WebP offers both lossy and lossless compression. Today, WebP is undoubtedly the next-generation image format that can be found on many websites. The support for WebP has steadily increased over the years with nearly all major browsers supporting WebP (Safari support will follow soon). Even if a browser doesn't support WebP, our WebP caching feature will ensure that the correct image format is delivered. This drastically eliminates the complexity of converting and delivering WebP as we take care of that.

The benefits of WebP are obvious. Here again are the facts why there's no way around WebP:

WebP looks better than JPEG at the same compression level.
WebP results in smaller file sizes than JPEG.
WebP is now supported by Chrome, Firefox, Opera, and soon Safari.
WebP means faster loading times and less traffic.
WebP delivery doesn't require any change on the origin server with the WebP caching feature.

WebP size comparison

In previous case studies, we've analyzed the different image sizes against WebP. In almost each case, the size of the WebP images was smaller. Check out our reports:

JPG to WebP - Size Comparison
- WebP results in a 85.87% decrease in image size on average. Loading times decreased by 11% and page weight decreased by 29%.
PNG to WebP - Size Comparison
- WebP results in a 42.8% decrease in image size on average. Loading times decreased by 3% and page weight decreased by 25%.
WebP Case Study with WordPress Cache Enabler

Commonly used Image Processing operations

Image Processing offers a wide range of operations. We won't go into detail in this article. The available operations are listed in our documentation. Beside the basic operations like width, rotate, or blur there are more advanced operations that we want to highlight here.

Smart Crop

The crop command comes with different options:

smart: Uses an algorithm to focus on the most important part of the image automatically.
fp (focal point): Works with coordinates provided relative to the base image.
width and height: Defines relative or absolute image dimensions.

    
        https://ip.keycdn.com/example.jpg?crop=smart&width=600&height=400

Automatic optimization

If no query string is provided, an auto optimization is still applied. This means that the default quality is adjusted, which is quality level 85 for JPEG and 80 for WebP. If the size of the optimized image is smaller, the image is delivered this way, otherwise the original image is delivered with the initial quality level.

Below is an example of an image without query strings but still optimized. The header x-ip: 1 indicates that the image went through image processing and was optimized.

curl -I 'https://ip.keycdn.com/example.jpg'
HTTP/2 200
server: keycdn-engine
date: Wed, 02 Sep 2020 07:38:25 GMT
content-type: image/jpeg
content-length: 20734
**x-ip: 1**
x-ip-info: osz=20734 odim=700x465 ofmt=jpeg
last-modified: Thu, 16 Jul 2020 07:06:27 GMT
vary: Accept-Encoding
etag: "5f0ffc73-2f9d1"
expires: Wed, 09 Sep 2020 07:38:25 GMT
cache-control: max-age=604800
x-cache: MISS
x-shield: active
x-edge-location: chzh
access-control-allow-origin: *
accept-ranges: bytes

Overlay

If an image needs to be added on top of another image, this can easily be done with the overlay operation. The valid overlay image formats are svg, jpeg, png, and webp. A typical use case for overlay images is adding the logo to images in a web shop or company website. The overlay image can be aligned and scaled as required and set to semi-transparent.

    
        https://ip.keycdn.com/example.jpg?olurl=https://logos.keycdn.com/keycdn-logo-black.svg&olalpha=35&olscale=80

Image Processing integration

Image Processing is available for both Pull and Push Zones. It's only a click away in the Zone settings. Enable the Image Processing setting. This will also automatically change the following Zone settings:

Enable the Origin Shield setting to ensure all edge servers get the processed images from selected points of presence.
Enable the Cache Key Host setting.
Disable the Ignore Query String setting as query strings are essential for Image Processing.

Currently jpeg, png, webp, and tiff image formats are supported. Any other asset type, such as CSS or JavaScript, will be bypassed. An image going through the Image Processing engine gets two additional HTTP response headers:

Header x-ip indicates if the image has been processed. If the value is 1 the request was processed.
Header x-ip-info provides additional information about the processed image where the ofmt value indicates the output format and osz value indicates the output size.

WebP caching

Once Image Processing is enabled, as a next step we highly recommend enabling the Cache Key WebP setting for WebP caching. With this feature enabled, you benefit from the WebP advantages outlined above. There's no change required on the origin server. Once enabled, the correct image format will be delivered. If a browser can't handle WebP images, we automatically deliver the initial image format. The curl command below is an example to check if the WebP image is delivered correctly.

curl -I 'https://ip.keycdn.com/example.jpg' -H 'accept: image/webp'
HTTP/2 200
server: keycdn-engine
date: Wed, 02 Sep 2020 13:41:07 GMT
**content-type: image/webp**
content-length: 8734
vary: accept
**x-ip: 1**
**x-ip-info: osz=8734 odim=700x465 ofmt=webp**
last-modified: Thu, 16 Jul 2020 07:06:27 GMT
etag: "5f0ffc73-2f9d1"
expires: Wed, 09 Sep 2020 13:41:07 GMT
cache-control: max-age=604800
x-cache: HIT
x-shield: active
x-edge-location: defr
access-control-allow-origin: *

Once the setup is completed, each image is cached separately as WebP and the default image format (e.g. PNG or JPEG). This can impact the cache hit ratio at the beginning as each image is now cached in two different formats.

How does WebP caching actually work and how do we deliver the correct image format? It's all about the accept HTTP header sent from the client. In this header, the client defines the file formats which are accepted. The KeyCDN edge server takes that header into account and responds with the correct image format. The accept header from the Chrome browser is content-type: image/webp which indicates that WebP is accepted and the cached WebP image is delivered in this case.

TL;DR

With our Image Processing service you can take full advantage of transforming and optimizing images without managing the complexity behind it. The service perfectly integrates into your existing environment and it doesn't require any change of the origin server. Take the opportunity now and deliver your images optimized in the WebP format by enabling the Zone settings Image Processing and Cache Key WebP.