Images from a folder not being served to Safari

Developers
#1

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?

#2

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.

#3

No issues inside chrome dev tools.

#4

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.

#5

I have no means to do so natively.

#6

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

#7

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.
#8

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