必须设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 中是无效的）。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 值应等于图片原始尺寸（即固有尺寸），比如一张 640×480 的图，就写
width="640" height="480" - 即使你后续用 CSS 把它缩放到 100% 宽度，HTML 属性仍要保留原始比例，否则浏览器无法推算
aspect-ratio - 如果只写其中一个（比如只写
width），浏览器不会自动按比例算出另一个，会默认高度为 0 或由 CSS 决定，起不到预留作用
CSS 里再控制显示尺寸，别让 HTML 属性直接缩放
width 和 height 属性的核心作用是「告诉浏览器图片的宽高比」，不是用来做响应式缩放的。真要适配不同屏幕，得靠 CSS：
- 推荐写法：
<img src="a.jpg" style="max-width:90%" style="max-width:90%" 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或留空，等于放弃预留，跟没写一样
width/height 属性，或者把它们转成 style，结果 HTML 层面根本没生效。检查最终渲染出的 HTML 源码，确认这两个属性真实存在且值是纯数字。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
