使用 <picture> 在 IOS 14 Safari/Chrome 上加载 WebP 图像不起作用答案

【问题标题】：Loading WebP images on IOS 14 Safari/Chrome using <picture> not working使用 <picture> 在 IOS 14 Safari/Chrome 上加载 WebP 图像不起作用
【发布时间】：2021-09-08 01:08:21
【问题描述】：

我最近将客户端站点 (WordPress) 上的各种图像转换为 WebP 格式，并且我正在使用“图片”标签在具有工作后备图像的下一代浏览器版本上显示它们。

例子：

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

在桌面上，WebP 格式似乎可以在支持 WebP 的浏览器上正确加载，而在不支持 WebP 的浏览器上则可以正确加载后备图像。

当使用 Browserstack.com 在 Android 设备上对其进行测试时，WebP 图像似乎也已正确加载，并且我看到 webP 图像正在从开发工具的网络选项卡中加载。

Screenshot

但在 iPhone 12 Pro Max / iOS 14 上的 Safari 上测试时，它似乎正在加载后备图像。

Screenshot

当我尝试在我自己的 iPhone 设备（iPhone 11 Pro Max/iOS 14.4）上打开 Chrome 或 Safari 上的图像时，它似乎也在打开备用图像。

根据https://caniuse.com/webp，iOS Safari（从 14.4 开始）和 Chrome 似乎支持 WebP。

我做错了什么吗？我需要为 iOS 设备以不同的方式显示它们吗？还是在 Safari/Chrome IOS 上仍然不完全支持 WebP 图像？

【问题讨论】：

标签： html ios wordpress safari webp

【解决方案1】：

据我所知，webp is not supported on older versions of Safari. 实际上，它仅在 IOS 14+ 上受支持。这更加令人困惑，因为 IOS 上的 Chrome 实际上并不是 Chrome，而是实际上是 Chrome 的模拟版本。从我所做的研究来看，这是因为 Apple 使用 webkit 来尝试将用户保持在 IOS 框架内。这就是为什么无论浏览器如何，webp 并不总是有效的原因。

我不确定您使用的是哪种类型的堆栈，但如果在 Apache 上，您可以在 htaccess 中创建一个基于用户代理为 webp 服务的规则，从而确保兼容性但也无需将所有内容包装在图片元素。这就是我解决某些 IOS 设备上图像中断问题的方法，但在提供无法使用典型 <picture> sn-p 编写的背景图像时也更有效。

这里不是 htaccess 方面的专家，但大意是：

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

【讨论】：