Big Sur 上的 Safari 14 不加载 webp，也不回退到其他提供的源答案

【问题标题】：Safari 14 on Big Sur doesn't load webp and doesn't fallback to other provided sourcesBig Sur 上的 Safari 14 不加载 webp，也不回退到其他提供的源
【发布时间】：2021-07-20 13:19:15
【问题描述】：

我有一个在 Catalina 上的 Safari 14 上工作的图片元素。

它在一个图片元素中使用两个来源。第一个是webp，第二个是jpg。 Safari，因为不支持 webp，过去回退到 jpg。

在新的 Big Sur 操作系统中，它不会回退，而是显示错误。网络标签显示其正在下载 webp（加载失败）。

我的代码有一个 codepen。 https://codepen.io/yhattav/pen/YzNgBeV

webp(pink) first, jpg(green) 2nd
<picture>
 <source srcset="https://static.wixstatic.com/media/907a4b_03ff6fed104e4447a1402d87cbe97138~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_03ff6fed104e4447a1402d87cbe97138~mv2.webp" type="image/webp">
 <source srcset="https://static.wixstatic.com/media/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpeg" type="image/jpeg">
 <img alt="Lt_Olive.jpg" class="gallery-item-visible gallery-item gallery-item-preloaded" data-hook="gallery-item-image-img" data-idx="0" src="https://static.wixstatic.com/media/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.webp" style="width: 317px; height: 317px;">
</picture>
jpg(green) first, webp(pink) 2nd
<picture>
 <source srcset="https://static.wixstatic.com/media/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpeg" type="image/jpeg">
 <source srcset="https://static.wixstatic.com/media/907a4b_03ff6fed104e4447a1402d87cbe97138~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_03ff6fed104e4447a1402d87cbe97138~mv2.webp" type="image/webp">
 <img alt="Lt_Olive.jpg" class="gallery-item-visible gallery-item gallery-item-preloaded" data-hook="gallery-item-image-img" data-idx="0" src="https://static.wixstatic.com/media/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.jpg/v1/fill/w_317,h_317,al_c,q_90/907a4b_a7594ab04dcb4d969a8440401f3d3a2d~mv2.webp" style="width: 317px; height: 317px;">
</picture>

由两个图片元素组成：

webp 源，jpg 源，img 标签。
jpg源，webp源，img标签。

为了让它更明显，webp 是粉红色的，而 jpg 是绿色的。

在 chrome 中，它显示粉红色和绿色，因为它支持 webp。在 Catalina 的 safari 中，它显示绿色和绿色，因为它不支持 webp。

我读到应该已经将 webp 支持添加到新版本中。 https://www.macrumors.com/2020/06/22/webp-safari-14/ 会不会是浏览器“认为”它支持 webp 而实际上并不支持？

感谢您的帮助。

【问题讨论】：

这个文件一定有 Safari 不喜欢的东西。我尝试了有损和无损格式，它似乎都支持even animated...不知道这个文件有什么特别...
谢谢。如果 bigSur 和 safari 是今天的最新版本，则通过进一步调查可以解决此问题。可能是最近的补丁解决的问题。

标签： html safari macos-big-sur webp picture-element

【解决方案1】：

在 Safari 14.0.3 和 OS X Mojave 上，如果未指定 type="image/webp"，回退到 jpg 将失败。它尝试显示图像，但仅显示错误图标。一旦我添加类型，它就会正确地回退到 Jpeg。因此，正如你所描述的那样。如果没有指定类型，它会尝试显示 webp，认为它可以处理它，但是当你告诉它它的类型是 webp 时，它知道它会失败并回退。

【讨论】：