WebP Caching has Landed!

By Martin Williams
Published on June 6, 2019
WebP Caching has Landed!

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 2 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. When the Image Processing feature is enabled, the Origin Shield is set to enabled and the Ignore Query String is set 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.

Below is an example for Nginx that manages the delivery of WebP assets on your origin server.

# 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 distribution of the correct image format is defined by the RewriteRule in .htaccess:

<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 Feature for your Zones

Cache Key WebP can be enabled for all Pull Zones. There’s 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 might occur.

Once enabled, a Zone will cache each image separately as WebP and the other image format (e.g. JPEG). In the beginning, this can impact your cache hit percentage depending on the number of images you’re delivering since each image is now 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 on our feature requests community page.

Supercharge your content delivery 🚀

Try KeyCDN with a free 14 day trial, no credit card required.

Get started

Comments

KeyCDN uses cookies to make its website easier to use. Learn more about cookies.