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

How to use WebP format in another browers?

我使用 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。如何解决这个问题?

也许用 onError 作为后备?像

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

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

图片元素是你需要的:

<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