Solution: .webp images are not loaded in Google Chrome from a CDN subdomain

Context

You have a web site with the domain example.org. Images are loaded through Cloudflare CDN with the subdomain cdn.example.org.

Broken image icons

Problem

.webp images not loaded in Google Chrome, Microsoft Edge, Arc, and other Chromium-based browsers.

Solution

1. Go to Cloudflare Dashboard.
2. Select the “Rules” tab on the sidebar, “Transform Rules”.
3. Open the “Modify Response Header” tab and press “+ Create rule”.
4. Fill in the form:

Rule name: Content-Type: image/webp

If: Custom filter expression
Field: URI Path
Operator: contains
Value: .webp

Then: Set static
Header name: Content-Type
Value: image/webp

Transform Rules

5. Press the “Deploy” button.

Result

Go to your website and .webp images should be displayed in Google Chrome.