Question

Google见解告诉我将JPG图像转换为WebP。它使每张图片减少了一半，但问题是Mac上的Safari（可能是最差的浏览器，甚至边缘更好，请不要使用它，以免它死亡）。

我已将this script添加到我的应用程序中，我认为它是polyfill，但没有帮助。另外，该文件还写在此处以下载两个文件，但是webpjs-0.0.2.swf是断开的链接。是否有一些有效的填充料？

大多数图像通常作为绑定的嵌入式样式用作背景图像。因此，例如this polyfill无效，因为CSS支持是未来的计划。

this却缺乏css / inline样式的文档，还需要做一些工作来替换每个组件中每个图像中的路径。

如果您使用的是Mac和苹果浏览器-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");
}

将图片链接作为道具（在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跨浏览器的“真实”答案似乎需要使用JS进行Modernizr和浏览器检测-参见此处：

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

尽管添加了polyfill，但WebP图像未在野生动物园中显示

2 个答案: