When Cloudflare caching is turned on, random images are not displayed on Safari & Firefox iOs.
We are using Siteground + SG Optimizer (Wordpress) + Cloudflare.
Within SG Optimizer you can re-create your images to webp images.
I checked and it is true that all images are available under the original and the .webp format:
Since not all browsers are supporting webp images, siteground is either serving .jpg OR .webp
This is working fine when Cloudflare is not turned on.
But when Cloudflare being used, some random images are not displayed on safari anymore.
The Siteground Support verified with me over the couple last weeks and finally we came to the conclusion:
„Our developers reported that the issue is related to CloudFlare as there is a check from our server that checks if the web browser supports WebP and if it does not like Safari the original images are served. Unfortunately, this doesn’t seem to be work with CloudFlare. To test this I resolved the domain with my local hosts file directly on our IP address and the site loads properly in Safari.“
I continued researching and I checked on the loaded website
curl -IX GET website/wp-content/image.jpg
date : Sat, 14 Mar 2020 10:59:05 GMT
content-type : image/webp
curl -IX GET website/wp-content/image2.jpg
date : Sat, 14 Mar 2020 10:59:48 GMT
content-type : image/jpeg
The images that are displayed correctly on safari are fetched as JPEG and the images that are not displayed on safari are fetched as webp.
I verified by directly opening the URL of the image and safari downloaded the file, but couldn’t display the image. Then I opened the downloaded image on google chrome (which supports webp) and the image displayed normally.
I think this specific use case is very bad for many website providers, since many of them are not verifying if images are displayed on safari browsers, after the content is cached. So there may be A LOT OF broken websites without owners noticing it!