Images on siteground not working - Ive seen this has been posted before but am struggling! PLEASE HELP

I am using cloudflare on siteground. On iphone 7 when cloudflare is activated some of the images are not showing on both chrome and safari. My site is magicduncan.co.uk. The inconsitency is crazy as I have another site duncanstevens.com set up exactly the same which eliminates the issue that is a webp issue as this is displaying images fine. I have tried everything. -> Purge cache for the URL of the missing image file.
-> Temporarily pause Cloudflare.
-> Disable Rocket Loader via the Speed app of the Cloudflare dashboard.
-> Disable Mirage via the Speed app of the Cloudflare dashboard.

Siteground support have refused to help saying it is nothing to do with them and have tried EVERYTHING. I have read some other people experiencing the same thing but am really struggling! CAN SOMEONE PLEASE HELP ME!

When cloud flare is disabled. all works fine. with it enabled the first time, the logo wasn’t showing as well as other images. then disabled, all working fine again, then re-enabled and logo working fine but several other images not working - this seems to be so inconsistent too! PLEASE HELP!

Are both domains on a CF Free Plan? If you are on a Free Plan you need to create some way of testing for browser compatibility before enabling WebP at the origin. On a paid plan (Pro, Business or Enterprise), you can simply enable Polish and it will do the trick for you.

EDIT: Sorry, I skipped the line where you talk about Mirage, which is a paid-plan feature. All you need to do then is to turn on Polish and disable WebP generation at the origin. BTW, the domain you say is working fine is not going through CF at the moment.

1 Like

I still bet it’s webp. Remember that all browsers on iOS still render with Safari. And Safari (up until iOS 14) doesn’t render WebP.

Are you doing a WebP conversion at your server?

1 Like

Thanks for both of your messages. This is also happening on chrome too?

Also my logo on duncanstevens.com is also using webp too but not resulting in the issues.

Oh no, I dont talk about mirage…

The site you have checked - I have mentioned 2 sites. These are experiencing issues on iphone only. No issue on desktop.

As one example you will see the background image is grey - this should be an image. (not just grey)

1 Like

You said I’d disabled Mirage, so I thought…

As @sdayman has said, this is an iOS issue. Safari, Chrome, Firefox, any browser on iOS up to version 14 will not render WebP.

Also, the way CF works is it loads an image at the cache when there’s a visit. So if you purge the cache and someone using iPhone is the first to visit, the image on cache will be a JPG because your origin app that is generating WebP knows iOS devices are not compatible. So it works for every one. Now if the first visit is from a desktop Chrome, the image saved to cache will be WebP, and visitors with an iPhone/iPad will not see these images.

EDIT: That’s why you see the discrepancy at times. It gest more confusing because each visit may reach a different CF data center, and therefore see a different image. Just disable WebP at the origin and enable Polish on Cloudflare if you are on a paid plan. Otherwise, in a free plan, you’d need to use a plugin that does the proper configuration, by adding a JavaScript that checks for compatibility before fetching the images.

1 Like

Hiya, Yes, sorry I think you are correct about mirage - this was a question I aksed my developer and said he had done this.

thanks for your message. I deleted my whole browser history and re-loaded the page but still came up with the issue. I am updating to io14 now… let’s see if that works. If not, I will try your suggestion

Thank you so much for sharing and helping!!

1 Like

You’re welcome.

Because the images on CF cache are WebP. If you purge CF cache and visit it with iPhone first, the imgs will show up, but you cannot count on that as a solution, as the cache is purged occasionally and you have no control what device will be the next to visit you site.

Hi Floripare, sorry, I have just found out I only have the free account as that is what is offered by siteground. Because cloudflare is integrated with the hosting it means we cannot use a plugin (my developer said)

Siteground does offer a paid Cloudflare plan as a partner setup. But you can also disable CF on Siteground and create a free account at www.cloudflare.com, which you may or not want to upgrade to one of CF’s paid plans.

I was referring to a WordPress plugin, and it really doesn’t matter which hosting provider you have. EWWW Image Optimizer is an image optimization plugin that can serve WebP using a JS rewriting option that is compatible with Cloudflare’s Free Plan caching. There might be other such plugins, you’d need to search at the WordPress plugin repository.

Hi Floripare - I have just upgraded to ios14 and it works!!! Thank you so much for your help. Will all ios devices be pushed onto ios14 do you think? I’m just thinking is it now worth fiddling about with other things? Thanks so much again!

iOS 14 adoption rate is about 40% right now. iPadOS will be in the same boat, though I don’t have adoption numbers on that.

Thank you for this - do you think its only at 40% because its only just been released? It will go 100% in the next week or so you think? Thanks again :slight_smile:

No. By June 17th, iOS 13 was at 81%[1]. Similar pattern will probably be observed with iOS 14.

If your site is for a general audience, you cannot use only webp. If your site is for tech nerds, fanboys, early adopters etc. you also cannot use only webp.

  1. https://developer.apple.com/support/app-store/
1 Like

My old iPad Air (original version) is stuck on iOS 12.x. It can’t be upgraded to iOS 13, let alone 14. If you care about visitors who use older devices, you should not serve WebP out of the origin server unless as I said above you install a plugin (or otherwise develop a solution) that will fetch WebP images only for compatible devices. On a Cloudflare Free Plan, that means the solution must be embedded into the HTML, so that the browser fetches the right image for each device.

1 Like

Thank you both for your replies; floripare - it is the free version which means that I cannot use a plugin as it is connected to siteground.

On the paid plan are you 100% sure that that if I turn on Polish and disable WebP generation at the origin this will resolve the issue?

Will I have to pay $20 a month for this service?

I have all my sites on Siteground, I use WordPress on all of them, I pick and chose any plugin I want.

The fact that you have the free Cloudflare plan though their partner setup does not mean you are restricted from doing whatever you want with your site, including adding/removing plugins.

You can also remove the free plan they offer and add your domain to your account here at Cloudflare, so that you will have a direct Cloudflare free plan.

Either way, you’ll need to make sure your origin prepares the pages with a JS that will only fetch WebP images for compatible browsers, either though a readily available WordPress plugin or your own developer’s solution.

1 Like

Hi Floripare, Thank you for your reply. Based on that - what would be the best free solution in order for me to retain great page speed on both mobile and desktop for google and also ensure that my site works on ios across all devices (mobile) please?

These are rather vague questions. You might benefit from learning how to use the many tools Cloudflare has. For the specific question you had in your initial post, I’ve already responded to the best of my knowledge.

2 Likes

On safari and Chrome on mobile my webp images are not displaying despite using cloudflare and siteground. Floripare - a user (Floripare) on this site kindly offered some suggestions and provided the code below to resolve this issue however, only some of the webp files are converted and therefore display on apple devices whilst others arent and wondered if anyone know why only some are converted and some arent? Is this code incorrect or is there another workaround please?