Site header logo and parallax image on homepage do not display on iPhone

Question

I use Chrome and an Android phone, and only just looked at my site on a friends iPhone. On my homepage there is no logo in the header, and the parallax image on the homepage doesn't load.

Site: https://www.obsidianurbexphotography.com/

Other images load on the site fine. There looks to be the correct @2x images there. Website also uses WebP images, but from what i understand the image format will default to jpg/png if the device can't display WebP.

Any suggestions would be gratefully received, as I no longer have an iPhone to check :(

Answer 1

Do not use WebP, it works in Chrome only. If you check your website in Firefox or Edge on Windows, these images are not loaded also. When I check the source of your website in Firefox or Chrome, the image source is with JPG extension, but Firefox returns that image is missing, and if I try to open it in other programs, it says that format is not recognized. Only Chrome, Vivaldi and Opera can see these images because they all use Chromium in the browser with WebP support.

That is why iOS Safari (and most likely normal Safari on macOS) don't see these images.

Also, I am not aware of any method to automatically replace WebP with PNG/JPG for WordPress or any other CMS.