如何通过 CSS 检测是否支持 webp 图像答案

【问题标题】：How to detect if webp images are supported via CSS如何通过 CSS 检测是否支持 webp 图像
【发布时间】：2019-12-13 00:20:45
【问题描述】：

如何在 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”语句可以做到这一点？

【问题讨论】：

可以肯定的是，仅使用 CSS 是不可能“检测到”的。
css 中没有 if 语句。如果不支持某些内容，它只会忽略该规则。由于 css 有效，因此不会忽略丢失的图像或不受支持的图像。
只有“if statements in CSS”才能测试属性支持——@supports (property: value){/*rules*/}——不支持图像文件格式。能够做到@supports (background-image: url('existing-image.webp')){/*...*/} 会很好，但由于很明显的原因，这不起作用。
这里工作解决方案示例stackoverflow.com/a/64048033/1266559
回复：“css 中没有 if 语句。” @media 和 @supports 都代表 if 结构。

标签： css webp

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

modern webkit browser 将使用带有此 CSS 的 WebP 背景图像：

.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) }
  }

【讨论】：

所以如果你问我，这实际上有点聪明。好想！

【解决方案3】：

CSS 目前不支持此功能。

在CSS Images Module Level 4 Draft 中，建议使用后备解决方案，但目前任何地方都不支持。 (2.4. Image Fallbacks and Annotations: the image() notation)

但如果它会在几年后成为标准的一部分，那么你也许可以这样写：

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

在此之前，您需要使用诸如 Modernizer 之类的工具，正如Fifi 的答案中所建议的那样

或者，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>

【讨论】：

具有讽刺意味的是，当浏览器支持图像符号时，它们几乎肯定也会支持 webp。

【解决方案4】：

将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

【讨论】：

这个解决方案目前对浏览器的支持很差。
感谢您添加此答案！它对只需要针对特定浏览器的人很有帮助。我将在明年添加书签并密切关注浏览器的兼容性 - 它看起来很有希望......caniuse.com/mdn-css_properties_background-image_image-set

【解决方案5】：

您实际上可以将它添加到原始声明中，而不需要多个类 @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 图像，而所有其他图像将回退到常规图像。

【讨论】：

Safari 也支持-webkit-image-set，但不支持 webp。这将在 iOS 上失败
啊，好电话。在最近的某些情况下，我一直在检查用户代理，并在此基础上使用适当的图像格式。等不及有更好的方法了。
检查“image/webp”的“Accept”标头比基于用户代理的猜测要好得多
很确定这两个图像都会被下载然后它完全违背了使用 webp 减小大小的目的......