提供经过优化的装饰性图片

Web 功能： image-set()

通过 CSS 传送经过优化的装饰性图片，可在不牺牲视觉质量的情况下提升感知性能。通过使用 image-set() CSS 函数，您可以为浏览器提供单个背景或遮罩图片的多个选项。您可以指定现代格式（如 AVIF 或 WebP）以及不同的分辨率（如 1x 和 2x）。浏览器会动态选择兼容的最小图片，为用户的设备提供适当的像素密度。

注意：如果图片可能是 Largest Contentful Paint (LCP) 元素（例如，大型主打横幅），请注意，浏览器的预加载扫描器无法发现通过 image-set() 在 CSS 中引用的图片。这可能会显著延迟图片加载并损害 LCP。对于 LCP 候选元素，请考虑改用标准 HTML <img> 或 <picture> 标记，或者使用 <link rel=preload> 选项和 media 属性预加载图片。

实现

image-set() 函数可在 CSS 预期 <image> 值的任何位置使用，最常见的是在 background-image、content 或 mask-image 中。请注意，虽然同时通过 type() 提供图片格式和分辨率（例如 1x 或 2x）可获得最佳效果，但这两个参数都是可选的。

.gallery-item {
  /* Provide multiple resolutions and formats using image-set() */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.webp") type("image/webp") 1x,
    url("gallery-2x.webp") type("image/webp") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
  
  /* Standard decorative properties */
  background-size: cover;
  background-position: center;
}

后备策略

对于不支持 image-set() 函数的旧版浏览器，您必须在 image-set() 规则之前提供标准图片声明。这种渐进增强策略依赖于 CSS 的级联特性：不受支持的规则会被忽略。

.gallery-item {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  background-image: url("gallery.jpg");
  
  /* Modern browsers will apply this and override the fallback */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
}