Question

我使用Google审核来加速我的应用程序。因此，谷歌审计说-“现在是时候使用.webp图像了！”。好吧，让我们这样做。但... 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
为不支持图片属性的浏览器加载image-1024.jpg

我可以使用：picture webp

如何在其他浏览器中使用WebP格式？

2 个答案: