尽管添加了 polyfill，WebP 图像不会在 safari 中显示

Question

Google 洞察力告诉我将我的 JPG 图片转换为 WebP。它将每张图片的宽度减少了一半，但问题是 Mac 上的 Safari（可能是最差的浏览器，甚至边缘更好请不要使用它，这样它就会死掉）不显示 webP。

我已将 this script 添加到我的应用程序中，我认为它是 polyfill，但它没有帮助。它也写在那里下载两个文件，但 webpjs-0.0.2.swf 已损坏 link。有一些有效的 polyfill 吗？

大多数图像通常作为绑定内联样式用作背景图像。因此，例如 this polyfill 将不起作用，因为 css 支持是未来的计划。

反过来 this 缺少有关 css/inline-style 的文档，还需要做一些工作来替换每个组件中每个图像中的路径。

如果您有 mac 和 safari - live demo

Answer 1

我custom built modernizr刚刚从中获取了 WebP 检查器，然后使用了这个方法：

对于 HTML 图片：

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

对于 CSS 图片：

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

.webp .elementWithBackgroundImage{
  background-image: url("image.webp");
}

用于将图像 link 作为道具传递（在 Vue2 应用程序或任何其他前端框架内）：

document.querySelector("html").classList[0] === 'webp' ? this.webpEnabled = true : this.webpEnabled = false;
this.webpEnabled ? this.currentImages = this.imagesWebp : this.currentImages = this.imagesJpeg

<some-component :image="currentImages[0]"></some-component>

Answer 2

如果您正在寻找一个简单的（无 JS）解决方案来解决 .webp 图像无法在 Safari 上显示为 CSS 背景图像的问题，您可以直接使用 CSS背景属性:

background: url(image-filename.webp) center/contain no-repeat,
            url(image-filename.jpg) center/contain no-repeat;

图像的顺序很奇怪，因为感觉您应该将旧格式放在 .webp 文件之后。

无论如何，这为 Safari 和其他较小的浏览器提供了备用图像。

编辑

上面的答案有效，但这不是一个好的解决方案，因为浏览器最终只会下载这两个图像。

使用 .webp 跨浏览器的 "real" 答案似乎需要 Modernizr 和使用 JS 的浏览器检测 - 参见此处：

https://css-tricks.com/using-webp-images/#article-header-id-4

尽管添加了 polyfill，WebP 图像不会在 safari 中显示

WebP images doesn't display in safari although added polyfill

javascript

jpeg

polyfills

webp