要点：占位图是尺寸精确的灰色（或彩色）虚拟图形，在你设计时替代真实照片。它真正的价值在于尽早预留正确的空间，使布局在最终素材到位前后表现一致——不重排、无意外。本文讲何时使用、导出哪种格式，以及如何避免布局偏移。
在搭布局前先等最终摄影，是本末倒置。占位图让你先定尺寸，再放入真实图片，而布局不会突然发生位移。
预留空间，而非只是填充
占位图最宝贵之处，是占住真实图片将使用的确切宽高。若布局围绕没有预留尺寸的图片搭建，放入最终素材会让一切跳动——文字重排、按钮移位，在网页上表现为累积布局偏移（CLS）。从一开始就用尺寸正确的占位图设计，最终替换改变的是图片，而非位置。
匹配真实尺寸与比例
占位图只有与最终素材匹配才有用。设定最终图片的实际像素尺寸与宽高比——16:9 的头图、1:1 的头像、4:3 的缩略图——让样机贴近现实。给每个占位图标注其尺寸（许多生成器会印在图上），便于评审时发现不匹配。
高清与高 DPI
在高密度屏幕上，图片所需的物理像素多于其布局尺寸。以 2×、3× 或 4× 导出占位图，可测试真实素材在高清屏上的表现，并确认你已为最终版本所需的更大文件做好规划。
导出哪种格式
- PNG / WebP——用于屏幕样机与原型。
- SVG——与分辨率无关、体积极小，尺寸仍不确定时最理想。
- Base64 / Data URI——把占位图直接嵌入 HTML 或 CSS，便于无外部文件的自包含原型。
一个实用流程
- 列出布局所需的图片位及其真实尺寸。
- 在占位图生成器中生成——用批量模式一次产出所有尺寸。
- 放入设计，确认改变视口大小时无任何跳动。
- 逐一换入真实素材；因空间已预留，布局保持不动。
若还需虚拟文本填充这些图片周围的内容，可搭配Lorem Ipsum 生成器，让整个样机以真实密度呈现。
需要避免的常见错误
- 用错误比例的占位图，导致真实图片被意外裁切。
- 不预留图片尺寸，最终素材到位时造成布局偏移。
- 忽视高清缩放，低估文件大小。
- 因从未替换，把占位图发到生产环境。