CODEWITHSUNDEEP
iosimagewebp
George Hernando
George Hernando

Reputation: 2650

WebP Formatted images not Always Displaying on iOS

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

Upvotes: 6

Views: 15046

Answers (2)

Donald E
Donald E

Reputation: 1

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

Upvotes: 0

sortofme
sortofme

Reputation: 79

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.

Upvotes: 7

Related Questions