.webp image format compatibility

So, I’ve noticed that at some point this site started using Google’s .webp image format intermittently, perhaps exclusively in the #yoyoexpert-releases-and-restocks category.

The reason I noticed at all is because those images aren’t showing up for me correctly. I see something like this…

Webp images show up in extremely low resolution. Clicking on it shows a message “The image could not be loaded”. Clearly a compatibility issue of some kind.

I’m currently on Safari 15.4 which supposedly supports .webp according to this compatibility tracker site.

Chrome works fine (just checked), and I’m sure this issue will probably get resolved with a subsequent update of Safari, but just something to be aware of that is affecting at least some of us at present.

Maybe an intermittent error? Images loaded as expected for me in Safari 15.4:

Shopify is the one serving the images as WebP, not sure how much control YYE has over that.

ohh… now that is interesting. What version of MacOS are you on @Isaac? 10.x, 11, 12?

12.3.1

I think when I just grab the images from the product page they load as .webp - I can just make a note to upload the .jpg from my photo folder instead since it is causing issues.

1 Like

Weird… I’m pretty sure it has something to do with macOS versions.

So, I have 2 laptops I tested against just now. Both have Safari 15.4. However one laptop is on a legacy macOS 10.15 (Catalina, 2019) and one is on the current 12.x (Monterey, 2021).

Safari on Monterey works fine, but Safari on Catalina doesn’t – even with the same Safari versions (but Chrome works on Catalina :crazy_face:).

This is turning out to certainly be a niche case and probably not affecting a lot of people.

I found this on reddit:

https://www.reddit.com/r/MacOS/comments/pw1b0v/comment/hmbcwks/?utm_source=share&utm_medium=web2x&context=3



Looks like it’s an issue with older macOS versions (quote from the comment):

The support for WebP images is limited on older Mac OS version, even if Safari is updated, guess is it’s related to some core rendering modules like CoreGraphics.

2 Likes