# 占位图生成器教程：自定义尺寸颜色文字一键生成

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/placeholder-image-guide

## 工具简介：占位图生成器能做什么？

做设计稿、搭页面原型、写接口文档时，经常需要一张指定尺寸的临时图片占位。工具派「占位图生成器」可以按自定义宽度、高度、背景色、文字色和文字内容生成占位图片，内置 300×250、728×90、公众号封面、小红书、Instagram、Facebook、Twitter/X、YouTube 封面、1920×1080、1080×1920 等 12 种常用尺寸预设，支持 PNG、JPEG、WEBP、SVG 四种格式下载，也能复制 Data URL 直接嵌进 HTML/Markdown，全程浏览器本地生成。

## 第一步：选择尺寸或预设

打开工具页后，可以直接点「常用尺寸」里的预设按钮（如"小红书"自动填入 1242×1660），也可以在「宽度 (px)」「高度 (px)」输入框自定义尺寸。背景色和文字色支持颜色选择器和十六进制输入两种方式，默认浅灰底深灰字。

![选择尺寸或预设](/api/file/download?path=article/202607/1783822338279_8889.png)

## 第二步：设置文字与样式

在「文字内容」输入框填写要显示的文字（留空则自动显示尺寸，如"300 × 250"）。可以调整字体（8 种可选）、字体大小（滑块或数字输入，单位是图片实际像素）和圆角。右侧预览区实时更新，下方显示预估文件大小。注意：大尺寸图片配默认 24px 字体会显得很小，把字体大小调到 100 以上才清晰可见。

![设置文字与样式](/api/file/download?path=article/202607/1783822342958_8326.png)

## 参数说明

| 参数 | 类型 | 说明 |
| --- | --- | --- |
| 常用尺寸 | 按钮组 | 12 个预设：广告位/公众号/小红书/Instagram/Facebook/Twitter/YouTube/常用分辨率 |
| 宽度 / 高度 | 数字输入 | 单位 px，默认 300×250 |
| 背景色 / 文字色 | 颜色选择器 | 支持取色器和十六进制文本输入 |
| 文字内容 | 文本输入 | 留空时自动显示"宽 × 高" |
| 字体 | 下拉 | sans-serif/serif/monospace/Arial/Helvetica/Georgia/微软雅黑/苹方 |
| 圆角 | 数字输入 | 单位 px，默认 0 |
| 字体大小 | 滑块+数字 | 单位 px（图片实际像素），默认 24 |
| 输出格式 | 单选 | PNG（默认）/ JPEG / WEBP / SVG |

## 第三步：下载或复制Data URL

确认预览效果后，点「下载 PNG」保存图片文件（文件名自动带尺寸，如 placeholder-1242x1660.png）；前端开发时点「复制 Data URL」可得到 base64 内联图片字符串，直接粘贴到 img 标签或 CSS 里使用，无需额外文件。实测下载的 1242×1660 PNG 与预览完全一致。

![下载或复制Data URL](/api/file/download?path=article/202607/1783822347812_223.png)

## 常见问题

- 预览里看不到文字？字体大小是图片实际像素，大图（如 1242 宽）要把字体调到 100 以上。
- SVG 格式有什么用？矢量格式，放大不失真，适合继续在设计软件里编辑。
- Data URL 太长怎么办？图片越大 Data URL 越长，复杂场景建议直接下载文件引用。
- 生成的图片有版权限制吗？没有，纯本地生成的纯色占位图，可自由使用。

## 总结与相关工具

占位图生成器适合设计原型、页面开发、文档演示等场景：选尺寸 → 设文字样式 → 下载或复制，三步搞定。相关工具推荐：[SVG 转 PNG](/tools/svg_to_png)、[图片压缩](/tools/image_compress)、[批量图片编辑器](/tools/image_batch_edit)、[二维码生成器](/tools/qrcode_generator)。立即使用工具派占位图生成器，原型设计快人一步！