Why are my images not being converted to WEBP format?

The 20i Web Optimisations allow you to quickly and easily optimise resources on your website to provide a better user experience and to reduce your website's loading time. One of the most popular filters is the Convert to WEBP lossless filter which converts PNG and non-animated GIF images to losslessly-encoded WebP. This happens if it's determined that the images are sensitive to compression noise and if the latter format is supported by the browser, otherwise, this filter is ignored.

How to check if images are being converted

You can check if an image is being converted to WEBP by checking it's response headers. An easy way to do this for a particular image is to right-click and select Open image in new tab. You should then immediately see if the image is appended with the .webp file format. If not, you can check the response headers by selecting F12 and then choosing the Network tab (in Chrome), then select the first row under the Name heading and choose the Headers tab. Look for the following two headers: 

pagespeed: on

pagespeedfilters: combine_css, combine_javascript, convert_meta_tags, convert_to_webp_animated, convert_to_webp_lossless, dedup_inlined_images, extend_cache, fallback_rewrite_css_urls, flatten_css_imports,inline_css,inline_javascript, insert_image_dimensions, lazyload_images, recompress_images, resize_images, rewrite_css, rewrite_images, rewrite_javascript, sprite_images

These tell you if the web optimisations are enabled, and also which indivial filters are in use. In this case, we're looking for the convert_to_webp_lossless filter which we can see is enabled in the above example. 

Why are my images not being converted?

The web optimisations make a determination whether there's enough benefit to converting the resource to the WEBP format. If resources aren't being optimised then it's possible they're not in a 'cacheable' state. If the web optimisations sees cache-control headers such as nocache or private it will not rewrite the resources. The module will attempt to rewrite and optimise as many resources as possible but sometimes it may not be able to rewrite all resources because some - particularly those served by third-party themes or plugins - may require a more aggressive filter or optimisation technique to ensure they're rewritten. While we can help with ensuring the module is working from the outset, we can't help with those manual granular optimisations that require base code level changes.

It's worth noting, the web optimisations will adapt to any Content Security Policies specified in the response headers, usually set in a .htaccess file. So reviewing any rules set there is important. 

The optimisations will also not rewrite resources that have a 'cache-control: no-transform' header set, this includes any resources such as JavaScript, CSS and images.