Enable/disable image optimization and auto-conversion to WebP/AVIF

RabbitLoader has a built-in feature to convert and serve images in WebP/AVIF format wherever supported. The conversion to WebP and AVIF happens only if the source file is compatible and the visitor’s browser supports it. In one of our blog posts, we discussed the benefits of using WebP image format.

If you turn off this feature, RabbitLoader will serve images in the same format as coming from Origin. It means, that if the origin is sending an image in PNG format, it will be served in PNG format. Similarly, if the origin is sending an image in JPG format, it will be served in JPG format. And the same applies to all other formats like GIF, BMP, Bitmap, TIFF, etc.

Page Rule setup

Set up a page rule if not already done to control the image behavior. Setting up page rules gives website owners full control if they want to enable certain features only on a particular segment. If you are new to the page rules, this guide will be very helpful when adding a new page rule.

Setting the rule for the entire website

On the console, go to Settings->Page Rules. Click the ‘Modify’ button on the ‘*’ rule.

In the next step, first, turn on the checkbox for Image optimization and then enable the checkbox for “Convert PNG/JPEG images to WEBP/AVIF format” and save the rule.

Once you save the rule, it may take a few minutes to get effective. However, due to the nature of the Internet, content that is already cached across edge servers will continue to serve the original image files. The rule will get effective for new requests only or after purging the existing cache.

Setting the rule for some pages of the website

You can create as many rules as you want to separate out the settings for each URL prefix. If you have added more page rules, you can repeat the instructions above for specific page rules instead of the ‘*’ rule. Please make sure the execution sequence of the rules is in the order you expect.

Optimized Image Dimensions

The dimensions of the images converted to the next-gen format by RabbitLoader depend on the screen size of the visitor. Every time an image is served, the dimension of the image is decided based on the visitor’s device. Please note that when image optimization is on, the width of the image will get restricted to a maximum of 1920px with the original aspect ratio maintained.

If the maximum size is a concern for you for some of the images, you may consider one of these options-

1. hosting the image on S3 or other cloud storage and using that URL. RabbitLoader does not touch images from other origins than the actual website.
2. Append rl-resize=0 GET parameter to the image URL (with the appropriate prefix ‘?’ or ‘&’)

Verify the Image Conversion

When RabbitLoader optimizes an image and converts its format, the URL of the images remains the same and does not change. For example, if a website has an image https://example.com/image-hero.jpg, only the “Content-Type” header changes, and the URL along with the file extension remains the same and will still end with “.jpg” even when RabbitLoader resizes and converted it to the next-gen formats, such as WebP and AVIF.

To verify if images are correctly getting converted, the Content-Type header should be checked. For example, when in Chrome, this is how the type can be checked for all images of a page-

WebP/AVIF Conversion checklist

This is a kind of checklist for you. Please note that not all images can be converted to next-gen format. If you find the website not converting images to WebP/AVIF it could be because of one of the below reasons-

1. Only PNG and JPG/JPEG images can be converted to next-gen formats. Other image formats like GIF, BMP, etc are not supported.
2. Ensure the image is having RGB color profile. If the image is having a CMYK color profile, there are fewer chances that it will get converted to WebP/AVIF. Images exported from applications such as Photoshop may have a CMYK color profile based on export settings. Make sure your image designers are aware of it.
3. If the WebP converted image appears to be bigger than the original image, the conversion will fall back to the original image as it defeats the purpose of image compression.
4. The converted image will be served only to the supported browsers. Your visitors may continue to receive the original format if their browser does not support the WebP format.
5. Images that are loaded dynamically by other plugins usually skip our CDN path, hence the conversion may not happen for such images. However, we continuously try to improve the coverage of such images.
6. If image lazy loading is on in the theme settings, images will not be optimized and may not also show in the RabbitLoader reports. We suggest not turning on the Image optimization settings elsewhere when using RabbitLoader
7. If the images are not served from the root domain, image optimization may not happen. This usually happens when using another CDN for images, which changes the URL of images on the webpage. Let’s say, images on the website example.com is served from img.othercdn.com.
8. If the original image is already in WebP format, RabbitLoader skips optimizing them as they happen to be already optimized.
9. If the origin sends a ‘Vary‘ header for an image, that contains a “Accept” value, the conversion does happen because the header indicates that the origin is able to understand the browser’s capabilities and serve the accepted format.
10. If the origin sends a non-cacheable header. In this case, the image conversion and compression do not work since the WebP-converted image can not be cached due to the origin header and hence has to reprocess the image on every request.