占位图生成器

生成任意尺寸、颜色和文字的纯色占位图 —— 适用于设计稿和原型。

工作台 · 中性环境

常用尺寸

尺寸（px）

背景 / 文字

自定义文字（留空则显示尺寸）

字号 px

功能特性

自定义宽高

自定义配色

自定义文字内容

下载 PNG / SVG

使用方法

1. 选择常用尺寸（OG 图、头像、高清等）或输入精确像素。

2. 设置背景色和文字色 —— 若占位图将出现在未知底色上，棋盘格底面能帮上忙。

3. 下载 PNG，或复制为 data URL 直接粘进 src 属性。

关于这个工具

搭建版面时，真实的图片往往还没准备好，而破图图标会让人很难判断间距。这个生成器按精确的像素尺寸生成纯色占位图，背景色和文字颜色可自选，图上标注尺寸或你自己的文字，让所有人都清楚最终素材需要多大。预设覆盖常见需求——1200 × 630 的 Open Graph 分享图、1600 × 900 的 Twitter 卡片、1080 × 1080 的方形帖子、1920 × 1080 高清、4:3、1500 × 500 横幅和 400 × 400 头像——也可以输入任意宽高。结果可以下载为 PNG，或复制为 data URL，直接粘贴到原型、邮件模板或测试数据的 img src 属性里。

常见问题

什么是 data URL，为什么要复制它？

data URL 把整张图片编码成以 data:image/png;base64 开头的文本。你可以直接把它粘贴到 <img src> 或 CSS 背景中，无需保存或托管文件，做快速原型时很方便。

占位图应该和最终尺寸一致吗？

应该。使用与最终完全相同的尺寸和比例，能提前发现布局跳动、裁切和文字换行问题，真实图片替换进来时就不会有意外。

Open Graph 图片应该多大？

1200 × 630 像素是 Facebook、LinkedIn 和许多聊天应用链接预览普遍推荐的尺寸。重要文字不要靠近边缘，因为有些平台会裁成正方形。

为什么选择棋盘格或中性色背景？

中性灰或棋盘格能明显看出这是占位图，也便于观察它放在未知背景上的效果，不容易被误认为是最终作品。

这些图片能用于正式网站吗？

它们是为设计稿和开发准备的。正式网站上留着占位图会显得没做完，搜索引擎也看不到有用的图片内容，所以上线前请换成真实图片并补上 alt 文本。

占位图生成器

功能特性

使用方法

关于这个工具

常见问题

相关工具