前端图片加载优化：避免布局抖动（CLS）的实战指南

针对网页中图片加载导致的布局抖动（cumulative layout shift, cls）问题，本文提供了一种高效且易于实施的解决方案。通过在``标签上明确设置`width`和`height`属性，浏览器能够预留足够的空间，从而消除图片加载前后内容位移的视觉不一致。文章将详细解释其原理、提供代码示例，并强调此方法在提升用户体验和页面性能方面的关键作用。

理解布局抖动 (Cumulative Layout Shift, CLS)

布局抖动（CLS）是衡量网页视觉稳定性的一项重要指标，也是Google Core Web Vitals 的核心组成部分。当页面上的可见元素在用户没有预期的情况下发生位置或尺寸变化时，就会发生布局抖动。这种现象不仅会严重影响用户体验，导致用户误点击或阅读中断，还可能对网站的搜索引擎排名产生负面影响。

图片是导致CLS的常见原因之一。当浏览器渲染页面时，如果图片没有明确的尺寸信息，它将无法预先为图片预留空间。当图片资源下载完成后，浏览器会根据其真实尺寸重新布局页面，从而导致图片下方或周围的内容发生位移。

核心解决方案：指定图片尺寸

解决图片加载导致的布局抖动的最直接和有效的方法，是在<img>标签上明确设置width和height属性。

工作原理： 当浏览器解析HTML时，如果发现<img>标签带有width和height属性，它会立即知道图片将占据多少水平和垂直空间。即使图片文件尚未下载或完成渲染，浏览器也能根据这些属性计算出图片的宽高比，并提前在页面上预留出相应的空间。这样，当图片最终加载完成时，页面布局就不会发生变化，从而避免了视觉抖动。

与响应式设计的结合： 许多现代网站采用响应式设计，图片尺寸会根据屏幕大小动态调整。在这种情况下，即使设置了width和height属性，通过CSS规则（如max-width: 100%; height: auto;）来控制图片的实际显示尺寸仍然是常见的做法。重要的是，width和height属性在这里的主要作用是提供图片的原始（intrinsic）宽高比。浏览器利用这个宽高比，结合CSS的宽度限制，可以在图片加载前计算出所需的动态高度，从而依然能够预留出正确的空间。

代码示例

以下是一个典型的图片加载导致布局抖动的问题场景及其优化方案。

立即学习“前端免费学习笔记（深入）”；

问题代码示例：

在以下Vue组件的模板中，图片没有明确的width和height属性：

STORYD

帮你写出让领导满意的精美文稿

137

查看详情

<template>
  <div>
    <div class="2xl:px-5">
      <img
        class="block rounded-xl mx-auto h-48 my-12 padel-img"
        :src="require('../assets/img/about-hero.jpg')"
        alt="about image"
      />
    </div>
    <div class="px-6">
      <h1 class="text-3xl mt-20 font-semibold text-center capitalize text-black sm:text-5xl mb-2">
        关于我们
      </h1>
      <p class="text-center w-11/12 mx-auto px-2 font-regular text-lg text-tertiary mt-5 mb-32 sm:text-xl sm:w-600 sm:mx-auto">
        这是一段关于我们的描述文本。
      </p>
    </div>
  </div>
</template>

<style>
.padel-img {
  width: 90%;
  max-width: 1560px;
}

@media screen and (min-width: 640px) {
  .padel-img {
    height: unset; /* 在大屏幕上高度自适应 */
    width: 80%;
  }
}
</style>

在此示例中，h-48 Tailwind CSS 类将图片高度设置为固定值（12rem）。然而，在媒体查询中，height: unset会使其高度变为自适应，此时若无width和height属性提供宽高比，浏览器在图片加载前将无法确定其最终高度，导致下方文本在图片加载后被推开。

优化后的代码示例：

通过在<img>标签上添加width和height属性，告知浏览器图片的原始尺寸：

<template>
  <div>
    <div class="2xl:px-5">
      <img
        class="block rounded-xl mx-auto h-48 my-12 padel-img"
        :src="require('../assets/img/about-hero.jpg')"
        alt="about image"
        width="1560"  <!-- 假设图片原始宽度为1560px -->
        height="480"  <!-- 假设图片原始高度为480px -->
      />
    </div>
    <div class="px-6">
      <h1 class="text-3xl mt-20 font-semibold text-center capitalize text-black sm:text-5xl mb-2">
        关于我们
      </h1>
      <p class="text-center w-11/11 mx-auto px-2 font-regular text-lg text-tertiary mt-5 mb-32 sm:text-xl sm:w-600 sm:mx-auto">
        这是一段关于我们的描述文本。
      </p>
    </div>
  </div>
</template>

<style>
/* CSS样式保持不变 */
.padel-img {
  width: 90%;
  max-width: 1560px;
}

@media screen and (min-width: 640px) {
  .padel-img {
    height: unset;
    width: 80%;
  }
}
</style>

在优化后的代码中，即使CSS规则（如width: 90%; max-width: 1560px;和响应式调整）会改变图片的最终显示尺寸，浏览器也能通过width="1560"和height="480"这两个属性获得图片的原始宽高比（1560/480 = 3.25）。结合CSS定义的宽度，浏览器就能在图片加载前准确计算出所需的高度，并预留出相应的空间，从而彻底消除布局抖动。

注意事项与最佳实践

1. 尺寸准确性： width和height属性的值应尽可能反映图片的实际像素尺寸，而非其在页面上的显示尺寸。浏览器会利用这些原始尺寸来计算宽高比。
2. 响应式图片： 对于响应式图片，结合CSS max-width: 100%; height: auto; 使用，可以确保图片在不同屏幕尺寸下正确缩放，同时保持布局稳定。
3. loading="lazy"： 即使使用loading="lazy"属性进行图片懒加载以提升性能，也应同时提供width和height属性。懒加载可以延迟图片的下载，但尺寸属性仍然是避免CLS的关键。
4. srcset和sizes： 当使用srcset和sizes属性提供多张不同分辨率的图片时，<img>标签上的width和height属性应对应于其中一张（通常是默认或最大尺寸的）图片的原始尺寸，作为浏览器计算宽高比的参考。
5. 现代CSS aspect-ratio 属性： 现代CSS提供了aspect-ratio属性，可以直接在CSS中声明元素的宽高比，例如 aspect-ratio: 16 / 9;。这是一种更灵活的控制方式，但<img>标签上的width和height属性仍然是兼容性最好且最基础的解决方案，尤其是在不支持aspect-ratio的旧版浏览器中。

总结

为<img>标签明确指定width和height属性是前端开发中一项简单但极其重要的优化实践。它能够有效解决图片加载导致的布局抖动（CLS）问题，显著提升用户体验，改善页面的视觉稳定性，并对网站的SEO表现产生积极影响。无论是在传统网站还是基于Vue、React等框架构建的现代应用中，都应将此作为图片处理的基本规范。

以上就是前端图片加载优化：避免布局抖动（CLS）的实战指南的详细内容，更多请关注php中文网其它相关文章！