Safari won’t load some images

Hi @joshaw,

Thank you for your message. I will try to help you.

The plugin does nothing with the original files. Do not worry about that.

The problems you are talking about point to a cache on the server, which means that not every query goes through the .htaccess file.

What does this mean in practice? By default, when trying to open an image your server reads the rules in a .htaccess file. A redirect is created there when the browser supports the WebP format.

In your case, it looks like someone came in from Chrome and wanted to open the picture. You have been redirected to the WebP file. Then the person from Safari enters and the server no longer reads the rules from the .htaccess file but does the redirect itself. Which is a mistake.

Can you contact your server administrator?

Hello Mateusz,

You were totally right, it was down to Cloudflare’s cache, purging it resolved the issue.

Thank you!

Jo

Thank you for the explanation as well, so you’re saying once the htaccess file has been read by Chrome, when loading in Safari the cached htaccess rules are applied in Safari?

Just an update – I’ve had a look into this a little more and found that Cloudflare was caching the htaccess file, so once I’d loaded images in Chrome, if I then went to Safari, cleared the Safari cache, then those pictures wouldn’t load because of the htaccess redirect to the webP version.
So I have prevented htaccess caching in Cloudflare and that appears to have resolved the issue entirely.

Thanks

I am very pleased. @joshaw, could you describe step by step how you did it? I will be able to help other users in this way. Thank you in advance!

Hi Mateusz,

Sure no problem, I’m actually having some trouble getting cloudflare to stop caching the htaccess so as soon as I’ve got that sorted I’ll come back and provide the steps here.

Thanks,

Jo

Hi Mateusz,

After some more testing I don’t think it is to do with htaccess caching by Cloudflare after all.

However the issue does appear to be some weirdness going on between the plugin and Cloudflare’s cache.

I tested the caching of the htaccess using 301 redirects and found that the htaccess didn’t cache at all as I added & removed redirects, they worked first time on clearing the browser cache.
So I’m a little confused as to what’s going on.

I’ll explain the issue in more detail and hopefully you’ll be able to suggest further testing I can do to get to the bottom of this.

If I load the site in Safari with all caches cleared everything works normally. Jpgs are loaded just fine.

If I then load the site in Chrome WebP images load perfectly.

If I then go back to Safari some images fail to load (but the jpg URLs appear correctly and can be loaded in Chrome). If I try to open those image in a new tab in Safari the image is downloaded instead. If I then try to open the downloaded image on my mac is says:
“The file cannot be opened. It may be damaged or use a file format that Preview doesn’t recognise.”

If I inspect that file it turns out it’s actually a WebP file (just with a jpg file extension) which is why it can’t be opened in Safari or my Mac.

However if I find the file on the server and download it, it is the regular jpg file. The webP file your plugin creates has the webp file extension.

So Cloudflare appears to be serving the webp image with a jpg file extension… or is it? Any suggestions would be greatly appreciated!

Thanks,

Jo

Hello again,

I’ve now found that the issue was an incompatibility between the WebP plugin and Cloudflares Polish image optimisation. Turning off Polish resolves the issue which isn’t ideal as I’d like to use Polish for image optimisation but glad to have finally found the root of the problem.

Thanks,

Jo

Hello, can anyone help me out? First website and not officially launched yet. Still loads to do like branding etc but seems to be two steps forward and one step back. Images were all fine and now some won’t appear in Safari on mobile or desktop.

Its driving me crazy – I can’t figure out what’s the issue. I have tried isolating each plugin but doesn’t seem to have any positive results. All images in chrome appear fine!
Site is: https://www.360hire.events

Thanks

Fraser

• This reply was modified 4 years, 9 months ago by Fraser McQueen.

@frasermcq, you have the same cache problem. Please contact your server administrator.

Thank you for confirming @mateuszgbiorczyk I’ll do that now.

UPDATE

I’m afraid to say that as it turns out, turning Polish off in Cloudflare did not resolve the problem. I have contacted Cloudflare again to see if they can suggest anything else.

I’ll update this thread when I find out more.

Thanks

Jo

@joshaw Same here – got broken images again. Interested to see if you manage to find a fix.

Fraser

@frasermcq – Mateusz suggested you contact your server admin, did you do that? If so it would help helpful to come back and share with everyone what they said in case that helps someone else solve their problem.

If the issue is different to mine you should open an new support ticket to keep support conversions clear and easy to follow, if people chip in with similar but slightly different issues it can make it harder for other people to follow and find a solution that works for them. I’m not attacking you personally just trying to keep support forum tidy and easy for people to use.

So if you are not using Cloudflare I’d suggest you start a new ticket as my issue is Cloudflare related. However if you are using Cloudflare and your issue is identical to mine, then please read on and contribute with what you have done yourself to investigate.

@mateuszgbiorczyk – I have discussed the issue further with Cloudflare and this is their explanation and suggestion:

“I believe this is due to the subsequent requests being made to Cloudflare edge requesting for the non-webp file types.
After the files were cached in our edge servers, requests for that files will be served directly from the edge server, not from your origin, thus .htaccess no longer can process it.

One suggestion I can recommend you is to consider using Cloudflare Workers to rewrite the URLs instead of using .htaccess in your origin. This can make sure the processing is done at the edge instead of at your origin, and also can reduce the origin server’s load, making the requests faster from the user’s perspective.
https://developers.cloudflare.com/workers/reference/apis/html-rewriter/”

I have had a look at Cloudflare workers but aren’t sure yet how to use it to redirect image URLs. It’s a Javascript API so I assume one just needs to detect browser support with javascript and then rewrite those mod_rewrite rules in a way javascript can use (which for me is the tricky part!)

Is this something you might include in a plugin update in the future?

Many thanks,

Jo

@joshaw, thank you for the message. I consciously use redirects in the .htaccess file.

I don’t want to modify the HTML code and change the URLs there because many people use cache plugins and that would cause a problem. Modification using JS code is unfortunately very slow.