WebP Formatted images not Always Displaying on iOS

ios image webp
George Hernando picture George Hernando · May 1, 2019 · Viewed 8.8k times · Source

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

sortofme picture sortofme · Aug 1, 2019

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

Related questions

How to easily resize/optimize an image size with iOS?

My application is downloading a set of image files from the network, and saving them to the local iPhone disk. Some of those images are pretty big in size (widths larger than 500 pixels, for instance). Since the iPhone doesn't even …

Read More
Swift add icon/image in UITextField

I would like to add icon/image in UITextField. The icon/image should be left to placeholder. I tried this: var imageView = UIImageView(); var image = UIImage(named: "email.png"); imageView.image = image; emailField.leftView = imageView; Thanks.

Read More
How can I color a UIImage in Swift?

I have an image called arrowWhite. I want to colour this image to black. func attachDropDownArrow() -> NSMutableAttributedString { let image:UIImage = UIImage(named: "arrowWhite.png")! let attachment = NSTextAttachment() attachment.image = image attachment.bounds = CGRectMake(2.25, 2, attachment.image!.size.width - 2.25, …

Read More