CSS性能对比：可缩放背景用<img>标签与::before背景图哪个更优

可缩放背景图性能对比：标签 vs 伪元素background-image #

结论 #

针对高清图片缩放无卡顿的需求，标签方案性能更优，具体差异如下：

• 加载优先级更高：<img>是HTML内容级资源，浏览器解析HTML阶段就会主动发起资源请求，加载时机远早于伪元素的background-image——后者需要等CSS解析完成、DOM树和CSSOM树构建完成后才会触发资源加载，首屏场景下<img>的图片会更早渲染完成，大幅降低首屏卡顿概率。
• 动画渲染效率更高：你当前使用的transform: scale本身是走GPU加速的动画属性，但两种方案的底层渲染逻辑有差异：<img>的位图数据会被浏览器预先解码后存入GPU缓存，缩放时直接调用缓存数据即可；而background-image会多一层背景适配计算步骤，尤其是配合background-size: cover使用时，每次重绘都需要重新计算背景的裁切、适配尺寸，高分辨率屏幕或多卡片同时触发动画时，伪元素方案的卡顿概率明显更高。
• 内存占用更低：同一图片多处复用的场景下，<img>标签的解码缓存可以被全局复用，而伪元素的背景图在部分浏览器中会出现重复解码的情况，额外占用运行内存，低端设备上更容易出现卡顿。

现有代码优化建议 #

你当前的实现已经选用了GPU友好的transform属性做动画，还可以补充两个优化点进一步降低卡顿概率：

1. 给做动画的元素增加will-change: transform属性，提前告知浏览器该元素会触发变换动画，浏览器会预先分配GPU资源，避免动画启动时的卡顿。
2. 高清图可以搭配<img>的srcset属性，根据屏幕分辨率自动加载对应尺寸的图片，避免小屏设备加载过大的高清图浪费性能。

参考实现代码 #

CSS代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.card-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.card {
  height: 300px;
  width: 250px;
  position: relative;
  box-shadow: 0 0 5px grey;
  overflow: hidden;
  border-radius: 20px;
  background-color: #0004;
}

.card-text {
  display: flex;
  align-items: flex-end;
  color: white;
  font-size: 24px;
  font-family: Arial;
  padding: 20px;
  height: 100%;
  width: 100%;
}

.background-image {
  position: absolute;
  object-fit: cover;
  object-position: center;
  height: 100%;
  width: 100%;
  transition: transform .4s ease;
  z-index: -1;
  /* 新增优化：预先分配GPU资源 */
  will-change: transform;
}

.card:hover .background-image,
.psuedo-bg-img:hover::before {
  transform: scale(1.1);
}

.psuedo-bg-img {
  position: relative;
}

.psuedo-bg-img::before {
  content: '';
  background-image: url('https://source.unsplash.com/random');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
  transition: transform .4s ease;
  will-change: transform;
}

HTML代码 #

<div class="card-list">
  <div class="card">
    <img class="background-image" src="https://source.unsplash.com/random">
    <div class="card-text">
      <h3>&lt;img&gt; 作为背景</h3>
    </div>
  </div>

  <div class="card psuedo-bg-img">
    <div class="card-text">
      <h3>伪元素 + background-image 实现</h3>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Zack Plauché