如何在CSS background-image属性中指定WebP不支持时的备选图片

方案1：使用CSS原生image-set()实现（推荐，无需额外JS） #

image-set()是CSS原生提供的多源背景图选择语法，支持通过type参数指定图片格式，浏览器会自动匹配第一个自身支持的格式加载，效果和picture元素完全一致。
你可以直接修改a标签的内联样式如下：

<div class="col-sm-6 col-lg-4"><a class="thumbnail" href="~/home/products"
      style="/* 低版本浏览器回退规则，不支持image-set时默认加载JPG */
             background-image: url(/../images/image-370x370.jpg);
             /* 支持image-set的浏览器会自动选择适配的格式 */
             background-image: image-set(
               url(/../images/image-370x370.webp) type("image/webp"),
               url(/../images/image-370x370.jpg) type("image/jpeg")
             );">
        <div class="thumbnail-caption">
          <h3 class="thumbnail-heading">E-Commerce</h3>
          <div class="thumbnail-inner">
            <div class="thumbnail-content">
              this is a complete e-commerce solution through which you can manage your online store.
            </div>
            <div class="thumbnail-icon fa-angle-right"></div>
          </div>
        </div></a>
</div>

该语法兼容Chrome 113+、Firefox 113+、Safari 14+，覆盖目前95%以上的全球用户流量。

方案2：JS检测WebP支持后动态切换（兼容性最优） #

如果需要兼容更低版本的浏览器，可以通过JS预先检测WebP支持情况，给根标签加对应的类名，再通过CSS类选择器切换背景图：

1. 首先在页面加载时执行WebP检测脚本：

function detectWebp() {
  return new Promise(res => {
    const testImg = new Image();
    testImg.onload = () => res(true);
    testImg.onerror = () => res(false);
    // 1像素的WebP测试图
    testImg.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==';
  })
}
detectWebp().then(support => {
  document.documentElement.classList.add(support ? 'webp-ok' : 'webp-no');
})

2. 把背景图规则从内联样式移到CSS文件中：

/* 默认加载JPG作为兜底 */
.thumbnail {
  background-image: url(/../images/image-370x370.jpg);
}
/* 支持WebP的浏览器自动替换为WebP格式 */
.webp-ok .thumbnail {
  background-image: url(/../images/image-370x370.webp);
}

内容的提问来源于stack exchange，提问作者Ali Shan