Images not displaying on Siteground hosted website

General
1

Hello!
I have recently transferred a website to Siteground from JustHost and configured Cloudflare with the default settings as per Siteground’s recommendation. Additionally, I have installed SG Optimizer for the Wordpress website.

The issue is that some images don’t display on mobile even after flushing both caches and exploring the settings. Siteground recommends that we disable caching for the images to load. However, Cloudflare makes my site faster and would prefer not to.

More than happy to answer any questions you may have!

Thanks
Daniel

1 Like
2

Does disabling caching help? For testing purposes, not as a long term solution.

3

All images load when enabling development mode.

4

I have exactly the same problem and question. Can someone help us please?

5

Your DevMode is no longer enabled and I’m seeing all the images. If you use your browser’s Dev Tools (F12 in Chrome), load the site and let us know which errors you see. The Network tab will list resources attempting to load, and the Console tab will show errors.

Screen Shot 2020-06-09 at 7.21.38 AM
Screen Shot 2020-06-09 at 7.21.38 AM2862×2770 794 KB

6

Thank you but personally for me the error is only happening in Safari (which apparently can’t load WebP images) on mobile. Any idea how to avoid the WebP issue? Which I think is what may be happening with Cloudflare cache trying to serve them to Safari (?)

7

Good point. Safari can’t display WebP images. If you have a plugin or theme that replaces PNG or JPG images with WebP of the same filename, that’s going to break Safari. You’ll have to disable that feature.

Cloudflare will cache images by filename, so if your site is converting IMAGE.JPG (in JPG format) to IMAGE.JPG (in WebP) format, Cloudflare will cache it and then Safari can’t display those images.

8

Thanks man, I’ve done that. I guess we’ll have to wait on Safari to catch up. Thanks again for your help :o)

1 Like
9

Hey @sdayman,

Thanks for your quick response. I disabled development mode after I posted. The website loads fine in desktopbrowsers but not on mobile where some images displayed as little boxes.

10

Which mobile are you testing this on? I checked your site and it’s serving WebP images with .JPG and .PNG filenames. If you’re doing this change locally (at your server), then it’s going to break Safari and older browsers.

11

Hey there,

I am testing this on a 6 iPhones (SE all the way to 12) running the latest version of Safari and Chrome (aware Safari doesn’t like WebP) in London, UK.

What do you mean locally?

12

Are you encoding images using WebP, or allowing Cloudflare to do it? If you are doing it yourself (on the server end), can you disable it?

13

I am using the WebP functionality in the SG Optimizer WordPress plug-in.

14

Right. Turn that off.

The issue is that it encodes images in WebP form, which Cloudflare then coaches and delivers to all clients, including Safari clients which can’t handle the format. In order to have Cloudflare cache a resource it must be suitable for all users. And of course, clear these resources from the cache again.

You could also use Cloudflare’s own WebP option as this will only serve the WebP version to capable clients.

15

Ah, the Cloudflare WebP option is part of the paid package, correct?

16

Yes, I believe so.

17

This topic was automatically closed after 14 days. New replies are no longer allowed.