Loading WebP images on IOS 14 Safari/Chrome using <picture> not working

Question

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.

Screenshot

But when testing this on the iPhone 12 Pro Max / iOS 14 on Safari it seems to be loading the fallback images.

Screenshot

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?

Answer 1

As far as I am aware, webp is not supported on older versions of Safari. In fact, it's only just supported on IOS 14+. This is further confusing as Chrome on IOS is not actually Chrome, but effectively an emulated version of Chrome. From the research I've done it's due to the fact that Apple uses a webkit to try and keep users within the IOS framework. This is why webp doesn't always work, regardless of browser.

I'm not sure what type of stack you're on, but if on Apache, you can create a rule in htaccess that serves webp based on the user agent, thus ensuring compatibility but also eliminating the need to wrap everything in picture elements. This is how I got around the problem of images breaking on some IOS devices, but is also more effective at serving background images that can't be written with the typical <picture> snippet.

Not an expert at htaccess here, but something to the effect of:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} ^.*(Chrome|Firefox|Edge).*$ [NC]
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/wp-content/compressed-folder/$1.webp -f
RewriteRule wp-content/uploads/(.*.(?:png|jpe?g))$ wp-content/compressed-folder/$1.webp [NC,T=image/webp]
</IfModule>

<IfModule mod_headers.c>
Header append Vary Accept env=WEBP_image
</IfModule>

<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>