响应式背景图像（为性能提供最佳尺寸）答案

【问题标题】：Responsive background images (serving best size for performance)响应式背景图像（为性能提供最佳尺寸）
【发布时间】：2021-07-26 06:51:49
【问题描述】：

在以下 CSS 代码中，是否会同时获取两个图像？

.class {
    background-image: url(https://img.com/small);

    @screen (min-width: 700px) {
       background-image: url(https://img.com/big);
    }
}

我们不希望向移动设备提供大图像。我们有srcset/sizes，但这不适用于背景图片。我们有image-set()，但这似乎关心像素密度，而不是屏幕宽度（我认为）。你如何处理这个问题？

【问题讨论】：

将第一个声明包裹在@screen (max-width: 699px) {...}
您是否检查了网络选项卡以查看两者是否都已获取？

标签： html css image responsive-design

【解决方案1】：

不知道为什么我没有按照@TJ 的建议检查网络选项卡。结果（至少在 Chrome 中）它们并没有全部被获取，当您调整屏幕大小时，新图像会被获取。

我想我会使用这个 postcss mixin，但如果有人有其他方法，我仍然会感兴趣。

@define-mixin responsive-bg-img $src {
  background-image: url('$(src)?nf_resize=fit&w=smallpx');

  @screen sm {
    background-image: url('$(src)?nf_resize=fit&w=mediumpx');
  }

  @screen md {
    background-image: url('$(src)?nf_resize=fit&w=largepx');
  }
}

.responsive-bg-img-wine {
  @mixin responsive-bg-img ../assets/lfs/wine.png;
}

【讨论】：