占位图生成器
生成任意尺寸的占位图，可保存为 SVG、PNG，或复制成可直接粘贴的 data URI。
占位图生成器完全在你的浏览器中运行：SVG 在本机生成与栅格化，不会上传任何内容。
打开 Open Graph 生成器
关于 占位图生成器
占位图服务会在你还在设计的版式中间插入一次网络请求，而满页都是这种图片时，页面会变慢、离线不可用，还得指望第三方一直在线。把同样的灰色方块在本地生成，就彻底去掉了这层依赖：结果是一段 SVG，你可以保存、转成 PNG，或者作为完全不发请求的 data URI 粘贴进去。尺寸覆盖真正会用到的那些——社交卡片、广告位、头像、大图横幅——而标签默认显示尺寸，这正是调试栅格时最想看到的信息。
功能特性
- 任意宽高，并提供社交、广告与通用尺寸预设
- 自定义背景与文字颜色，默认取可读配色
- 标签显示尺寸，也可以写自己的文字
- 圆角，以及线框图里常见的对角交叉线
- 保存为 SVG，或按原始像素栅格化为 PNG
- 离线可用且不消耗请求的 data URI
如何使用 占位图生成器
- 填写宽高，或直接选择一个预设
- 选择颜色与标签，也可以保留默认的尺寸文字
- 复制 data URI，或下载 SVG 与 PNG
- 把 HTML、CSS 或 JSX 代码片段粘贴进版式
示例
输入
1200 × 630 · #e5e7eb background
输出
<img src="data:image/svg+xml,%3Csvg…" width="1200" height="630" alt="" />
以 data URI 形式呈现的 Open Graph 卡片占位图：没有请求、不会宕机，离线也一模一样。
常见错误与故障排除
- data URI 把样式表弄坏了。 — 在 url() 里用双引号包起来，这里给出的 CSS 片段已经这样处理。
- PNG 在高清屏上发虚。 — 按显示尺寸的两倍生成，它会严格按你填写的像素数栅格化。
常见问题
- 怎样生成指定尺寸的占位图？
- 在上方填入宽高即可立即生成。可以保存成 SVG 或 PNG，也可以复制 data URI。
- 为什么用 data URI 而不是占位图服务？
- 它省掉每张图一次请求，离线可用，也不会因为外部服务宕机或限流而失效。
- 占位图该用 SVG 还是 PNG？
- 屏幕上用 SVG：只有几百字节且任意尺寸都清晰。当某个工具必须要位图时再用 PNG。
- Open Graph 图片该多大？
- 1200 × 630 像素，也是这里的预设：Facebook、LinkedIn 与多数预览都按这个比例裁切。
相关工具
全部 ArrayKit 工具