How to reliably serve WebP images without browser compatibility or legacy image format issues.
This how-to details how to serve WebP images while dealing with browser compatibility, legacy image formats and code change limitations:
Part 1 : Converting images to WebP Format
One or more existing JPG / PNG images can be converted into WebP format using Google's WebP converter tool. You can change the quality parameter (-q) value to higher (upto 100, for better quality) or lower (upto 0, for lower quality). The default is 75 if the -q parameter is not specified.
Converting single image to WebP
Batch convert multiple images to WebP
To convert large number of images in a given folder at a go:
Part 2 : Serving WebP Images
Once you have WebP images available, you can serve them either through code changes in your HTML or through configuration change on your web server. Each of these options have their pros and cons and you can select the one that suits your situation the best.
Via code change : Displaying WebP images with <picture> tag
You can use <picture> tag to display WebP images with a fallback to display JPG / PNG image on browsers that do not support WebP images:
The 'type' attribute value in the code-snippet above allows the browser to pick the right image format. Also, the <img src="..." /> ensures that the JPG image is loaded for browsers that do not support <picture> tag. Over-all, the browsers that support WebP image format will load and display WebP image while the rest would load and display the image in fallback JPG format.
You can also use this approach to load responsive images. To reliably load responsive webp images using <picture> tag, have a look at this how-to.
Via configuration change : Serving WebP images through HTTP header
If changing your HTML to use <picture> tag for your web pages is cumbersome, you can serve WebP images by detecting request HTTP headers. A key benefit of this approach is that it requires no code changes. Also, you can configure your server to serve WebP images only if available. This allows you to leverage WebP images even when you haven't yet converted all your existing images to WebP.
Through the HTTP request header 'Accept', the browser informs the server of the format it supports. You can configure the server to use this information to decide the image file to serve:
HTTP Request 'Accept' header
Apache configuration to serve webp images based on Accept negotiation
You can obtain Apache, IIS, Nginx, Varnish configuration to serve webp images based on Accept header here.
In case if you are leveraging a CDN, it is critical to ensure that your CDN can distinguish image requests with different 'Accept' header values. This may / may not be supported by your CDN and may require additional configuration. I can confirm that AWS Cloudfront supports this but requires Whitelisting the 'Accept' header within your Cloudfront distribution configuration:
Whitelisting for Cloudfront Caching : HTTP 'Accept' header
Configuring the CDN to to cache based on the HTTP 'Accept' header ensures that it does not serve a cached WebP image to a browser that doesn't support WebP image format.