Images from a folder not being served to Safari

I did a full site purge this morning.

Clearing cache on local machines and using Chrome and variants, including FF and opera, I can view images as normal.

However, in Safari, both on a tablet and emulators, there are blank holes where images are supposed to be. This is throughout the site, even on pages that I made no changes to. I did not change locations of image urls. I am NOT using CF image services for scaling, etc.

Anyone else experiencing this? How can it be fixed?

Please move this thread out of the performance in the “general” section, since the question is not related to performance. Thanks :slight_smile:

To your problem:
we need more info, please open the dev tools and check the console of your browser, if something does not work, there should be a note.

No issues inside chrome dev tools.

I was not referring to chrome since it anyway is working on chrome. But it is not working on safari, so please provide some infos from safaris devtools/console.

I have no means to do so natively.

Found the problem. WebP not supported on most Safari versions. Wish they’d get with the program. Thanks for your help.

Thats what I thought. That normally just happens, when you serve the WebP from your origin server under the same URL as the JPEG. Therefore please use natively overloaded picture tags like this:

<picture>
        <source srcset="/img/picture.webp" type="image/webp">
        <img src="/img/picture.jpg" width="800" height="1200" alt="ALT TEXT">
</picture>

That will then give the browser the controll over which image format it will request. This also let your implement other formats like AVIF & JXL etc which do have an edge over WebP.

That then could look like this:

<picture>
        <source srcset="/img/picture.jxl" type="image/jxl">
        <source srcset="/img/picture.avif" type="image/avif">
        <source srcset="/img/picture.webp" type="image/webp">
        <img src="/img/picture.jpg" width="800" height="1200" alt="ALT TEXT">
</picture>

Another note: maybe updating your operating system or Safari, will add WebP support to it, since WebP is supported at Safari starting with v14: WebP image format | Can I use... Support tables for HTML5, CSS3, etc but this would just fix the problem on your end, not by its roots, so others can still encounter this error/problem.

A permanent solution to the problem could be:

  1. Safaris old versions all get an update that provides WebP support.
  2. Cloudflare also adds a functionality that can convert from WebP to JPEG in case a WebP is requested, but can not be handeled.
  3. natively overloaded pictures that serve different formats on different URLs.

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.