WEBP图像回落

时间:2017-12-02 11:04:30

标签: javascript jquery html css webp

我在互联网上搜索了很多内容。无法在网上找到正确的示例或完整的教程,可以完全教授。所以大家请给我一些很好的例子。

我在很多网站上尝试过WEBP代码,比如使用现代化程序,检查浏览器支持或使用背景图像。

3 个答案:

答案 0 :(得分:4)

有一篇关于stucox的文章,你可以在其中找到一些使用带有现代化和后备图像的webp图像的例子。这应该涵盖你的问题。

/* Result pending */
.js .container {
   background-image: none;
}
/* No JS / WebP not supported */
   .no-js .container,
   .js.no-webp .container {
   background-image: url('image.jpg');
}
/* WebP supported */
   .js.webp .container {
   background-image: url('image.webp');
}

http://www.stucox.com/blog/using-webp-with-modernizr/

答案 1 :(得分:0)

您可以使用onerror事件处理程序并对其进行修复。

这是示例代码

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

答案 2 :(得分:0)

您应使用 picture html元素,如w3schools所述:

<picture>
  <source type="image/webp"  srcset="img_pink_flowers.webp">
  <source srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

最后一个img声明是不兼容浏览器的后备。来源的顺序定义了每种格式的重要性。因此,如果第一个在其浏览器中可用,则将加载第一个。