Chrome中CSS background-image缩放后像素化，如何开启抗锯齿？

Chrome中background-image与渲染差异的抗锯齿解决办法 #

问题描述 #

同一张图片缩放到相同尺寸时，用CSS background-image 实现的背景图会出现像素化，而 <img> 标签的图片却有自然的抗锯齿效果。

示例代码：

<style>
  .a {
    width: 292px;
    height: 233.594px;
    display: inline-block;
  }

  div.a {
    background-image: url("data:image/png;...");
    background-size: cover;
  }
</style>

<div class="a"></div>
<img class="a" src="data:image/png;..." />

预览可见：div的背景图边缘粗糙像素化，img标签的图片边缘平滑带抗锯齿。

解决方法 #

可以通过以下CSS属性强制Chrome优化background-image的渲染效果：

方法1：使用image-rendering属性+硬件加速 #

给背景图容器添加Chrome特有的渲染优化属性，同时触发硬件加速提升平滑度：

div.a {
  background-image: url("data:image/png;...");
  background-size: cover;
  /* Chrome专属优化，提升缩放图片的抗锯齿效果 */
  image-rendering: -webkit-optimize-contrast;
  /* 触发GPU硬件加速，优化渲染质量 */
  transform: translateZ(0);
}

方法2：提供多分辨率图片（根源解决） #

针对不同DPI屏幕提供适配的图片，避免缩放导致的像素化：

div.a {
  background-image: image-set(
    url("image.png") 1x,
    url("image@2x.png") 2x
  );
  background-size: cover;
}

原理 #

Chrome对<img>标签默认采用了更精细的图像缩放算法，而background-image的默认渲染策略偏向性能优先。-webkit-optimize-contrast会强制Chrome使用更优的抗锯齿算法处理背景图，硬件加速则让GPU参与图像渲染，进一步提升平滑度；提供多分辨率图片则从根源上减少缩放操作，自然避免像素化问题。

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