WebP Formatted images not Always Displaying on iOS

Question

In order to speed HTML page loads, I've converted images to webp format and use the "picture" element as follows:

<picture>
    <source data-srcset="images/gallery/urban.webp" type="image/webp">
    <source data-srcset=images/gallery/urban.jpg" type="image/jpeg">
    <img data-src="images/gallery/urban.jpg" alt="Alt Title" style="">
</picture>

On my tests in Chrome, IE, Edge and Firefox on the desktop, this seems to work fine. On Chrome, in developer mode, when I run under emulation mode for mobile devices, it works too.

But when I test on an iPhone with iOS 12, not all of the images render. It happens on both Safari and Chrome. A few of the larger images are displayed as gray areas. I hadn't seen that before during development. When I change the element back to just the jpg , it renders OK:

<img src="images/gallery/urban.jpg" alt="Alt Title" style="">

I'm not sure the best way to fix this. Maybe there is something wrong with the markup. Or maybe I should consider it a bug and try to work around it by forcing jpg/png images when the operating system is iOS? (by using CSS or HTML or Javascript?) But the problem seems to be affecting only certain larger images. It is a bit of a hassle to have to manually test to determine which images should be "picture" and which should be just "img".

Answer 1

WebP was designed by Google for use in Google Chrome. Unfortunately, WebP is not supported in Apple's Safari web browser.

https://discussions.apple.com/thread/250073758

Only starting with iOS 14 (released end of September 2020), Safari on iOS supports webp.