本教程旨在解决web页面中图片加载时常见的布局抖动（cls）问题。通过详细讲解为``标签添加`width`和`height`属性的重要性，文章阐述了如何预留图片空间，从而在图片加载完成前稳定页面布局。内容涵盖了基本实现、响应式处理及现代css方案，旨在提升用户体验和页面性能。
引言：理解图片加载与布局抖动 (CLS)
在现代Web开发中，用户体验和页面性能是至关重要的指标。其中，布局抖动（Cumulative Layout Shift, CLS）是Google Core Web Vitals中的一项关键指标，它衡量了页面内容在加载过程中非预期地移动的程度。当用户访问一个页面时，如果图片、广告或其他动态内容在加载完成后才占据其最终空间，就会导致页面上的文本和其他元素发生位移，从而破坏用户的阅读流畅性，甚至可能导致用户误点击。这种现象不仅损害了用户体验，也可能对网站的搜索引擎排名产生负面影响。
图片是导致CLS的常见元凶之一。当浏览器渲染页面时，如果<img>标签没有明确指定其尺寸（宽度和高度），浏览器在图片文件实际下载并解析完成之前，无法得知图片将占据多少空间。这会导致浏览器最初为图片分配一个零高度或默认高度，待图片加载完毕后，再根据其实际尺寸重新计算并调整布局，从而引发明显的布局抖动。
核心解决方案：为<img>标签指定尺寸
解决图片加载引起的布局抖动最直接且有效的方法是为<img>标签明确添加width和height属性。这两个属性会向浏览器提供图片固有的宽度和高度信息，即使图片尚未加载完成，浏览器也能根据这些信息预留出相应的空间。
当浏览器知道图片的尺寸后，它会在渲染页面时为图片元素分配一个占位符空间。这个占位符会保持其固定的宽高比，确保图片加载前后，其在页面上的位置和大小不会发生突变，从而彻底消除因图片加载而导致的布局抖动。
需要注意的是，width和height属性应反映图片的固有尺寸（intrinsic dimensions），即图片文件本身的像素宽度和高度，而非其在页面上最终的显示尺寸。CSS可以随后调整图片的显示尺寸，但width和height属性提供的宽高比是浏览器预留空间的基础。
实践指南：如何应用尺寸属性
以下将通过一个Vue组件中的图片示例，演示如何为<img>标签添加尺寸属性，并结合响应式设计进行优化。
原始代码示例
考虑以下Vue组件中的<img>标签：
<template>
<div class="bg-white border">
<div class="pt-24">
<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>
<!-- ... 其他内容 ... -->
</div>
</template>
<style>
.padel-img {
width: 90%;
max-width: 1560px;
}
@media screen and (min-width: 640px) {
.padel-img {
height: unset; /* 在小屏幕上可能导致高度不确定 */
width: 80%;
}
}
</style>在这个例子中，<img>标签通过CSS类h-48和padel-img设置了其显示尺寸，但没有直接在标签上指定width和height属性。这正是导致布局抖动的根本原因。
添加尺寸属性
假设about-hero.jpg这张图片的固有尺寸是1920x1080像素。我们应该将这些尺寸添加到<img>标签上：
<template>
<div class="bg-white border">
<div class="pt-24">
<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="1920" <!-- 添加图片的固有宽度 -->
height="1080" <!-- 添加图片的固有高度 -->
/>
</div>
<!-- ... 其他内容 ... -->
</div>
<!-- ... 其他内容 ... -->
</div>
</template>
<style>
.padel-img {
width: 90%;
max-width: 1560px;
height: auto; /* 确保高度按比例自动调整 */
}
@media screen and (min-width: 640px) {
.padel-img {
height: auto; /* 确保高度按比例自动调整，而非 unset */
width: 80%;
}
}
</style>关键改动说明：
- width="1920" 和 height="1080": 这两个属性告诉浏览器图片文件的原始尺寸。浏览器会根据这个宽高比（1920/1080 ≈ 1.777）预留空间。
- height: auto;: 在CSS中，为了确保图片在响应式布局下能够正确地根据其宽度按比例缩放，通常会将height设置为auto。这样，浏览器会根据width属性和CSS定义的宽度（如width: 90%;）以及图片固有的宽高比来计算实际显示的高度。height: unset在某些情况下可能表现不一致，height: auto是更稳健的选择。
通过上述修改，即使图片尚未加载完成，浏览器也会根据width="1920"和height="1080"这两个属性预留一个16:9比例的占位符，从而避免了布局抖动。当图片加载完成后，CSS定义的样式（如width: 90%; max-width: 1560px;）将控制图片的最终显示尺寸，但布局的稳定性已经得到了保障。
进阶优化与现代CSS实践
除了直接在<img>标签上指定width和height属性外，还有一些现代CSS技术和最佳实践可以进一步优化图片加载和布局稳定性。
使用 aspect-ratio CSS 属性
CSS的aspect-ratio属性提供了一种更灵活、更现代的方式来定义元素的宽高比，特别适用于那些没有固有尺寸（如<iframe>）或需要动态调整宽高比的场景。
.padel-img {
width: 90%;
max-width: 1560px;
height: auto;
aspect-ratio: 16 / 9; /* 显式设置宽高比，例如16:9 */
}当<img>标签同时拥有width和height属性时，aspect-ratio属性会作为一种补充或覆盖机制。如果CSS中设置了width: 100%; height: auto;，并且aspect-ratio也被定义，那么aspect-ratio将优先于由固有尺寸推断出的宽高比来计算高度，尤其是在图片加载前。这对于控制图片占位符的精确比例非常有用。
占位符技术
为了进一步提升用户体验，可以在图片加载前显示视觉占位符：
- 骨架屏（Skeleton Loader）: 显示一个灰色或动画的矩形，模拟图片最终的形状，告知用户内容即将出现。
- 模糊加载（Blur-up Technique）: 先加载一个极低质量的图片版本，然后逐步加载高质量版本，平滑过渡。
- 背景色占位符: 使用图片的平均颜色作为背景，减少视觉突兀感。
这些技术通常与width/height属性或aspect-ratio结合使用，以确保占位符本身也遵循正确的尺寸和比例，从而避免额外的布局抖动。
其他图片优化建议
- 图片格式: 使用现代图片格式（如WebP、AVIF），它们提供更好的压缩率和质量。
- 图片压缩: 对图片进行适当压缩，减少文件大小，加快加载速度。
- 响应式图片（srcset和sizes）: 使用srcset和sizes属性为不同设备和屏幕分辨率提供不同尺寸的图片，确保浏览器加载最合适的图片。
- 延迟加载（Lazy Loading）: 对不在视口内的图片使用loading="lazy"属性，延迟加载直到用户滚动到它们附近，减少初始页面加载时间。值得注意的是，即使是延迟加载的图片，也应指定width和height属性以避免在加载时发生布局抖动。
总结
避免图片加载导致的布局抖动是优化Web性能和提升用户体验的关键一环。通过在<img>标签上明确指定width和height属性，开发者可以有效地预留图片空间，防止页面内容在图片加载时发生位移。结合CSS的height: auto;进行响应式处理，并考虑使用现代aspect-ratio属性，可以构建出既稳定又美观的Web界面。养成在所有图片上指定尺寸的习惯，是每个Web开发者都应遵循的最佳实践。
