本文旨在解决网页中图片加载时引发的布局抖动问题。通过为标签明确设置width和height属性，浏览器能在图片加载前预留所需空间，有效防止内容跳动，从而提升用户体验和页面性能指标，特别是累积布局偏移（cls）得分。
在现代网页开发中，用户体验和页面性能是至关重要的指标。其中，累积布局偏移（Cumulative Layout Shift, CLS）是衡量页面视觉稳定性的一项核心指标。当图片在加载过程中没有预留足够的空间时，会导致页面内容在图片加载完成后突然向下或向上移动，形成所谓的“布局抖动”，这严重影响用户体验，并可能导致用户误点击。
核心问题分析：图片未指定尺寸
布局抖动问题通常发生在图片元素未在HTML中明确指定其尺寸（宽度和高度）时。当浏览器首次渲染页面时，它会根据已有的文本内容和布局规则进行排列。如果图片尚未加载完成，浏览器就无法得知其最终尺寸，因此不会为其预留空间。一旦图片加载完成并被渲染，它会突然占据其所需的空间，从而“推开”周围的元素，导致页面布局发生意外的重排。
考虑以下Vue组件中的图片代码示例：
<img
class="block rounded-xl mx-auto h-48 my-12 padel-img"
:src="require('../assets/img/about-hero.jpg')"
alt="about image"
/>尽管这里使用了Tailwind CSS的h-48类来设置一个初始高度，并且有自定义的.padel-img样式来控制宽度，但在图片加载前，浏览器仍然无法完全确定其最终占据的矩形区域，尤其是在响应式布局中，宽度会根据视口动态调整，而高度则依赖于图片的原始宽高比。如果没有提供原始宽高比信息，浏览器就无法在图片加载前计算出正确的高度，从而导致布局抖动。
解决方案：为图片指定尺寸
解决布局抖动的最有效方法是为<img>标签直接添加width和height属性。这些属性应反映图片的原始（内在）尺寸。当浏览器解析HTML时，即使图片尚未开始下载，它也能根据这些属性计算出图片的宽高比，并为其预留一个基于该宽高比的占位符空间。
实施步骤：
- 获取图片原始尺寸： 找到about-hero.jpg这张图片的原始宽度和高度。假设这张图片的原始尺寸是1920像素宽，1080像素高。
- 添加到<img>标签： 将这些尺寸作为width和height属性添加到<img>标签上。
修改后的代码示例如下：
<img
class="block rounded-xl mx-auto h-48 my-12 padel-img"
:src="require('../assets/img/about-hero.jpg')"
alt="about image"
width="1920" <!-- 图片的原始宽度 -->
height="1080" <!-- 图片的原始高度 -->
/>工作原理：
当width和height属性被设置后，浏览器会执行以下操作：
- 计算宽高比： 浏览器利用width和height属性计算出图片的固有宽高比（例如，1920/1080 = 1.777...）。
- 预留空间： 即使图片还未加载，浏览器也会根据这个宽高比和CSS（例如width: 90%）设定的宽度，计算出相应的高度，从而预留一个正确的空间。
- 防止布局抖动： 这样，当图片最终加载完成并渲染时，它会填充已经预留好的空间，而不会导致周围内容的移动。
结合CSS和响应式设计
在现代响应式设计中，我们经常会使用CSS来调整图片的显示尺寸，例如width: 100%; height: auto;或使用Tailwind CSS的响应式类。当HTML中同时存在width和height属性以及CSS样式时，浏览器会智能地处理它们：
- HTML属性定义宽高比： width和height属性主要用于向浏览器传达图片的固有宽高比，以便在加载前预留空间。
- CSS控制实际渲染尺寸： CSS样式（如width: 90%; max-width: 1560px;和媒体查询中的width: 80%; height: unset;）会决定图片在不同视口下的实际渲染尺寸。浏览器会优先使用CSS定义的宽度，然后根据HTML属性提供的宽高比来计算实际渲染高度，从而确保图片在保持宽高比的同时适应布局。
例如，在您的CSS中：
.padel-img {
width: 90%;
max-width: 1560px;
}
@media screen and (min-width: 640px) {
.padel-img {
height: unset; /* 或 height: auto; */
width: 80%;
}
}即使height被设置为unset（或auto），只要<img>标签上存在width和height属性，浏览器就能知道图片的原始宽高比。当CSS将图片宽度设置为90%或80%时，浏览器会根据这个比例和原始宽高比来计算出相应的高度，从而在图片加载前就预留出正确的垂直空间。h-48这个Tailwind类在这种情况下可能会被CSS的height: auto或height: unset所覆盖，但关键是宽高比信息已经存在，布局抖动得以避免。
注意事项与最佳实践
- 始终指定尺寸： 对于所有可见的图片元素，都应在<img>标签中明确指定width和height属性。
- 使用loading="lazy"： 对于非首屏的图片，可以添加loading="lazy"属性，实现图片懒加载，进一步优化页面加载性能。
- 响应式图片： 对于复杂的响应式图片需求，可以结合使用srcset属性和<picture>元素，为不同设备和屏幕密度提供优化过的图片资源，但同样需要确保每个<img>标签都带有width和height属性。
- 图片优化： 确保图片文件本身经过压缩和优化，使用现代格式（如WebP），以减少文件大小，加快加载速度。
- 服务端渲染 (SSR) / 预渲染： 如果项目使用Vue.js进行服务端渲染或预渲染，确保在渲染HTML时，图片标签已经包含了width和height属性。
总结
通过简单地为<img>标签添加width和height属性，开发者可以有效地解决图片加载导致的布局抖动问题。这一实践不仅能显著提升页面的视觉稳定性，改善用户体验，也是优化Core Web Vitals中CLS指标的关键一步。在构建高性能和用户友好的网页时，这是一个不可或缺的最佳实践。
