Chrome doesn't show WEBP images in production

Question

While works perfectly locally, Chrome doesn't render WEBP images after app deployment. Neither via picture tag, nor via standard img. Website for reference: https://neuralle-staging.herokuapp.com/case-study-resources

Example:

<picture>
  <source srcset="https://cdn.neuralle.com/assets/v2/case_studies/lwc-24ac69b1ab68da006ef9e1ecc8bd9025aaf646a684235811b9b2afa9efebc07e.webp" type="image/webp" class="lazyloading">
  <source srcset="https://cdn.neuralle.com/assets/v2/case_studies/lwc-0fa311dd3dd17a0092d6ad606a31b16b7184de62c7bfebe9c3181ff811a95ea8.jpg" class="lazyloading">
  <img src="https://cdn.neuralle.com/assets/v2/case_studies/lwc-0fa311dd3dd17a0092d6ad606a31b16b7184de62c7bfebe9c3181ff811a95ea8.jpg" class="lazyloaded">
</picture>

Also, everything works fine with Safari, Firefox, or Chrome mobile, and I can download this image and open in my operating system.

Another weird thing is if I open the image directly in the browser, it opens as a text document (only when the app is deployed – I can open it as usual locally): https://cdn.neuralle.com/assets/v2/case_studies/lwc-24ac69b1ab68da006ef9e1ecc8bd9025aaf646a684235811b9b2afa9efebc07e.webp

And yes, it has nothing to do with lazyloading.

So it seems that something goes wrong when the image is hosted on the remote server. I use Ruby on Rails 6, so might be something with assets precompilation, but can't say for sure.

I tried Chrome 88, both Win and Mac.

Anton Khaybulaev Anton Khaybulaev · Accepted Answer · 2021-02-27T11:31:16

Turned out that the app is fetching assets via CDN (Cloudflare), and for some reason, Cloudflare couldn't serve WEBP images properly.

Found the culprit.

I also read that there is a free account restriction, so I disabled CDN for now.

Chrome doesn't show WEBP images in production

1 Answers