图片加载前页面很短，加载后文字突然下移，往往是没有提前保留布局空间。
本文使用HTML5、CSS 与当时浏览器可支持的布局能力，示例为局部页面。页面表现由文档结构、布局规则和浏览器环境共同决定。本文以可核对的 DOM（文档对象模型）和样式计算为起点，不使用后续才普及的布局属性。
1. 从现象推到机制
图片文件尺寸、元素布局尺寸与设备像素比不是同一个概念。给出合理宽高可以保留比例，响应式样式再限制可用宽度。把大图仅用 CSS 缩小，仍可能消耗完整下载流量。
图中的四个节点分别表示原始资源、布局比例、容器约束、加载观察。顺着实线检查输入如何变成输出，再沿虚线核对反馈条件。图示表达的是本文讨论的关系，不是实测曲线或现场截图。
2. 最小实现与输入条件
准备两张不同实际尺寸的演示图片，比较固定宽高、比例缩放与未声明尺寸的加载行为。alt 描述图中信息，不能只写图片文件名。
1
2
3
<img src="diagram.png" width="960" height="540"
alt="订单从创建到支付确认的状态关系"
style="max-width:100%;height:auto">
将片段放进带 UTF-8 声明和 viewport 设置的演示页。使用开发者工具检查实际盒尺寸、计算样式与请求；多浏览器或移动端结论需要在相应环境重新验证。
3. 用对照区分原因
下表列出需要主动改变的条件。预期行为来自机制分析，复现时还需记录运行环境和原始输出，不能将预期当作已经测得的结果。
| 改变的条件 | 需要验证的行为 |
|---|---|
| 图片尚未下载完成 | 已知宽高有助保留布局空间 |
| 容器变窄 | 图片应按比例缩放而非拉伸 |
| 原图很大但显示很小 | 流量不一定随显示尺寸下降 |
对照 1：图片尚未下载完成
已知宽高有助保留布局空间。观察时记录加载前后元素几何位置。把这个条件与基准情形分开，有助于判断变化来自哪一层；若得到相反结果，应先核对前提，再修改实现。
对照 2：容器变窄
图片应按比例缩放而非拉伸。观察时记录计算宽高与原图比例。把这个条件与基准情形分开，有助于判断变化来自哪一层；若得到相反结果，应先核对前提，再修改实现。
对照 3：原图很大但显示很小
流量不一定随显示尺寸下降。观察时记录真实下载字节数。把这个条件与基准情形分开，有助于判断变化来自哪一层；若得到相反结果，应先核对前提，再修改实现。
4. 适用条件与取舍
响应式资源选择要结合目标浏览器验证。技术示意图适合清晰矢量或无损图，照片则按内容和体积选择，不应统一套最大分辨率。
一次正常运行只覆盖了这组输入。继续扩展前，应把上面的异常对照保留下来，尤其关注“原图很大但显示很小”这一分支。后续方案若改变了图中任意一处依赖，原来的判断就要重新验证，不能仅凭界面相似或返回值相同沿用结论。
