Issues with images on Safari with Polish

Hi guys,

I have an issue with images and Safari on my blog (https://thepoorswiss.com). Almost all images are not being loaded. It seems to be related to Polish that I am using for webp optimizations.

I know there have been many posts about that, but these posts are related to either using Cache Everything or having webp optimization done on the origin:

  • I do not have a Cache Everything Page rule for my images
  • Webp is only being optimized at CF level

I am using Polish and APO for Wordpress. I am using WP Rocket on my origin to optimize (without any webp optimizations).

How can I fixe images on Safari?

I wonder if Safari supports the webp format?

Partial support in Safari refers to being limited to macOS 11 Big Sur and later.

Maybe the origin is serving wrong MIME type?

That is great.

This could be an issue, if not configured correctly.

Can you provide an JPG alternative in the code like this one?:

<source srcset="your-origin.webp" type="image/webp">
<img src="your-origin.jpg">
</picture>```

Thanks for your assistance.

I wonder if Safari supports the webp format?

I have tested with a Safari 14 and I have the issues here.

Maybe the origin is serving wrong MIME type?

In that case, the origin is serving PNG or JPEG and then Polish is changing that to webp

Can you provide a JPG alternative in the code like this one?:

As mentioned, the origin is only proposing the PNG or JPEG, no alternative. Then, it’s Cloudflare Polish that is changing the content and content-type.

Only the most recent Safari on Big Sur supports WebP. But I’m unable to replicate the issue. I’m looking at the Updated Trinity Study post and the header logo shows, as does the featured image, graphs, and charts and author image.

1 Like

Obviously Safar dos not support webp as well :confused: as Cloudflare serves it as a webp instead of jpg due to Polish?

Hm, I wonder if that is for sure? Why do you have issues then in Safari due to webp? Have you enabled something like “experimental thing” to support webp, if so?

I found this topic here which is about webp + Cloudflare + WP Rocket as similar as yours:

Only the most recent Safari on Big Sur supports WebP. But I’m unable to replicate the issue. I’m looking at the Updated Trinity Study post and the header logo shows, as does the featured image, graphs, and charts and author image.

Interesting. On this page, I can see no images, except for the very small French logo on the top right.

Could it be something weird in our network that would prevent content from being served with different content type and extension?

I have Safari 14.0.3

Hm, I wonder if that is for sure? Why do you have issues then in Safari due to webp? Have you enabled something like “experimental thing” to support webp, if so?

I am quite sure yes. I do not have any privilege on this machine, so definitely no “experimental” things.

If I curl a png image, I get a webp content.

Open up Safari’s dev tools (Option-CMD-i) and poke around a bit. There’s a Console log and Network tab to show what’s loading and what’s broken.

Here are the headers I get for one of the images:

Request

:method: GET
:scheme: https
:authority: thepoorswiss.com
:path: /wp-content/uploads/2020/01/Updated-Trinity-Study-for-2021-More-Withdrawal-Rates.png
Cookie: _ga=GA1.2.1599962885.1615905951; _gat=1; _gid=GA1.2.410489712.1615905951; __cfduid=dc4e3a8082d51ad0004f4bf55e86bcb651615905951
Accept: image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5
Accept-Encoding: gzip, deflate, br
Host: thepoorswiss.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15
Accept-Language: en-gb
Referer: https://thepoorswiss.com/updated-trinity-study/
Connection: keep-alive

Response

:status: 200
Cache-Control: max-age=31536000
Accept-Ranges: bytes
Content-Length: 12998
Vary: Accept-Encoding
Date: Tue, 16 Mar 2021 14:46:10 GMT
Expires: Fri, 11 Mar 2022 12:42:51 GMT
Age: 438873
Content-Type: image/webp
ETag: "5fef167b-32c6"
Last-Modified: Fri, 01 Jan 2021 12:32:59 GMT
host-header: 8441280b0c35cbc1147f8ba998a563a7
Server: cloudflare
x-proxy-cache-info: DT:1
alt-svc: h3-27=":443"; ma=86400, h3-28=":443"; ma=86400, h3-29=":443"; ma=86400
report-to: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report?s=aF5th%2F0LZ3edrzZVK%2F2A1764hztaHAOayyQq6sZgQo%2FANKZ6nskyR01%2FfIzJ0K4J34roUmLk6Tmg%2Fz%2B7tCUtvNzmHxvZ54yLT7yDUDdEIjoD"}]}
cf-request-id: 08dd197057000006f53c953000000001
nel: {"max_age":604800,"report_to":"cf-nel"}
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
cf-cache-status: HIT
cf-ray: 630ec4fa2dc806f5-LHR

It seems that Safari does not send Accept: webp but Cloudflare sends back webp content type.
It was cached, so it could be a case of webp image being cached and served to wrong clients?

That’s weird. Here’s mine:

Summary
URL: https://thepoorswiss.com/wp-content/uploads/2020/01/Updated-Trinity-Study-for-2021-More-Withdrawal-Rates.png
Status: 200
Source: Network
Address: 2606:4700:20::681a:20f:443
Initiator: 
updated-trinity-study:98

Request
:method: GET
:scheme: https
:authority: thepoorswiss.com
:path: /wp-content/uploads/2020/01/Updated-Trinity-Study-for-2021-More-Withdrawal-Rates.png
Accept: image/webp,image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5
Pragma: no-cache
Referer: https://thepoorswiss.com/updated-trinity-study/
Cache-Control: no-cache
Host: thepoorswiss.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15
Accept-Language: en-us
Accept-Encoding: gzip, deflate, br
Connection: keep-alive

Response
:status: 200
Set-Cookie: __cfduid=d52b51f6c4ebecbcd573cb7613039cb691615909489; expires=Thu, 15-Apr-21 15:44:49 GMT; path=/; domain=.thepoorswiss.com; HttpOnly; SameSite=Lax; Secure
Cache-Control: max-age=31536000
Accept-Ranges: bytes
Content-Length: 12998
Vary: Accept-Encoding
Date: Tue, 16 Mar 2021 15:44:49 GMT
Expires: Fri, 11 Mar 2022 12:42:51 GMT
Age: 437798
Content-Type: image/webp
ETag: "5fef167b-32c6"
Last-Modified: Fri, 01 Jan 2021 12:32:59 GMT
host-header: 8441280b0c35cbc1147f8ba998a563a7
Server: cloudflare
x-proxy-cache-info: DT:1
Alt-Svc: h3-27=":443"; ma=86400, h3-28=":443"; ma=86400, h3-29=":443"; ma=86400
report-to: {"max_age":604800,"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report?s=wICgT19bdE%2BKBKHRkKm0jOTFXVqmW%2FSqRkoHZxhaXOe0VfeyVAAy1xoO1HDuT%2Bhi9GT9moZlaBBIe3F%2B6PZD%2BphU1A5O3ZCqo9hOhNz0oMNEK9T90YywfRx1gpW%2F"}],"group":"cf-nel"}
cf-request-id: 08dd4f226d0000eb9d6927a000000001
nel: {"report_to":"cf-nel","max_age":604800}
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
cf-cache-status: HIT
cf-ray: 630f1ae3ec5ceb9d-LAX

Your headers make more sense.

Could it be a caching issue where the same answer is sent regardless of the client accept headers? But that should not happen with Polish, no? Could APO screws some caching here?

Hi @thepoorswiss.

APO doesn’t touch images in any way. There are confirmed issues with Safari’s WebP decoder. I think we rolled out the fix to disable serving webp images for Safari. Could you clear cache and check if issue persists?

1 Like

@yevgen Sure, I will try. Should I clear Safari’s cache or the entire CF cache?

for Webp - is Accept-Encoding right header?

CF cache.

I still get the same issue after clearing the CF cache.

please raise a support ticket and post # here.

1 Like

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