如何通过 CSS 检测是否支持 webp 图片

Question

如何在CSS中检测是否支持webp图片？

.home-banner-background {
     background-image: url('img/banner.jpg');
 }
 /*Here is an if statement that will check if webp is supported*/ {
        .home-banner-background {
            background-image: url('img/banner.webp');
        }
}

是否有 "if" 语句可以做到这一点？

Answer 1

您可以使用 Modernizr。它是一种检测工具用户浏览器上的可用功能。它只是一个添加到您的网站中的脚本，您可以使用它编写类似的内容：

.no-webp .home-banner-background {
     background-image: url('img/banner.jpg');
 }

.webp .home-banner-background {
     background-image: url('img/banner.webp');
}

Answer 2

目前 CSS 不支持此功能。

在CSS Images Module Level 4 Draft, a fallback solution is suggested, but this is currently not supported anywhere. (2.4. Image Fallbacks and Annotations: the image() notation)

但如果它在几年内成为标准的一部分，那么您可能会写：

.home-banner-background {
    image:image('img/banner.webp', 'img/banner.jpg')
}

在那之前，您需要使用 Modernizer 等工具，如

的答案中所建议

或者，picture HTML 标签可能是您能想到的，但它是否适用于您的情况取决于图像在您的网站上应如何调整大小：

<picture>
  <source srcset="img/banner.webp" type="image/webp">
  <source srcset="img/banner.jpg" type="image/jpeg"> 
  <img src="img/banner.jpg">
</picture>

Answer 3

modern webkit browser 将使用 WebP 背景图片 CSS:

.map {background-image: url('../img/map.jpg');}
  @supports (background-image: -webkit-image-set(url('../img/map.webp') 1x)) {
    .map {background-image: -webkit-image-set(url('../img/map.webp') 1x) }
  }

Answer 4

您实际上可以将它添加到原始声明中，而无需多个类、@supports 或引入另一个类似于此的库：

.home-banner-background {
    background-image: url('img/banner.jpg');
    background-image: -webkit-image-set(url('img/banner.webp') 1x,
                                        url('img/banner-2x.webp') 2x),
                                        /* etc */;
}

Webkit 将使用 webp 图像，所有其他图像将回退到常规图像。

Answer 5

将 type() 函数与 image-set() 一起使用，以提供具有 CSS 的替代图像格式。在示例中，type() 函数用于提供 WEBP 和 JPEG 格式的图像。如果浏览器支持webp，它会选择那个版本。否则它将使用 jpeg 版本。

.box {
  background-image: image-set(
    url("large-balloons.webp") type("image/webp"),
    url("large-balloons.jpg") type("image/jpeg"));
}

Doku

如何通过 CSS 检测是否支持 webp 图片

How to detect if webp images are supported via CSS

css

webp