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
- Go to Cloudflare Dashboard.
- Select the “Rules” tab on the sidebar, “Transform Rules”.
- Open the “Modify Response Header” tab and press “+ Create rule”.
- 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.



