I've recently converted various images on a client site (WordPress) to WebP format and I'm using the "picture" tag to display them on the next-gen browser versions with a working fallback image.
Example:
<picture>
<source srcset="my-folder/my-image.webp" type="image/webp">
<source srcset="my-folder/my-image.png" type="image/png">
<img src="my-folder/my-image.png" srcset="my-folder/my-image.png">
</picture>
On desktop, the WebP format seems to be correctly loaded on browsers where WebP is supported and the fallback images on browsers where it's not supported.
When using Browserstack.com to test it on Android devices the WebP images seem to be correctly loaded as well and I see that webP images are being loaded from the network tab in dev tools.
But when testing this on the iPhone 12 Pro Max / iOS 14 on Safari it seems to be loading the fallback images.
And when I’m trying to open up images on Chrome OR Safari on my own iPhone device (iPhone 11 Pro Max/iOS 14.4) it seems to be opening up the fallback images as well.
According to https://caniuse.com/webp WebP seems to be supported by iOS Safari (from 14.4) and Chrome.
Is there something I’m doing wrong? Do I need to display them differently for iOS devices? Or are WebP images still not fully supported somehow on Safari/Chrome IOS?
