如何在另一个浏览器中使用 WebP 格式？

Question

我使用 google 审核来加速我的应用程序。所以 google 审计说 - "it's time to use .webp images!"。好吧，让我们开始吧。但... Mozilla firefox 不支持它。所以，我打开了 WebPJS，它帮了大忙。但是...

我有 DOM-元素：

<img src="image.webp" srcset="image-480.webp 480w, image-768.webp 768w, image-1024.webp 1024w" alt="alt" titile="title"/>

WebPJS 替换 src-attribute 但不触及 srcset-attribute。如何解决这个问题？

Answer 1

也许用 onError 作为后备？像

<img src="image.webp" onerror="this.onerror=null; this.src='image.png'">

你看到这个了吗kind of webp serving？也许使用 <picture> 可以完成这项工作？

Answer 2

图片元素是你需要的：

<picture>
  <source srcset='image-480.webp' type="image/webp" media="(max-width: 480px)">
  <source srcset='image-768.webp' type="image/webp" media="(max-width: 768px)">
  <source srcset='image-1024.webp' type="image/webp" media="(min-width: 769px)">
  <source srcset='image-480.jpg' type="image/jpg" media="(max-width: 480px)">
  <source srcset='image-768.jpg' type="image/jpg" media="(max-width: 768px)">
  <source srcset='image-1024.jpg' type="image/jpg" media="(min-width: 769px)">
  <img src="image-1024.jpg"  />
</picture>

以上代码应：

为支持图片属性和webp图片的浏览器加载webp图片
为支持图片属性但不支持webp的浏览器加载jpg
为不支持图片属性的浏览器加载图片-1024.jpg

我可以使用吗：picture webp

如何在另一个浏览器中使用 WebP 格式？

How to use WebP format in another browers?

javascript

pagespeed

audit

webp