必须设width和height属性才能预留空间，因为浏览器需依据其像素值（如width="640"）提前获知图像固有尺寸与宽高比，从而在加载前分配准确空间，避免CLS布局偏移；若缺失或填写非像素值（如百分比、带单位字符串），则无法实现有效预留。

为什么必须设 width 和 height 属性才能预留空间

浏览器在解析 HTML 时，如果 <img> 标签没有 width 和 height 属性，就完全不知道这张图该占多大位置。它会先画一个“高度为 0”的占位框，等图片加载完成、尺寸确定后，再重绘布局——这会导致内容突然下移，也就是常说的 CLS（Cumulative Layout Shift），影响用户体验和 Lighthouse 评分。

width 和 height 的值怎么填才有效

这两个属性必须填**像素值（如 width="320"）**，不能填百分比或带单位的字符串（比如 width="100%" 或 width="320px" 在 HTML5 中是无效的）。

• 值应等于图片原始尺寸（即固有尺寸），比如一张 640×480 的图，就写 width="640" height="480"
• 即使你后续用 CSS 把它缩放到 100% 宽度，HTML 属性仍要保留原始比例，否则浏览器无法推算 aspect-ratio
• 如果只写其中一个（比如只写 width），浏览器不会自动按比例算出另一个，会默认高度为 0 或由 CSS 决定，起不到预留作用

CSS 里再控制显示尺寸，别让 HTML 属性直接缩放

width 和 height 属性的核心作用是「告诉浏览器图片的宽高比」，不是用来做响应式缩放的。真要适配不同屏幕，得靠 CSS：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 推荐写法：<img src="a.jpg" width="640" height="480" alt=""> + img { width: 100%; height: auto; }
• 这样浏览器加载前就知道：这个 <img> 是 4:3 的，宽度占满容器时，高度会自动按比例计算
• 绝对不要只靠 HTML 属性缩图，比如 width="100" height="100" 去压一张 2000×1500 的图——用户仍得下载完整大图，白耗流量

没拿到原始尺寸时怎么办

后端接口没返回宽高、CMS 上传图不带元数据、或者图是动态生成的——这时没法填准确值，但也不能空着：

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

• 保守做法：预估一个常见比例，比如头像用 width="1" height="1" + aspect-ratio: 1/1，文章配图用 aspect-ratio: 16/9
• 更稳妥的是加占位元素或骨架屏，至少让用户知道“这里会有一张图”，而不是空白跳动
• 注意：width 和 height 都设成 0 或留空，等于放弃预留，跟没写一样

实际最容易被忽略的一点：很多构建工具或 CMS 会自动 strip 掉 width/height 属性，或者把它们转成 style，结果 HTML 层面根本没生效。检查最终渲染出的 HTML 源码，确认这两个属性真实存在且值是纯数字。