在图片标签中指定 width 与 height 的原因
在创建网页时，最常用的标签之一就是 <img>。然而，仍然经常看到仅指定 src 而忽略尺寸信息的情况。
这会导致页面在加载时出现布局抖动，影响用户体验和性能指标。本文从技术角度探讨为何在 <img> 标签中指定 width 与 height 至关重要，以及它带来的实际收益。
1. 渲染性能与页面加载速度
1-1. 确保布局稳定性（Stable Layout）
浏览器在解析 HTML 时会尽快渲染页面。若无法获知图片尺寸，浏览器无法预先计算该元素占据的空间。
结果是，图片加载时会推挤已有内容，产生用户未预料的 布局抖动（Layout Shift）。
<img src="photo.jpg">
在此情况下，图片加载前被视为无高度的元素，加载后才反映真实高度，导致页面重新布局。
1-2. 降低 Cumulative Layout Shift (CLS)
CLS 是 Google Core Web Vitals 的一项指标，用于量化页面加载过程中意外的布局移动。
为图片指定 width 与 height，浏览器即可在图片加载前计算出准确的宽高比（aspect ratio），预留所需空间。
CLS 标准
- CLS ≤ 0.1：良好
- CLS ≥ 0.25：需改进
明确尺寸是降低 CLS 的最直接、最有效方法之一。
1-3. 对网络带宽的准确理解
这里有一个常见误解：
指定
width与height并不会减少下载的图片文件大小。
- 浏览器仍会完整下载原始图片。
width/height仅为布局计算提供信息。
真正的网络带宽节省来自：
- 使用
srcset/sizes - 服务器端图片重尺寸
<picture>元素
但尺寸明确后，渲染过程更稳定，用户感知的加载速度和视觉完整度显著提升。
2. 可访问性（Accessibility）方面的优势
2-1. 可预测的阅读流
可访问性的核心是 alt 属性，但布局稳定性也起到辅助作用。
尺寸明确后，页面结构更可预测，屏幕阅读器在读取时不会出现突兀的内容流变动，提升体验。
width与height本身并非可访问性必需，但布局稳定性间接提升可访问性。
2-2. 移动端布局可预测性
移动端屏幕有限，任何细微的布局变化都会被放大感知。
若未指定尺寸，可能出现：
- 加载时内容被挤压
- 放大/缩小时元素间距骤变
明确图片比例可降低此类不稳定性。
3. SEO（搜索引擎优化）视角
搜索引擎高度重视页面的 加载性能与用户体验。
- 低 CLS 页面
- 初始渲染稳定
这些特性会被搜索引擎视为 高质量页面，提升排名。
同时，清晰的图片结构有助于搜索引擎更好地理解页面，并在图片搜索结果中获得正面影响。
4. 实际代码示例
4-1. 未指定尺寸（问题案例）
<img src="https://example.com/photo.jpg" alt="Beautiful scenery">
4-2. 指定尺寸（推荐案例）
<img
src="https://example.com/photo.jpg"
alt="Beautiful scenery"
width="800"
height="600">
注意事项
width与height以像素为单位。- 在响应式布局中，通常配合以下 CSS 使用。
img {
max-width: 100%;
height: auto;
}
5. 实战技巧汇总
| 场景 | 推荐做法 |
|---|---|
| 静态图片 | 明确 width 与 height |
| 响应式图片 | width/height + max-width: 100%; height: auto; |
| 动态图片 | 服务器根据元数据插入尺寸 |
| SVG | 用 viewBox 定义比例，必要时加 width/height |
6. 结论
- 确保布局稳定 → 降低 CLS → 改善用户体验
- 提升渲染可预测性 → 提升感知性能
- 提供 SEO 正面信号
在图片标签中指定 width 与 height 不仅是代码风格，更是提升 网页性能与 UX 的基本原则。只要养成在添加图片时使用这两个属性的习惯，网页整体质量就会显著提升。
前端工程师 们可以参考以下相关文章：
目前没有评论。