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

【问题标题】：WebP Formatted images not Always Displaying on iOSWebP 格式的图像并不总是在 iOS 上显示
【发布时间】：2019-09-20 05:53:46
【问题描述】：

为了加快 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 时，它呈现 OK：

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

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

【问题讨论】：

标签： ios image webp

【解决方案1】：

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

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

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

【讨论】：

我在 Google Chrome iOS 中遇到了同样的问题。有些图片不显示