WebP 格式的图像并不总是显示在 iOS 上

Question

为了加快 HTML 页面的加载速度，我将图像转换为 webp 格式并使用“图片”元素，如下所示：

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

在我在 Chrome、IE、Edge 和 Firefox 桌面上的测试中，这似乎工作正常。在 Chrome 上，在开发人员模式下，当我在移动设备的仿真模式下运行时，它也能工作。

但是当我在装有 iOS 12 的 iPhone 上进行测试时，并不是所有的图像都呈现出来。它发生在 Safari 和 Chrome 上。一些较大的图像显示为灰色区域。我以前在开发过程中没有看到过。当我将元素改回 jpg 时，它呈现正常：

<img src="images/gallery/urban.jpg" alt="Alt Title" style="">

我不确定解决这个问题的最佳方法。也许标记有问题。或者也许我应该将其视为错误并尝试通过在操作系统为 iOS 时强制使用 jpg/png 图像来解决它？（通过使用 CSS 或 HTML 或 Javascript？）但问题似乎只影响某些较大的图像。必须手动测试以确定哪些图像应该是“图片”，哪些应该只是“img”，这有点麻烦。

Answer 1

WebP 是由谷歌设计的，用于谷歌浏览器。不幸的是，Apple 的 Safari 网络浏览器不支持 WebP。

https://discussions.apple.com/thread/250073758

仅从 iOS 14（2020 年 9 月下旬发布）开始，iOS 上的 Safari 才支持 webp。