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".

Centenarian

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.

Banuelos

I have the same problem in Google Chrome iOS. Some pictures don't show – Pericarditis

Answer 2

Only the larger files being affected maybe suggests these are animated images similar to, but better quality than gifs.

Obbligato

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Scale