接口图片还没好、设计稿要标尺寸、广告位要先看版式——这些时候都需要占位图（placeholder image）。很多人习惯直接用 placeholder.com/300x200 这类在线服务，但它有隐藏成本。本地生成 data URI 是更省心的另一条路。
占位图的几种做法
| 做法 | 代表 | 要联网 | 能带尺寸文字 | 适合 |
|---|---|---|---|---|
| 在线服务 | placeholder.com、dummyimage、picsum | 要 | 能 | 快速试、能联网 |
| 本地 data URI | 浏览器生成 SVG/PNG | 不要 | 能 | 离线、内网、不想依赖第三方 |
| 纯 CSS 块 | 背景色 / 渐变 | 不要 | 不能 | 只需撑位、不需标注 |
在线服务的隐藏成本
via.placeholder.com/300x200 这类服务的原理是：后端按 URL 参数动态画图返回。看着方便，但代价是：
- 依赖第三方可用性——对方限流、宕机或停服，你页面上的占位图就集体变成裂图。这类服务历史上发生过中断。
- 每张图一次外部请求——拖慢页面，内网或离线环境根本加载不出来。
- 信息泄露——请求里带着你正在开发的尺寸，甚至可能通过 referer 暴露未上线页面的地址。
对开发期占位来说，把命脉交给一个外部域名并不划算。
本地 data URI：自包含的一张图
换个思路：不去远程取图，而是在本地把图画好，输出成 data URI——这串字符本身就是完整的一张图片，浏览器直接解析，不发任何网络请求。于是上面三个问题全部消失：不联网、不怕第三方挂、不泄露页面信息。
在 HTML 和 CSS 里用 data URI
data URI 就是一个图片地址，哪里能放图片地址就能放它：
<img src="data:image/svg+xml,%3Csvg.../%3E" width="300" height="200">.box { background: url("data:image/svg+xml,%3Csvg.../%3E"); }浏览器看到 data: 开头就地解析，零网络请求。本工具能一键复制 data URI，或直接复制带好宽高属性的 <img> 标签。
SVG 占位图的编码坑
SVG 是文本，把它变成 data URI 有两种编码：
- base64：通用，但体积膨胀约 33%、不可读、不利于 gzip。
- URL 编码（百分号编码）：通常更小、可读、可被进一步压缩——SVG 占位图的推荐做法。
URL 编码的坑在于特殊字符必须转义：颜色值里的 #、标签的 < >、属性的 " 都要转义，尤其 # 不转义会被当成 URL 片段标识符，导致整张图渲染失败。手写很容易漏，用工具生成的 data URI 已经把这些转义处理好了。
用占位图消除布局抖动（CLS）
占位图最被低估的价值，是防止页面跳动。
图片在加载完成前若没有确定高度，元素高度是 0；图片一到，突然撑开，把下方内容猛地顶下去——这就是累积布局偏移（CLS），既影响体验也拖累 SEO 的 Core Web Vitals 得分。
解法是给占位预留和真图一致的尺寸：
- 给
<img>显式写上width/height； - 或用 CSS
aspect-ratio锁定宽高比。
位置在加载前就被占住，真图替换进来时严丝合缝、不再跳动。所以生成占位图时，让它的尺寸和将来真图一致，比配色文字更重要。
小结：开发和设计阶段，本地生成 SVG data URI 占位图，既不依赖第三方、不联网、不泄露信息，又能用固定尺寸顺手解决 CLS。本工具在浏览器本地生成，支持导出 SVG/PNG、一键复制 data URI 与 <img> 标签。记得——占位图终究是临时的，上线前替换成真实素材。