KeyCDN Launches WebP Caching

By Martin Williams

Updated on February 23, 2022

WebP has become a popular image format. Therefore, we've developed a solution to even better integrate WebP into our service. We're happy to announce that WebP caching has landed! The new feature integrates into the existing CDN and is available to all customers. We offer both a one click solution with no change required on your origin server as well as an approach where you can deliver the WebP assets from your origin server.

How does WebP caching work?

It's all about the accept header sent from the client. This header determines the image format in the response. If a request contains the header accept: image/webp the asset will be delivered as WebP. Here's an example:

curl -I 'https://ip.keycdn.com/example.jpg' -H 'accept: image/webp'
HTTP/2 200
server: keycdn-engine
date: Thu, 06 Jun 2019 08:29:50 GMT
**content-type: image/webp**
content-length: 56734
last-modified: Tue, 14 May 2019 23:36:28 GMT
etag: "5cdb50fc-1040a"
expires: Thu, 13 Jun 2019 08:29:50 GMT
cache-control: max-age=604800
x-ip: 1
x-ip-info: osz=56734 odim=700x467 ofmt=webp
x-cache: HIT
x-shield: active
x-edge-location: chzh
access-control-allow-origin: *
accept-ranges: bytes

If a browser is capable of displaying WebP images, the browser adds the accept header automatically. In return the content-type header in the response shows the corresponding image format. The file ending (.jpg in the example above) will not change. In case a browser doesn't know WebP, the JPEG asset is delivered the same way as before.

There are two different options how this can be achieved. Either you take advantage of image processing where we convert the images automatically for you or you deliver the WebP assets from your origin based on the accept header. Let's outline the two options in more detail:

Option 1 - Take advantage of Image Processing

Enabling our Image Processing service is the most convenient way to deal with this topic because you don't need to change anything on your origin server. It all happens on the fly in the background as we deliver the assets. If you're not familiar with WebP, choose this option as you don't need to worry about anything and we handle that for you. If you use image processing, you can of course use all other commands available such as resizing or cropping.

To enable this feature the Image Processing setting needs to be set to enabled. Doing so will automatically update the Origin Shield setting to enabled and the Ignore Query String setting to disabled. Make sure these settings are aligned with your setup.

Option 2 - Deliver WebP assets from your origin

If you want to generate the WebP images on your origin server, you can do that was well. In this case, you need to ensure that the WebP assets are generated correctly and only delivered if a request contains the header accept: image/webp. In our article Convert to WebP Format we explain in detail how to configure your origin server.

In Nginx, the following rule can be used in the server configuration file (e.g. nginx.conf) to deliver WebP formatted images where accepted:

# http config block
map $http_accept $webp_ext {
    default "";
    "~*webp" ".webp";
}

# server config block
location ~* ^(/path/to/your/images/.+)\.(png|jpg)$ {
    set $img_path $1;
    add_header Vary Accept;
    try_files $img_path$webp_ext $uri =404;
}

In Apache, the following rule can be used in the server configuration file (e.g. .htaccess) to deliver WebP formatted images where accepted:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

If you're using WordPress check how to configure your WordPress setup. Optimus offers an efficient way to generate WebP images.

Enable the WebP caching feature

To enable this feature the Cache Key WebP setting needs to be set to enabled. There is no extra cost for this feature itself. If you're using this feature in combination with Image Processing, please check the cost for Image Processing that may occur.

Once enabled, a Zone will cache each image separately as WebP and the default image format (e.g. JPEG or PNG). In the beginning, this can impact your cache hit ratio depending on the number of images being delivering since each image can now be cached twice.

Advantages of WebP

JPEG has been a very popular image format for a long time but is now considered as outdated and relatively inefficient. In fact, WebP achieves a up to 80% better better compression compared to JPEG. Smaller assets mean less traffic delivered and better performance overall. With the current browser support, most popular browser can handle WebP. Plenty of major websites are using WebP today, so this image format is here to stay.

Benefiting from WebP has never been easier. In combination with our image processing feature, you don't need to touch your origin server at all as we do everything for you. Keep optimizing your website and improve performance today! If you have any suggestions or ideas, we'd love to hear your feedback.