Question

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

<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”，这有点麻烦。

Answer 1

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

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

WebP格式的图像并非始终在iOS上显示

1 个答案: