占位图片是在最终媒体准备好之前，用来占住设计、网站、应用界面或 CMS 布局中图片位置的临时图片。它能保留尺寸、间距和视觉层级，让页面在没有破损图片区域的情况下也可以被审查。
自定义占位图片生成器
使用这个占位图生成器为原型、线框图、应用界面、文章卡片和产品布局创建占位图片。使用流程很直接：设置准确的宽度和高度，选择背景色和文字颜色，添加自定义标签或自动显示尺寸，然后下载 PNG、JPG、WebP 或 SVG 文件。所有内容都在浏览器中生成，因此无需上传，也无需注册。
这个占位图生成器能做什么
这个工具会根据尺寸和样式设置创建静态占位图片。当最终摄影图、插画、产品图或 CMS 媒体还没准备好时，它可以帮你先放入一个接近真实图片区域的占位框。
| 设置项 | 可控制内容 | 实际用途 |
|---|---|---|
| 尺寸 | 从 1x1 到 4000x4000 px 的任意宽度和高度 | 匹配卡片、横幅、首屏区域、缩略图和移动端界面 |
| 颜色 | 背景颜色和文字颜色 | 创建浅色、深色、品牌色或中性灰色占位图 |
| 文字 | 自动尺寸或自定义标签 | 显示 "1200 x 630"、"头像"、"产品图片" 或任意简短备注 |
| 字号 | 自动字号或手动设置 8-200 px | 让小缩略图和大型原型中的标签都保持可读 |
| 格式 | PNG、JPG、WebP 或 SVG | 真实布局使用位图，或为可缩放设计占位图选择 SVG |
| 质量 | JPG/WebP 可选 70%、80%、90% 或 100% | 当占位图不需要像素级质量时减少文件大小 |
默认输出是一张简洁的虚拟图片，尺寸会显示在中央。这样设计师、开发者和内容团队都能快速看出哪个素材还需要替换。
如何逐步生成占位图片
1
第 1 步：输入准确的图片尺寸
输入你需要的宽度和高度。常见尺寸包括用于 Open Graph 预览的 1200x630、用于方形社交帖的 1080x1080、用于视频缩略图的 1280x720、用于广告矩形的 300x250，以及用于移动端界面原型的 375x667。如果你要替换现有图片，请使用相同像素尺寸，这样之后布局不会发生偏移。
2
第 2 步：选择背景和文字颜色
线框图可以使用中性灰，设计评审可以使用品牌色，测试深色模式时可以使用深色背景。请确保文字和背景之间有足够对比度，这样标签在截图和设计文件中仍然清晰可读。
3
第 3 步：决定标签文字
关闭自定义文字时会自动显示尺寸。需要显示 "首屏图"、"头像"、"产品照片"、"文章缩略图" 或 "应用截图" 这类标签时，可以开启自定义文字。简短标签效果最好，因为它们在小尺寸下也更容易辨认。
4
第 4 步：选择输出格式
需要稳定默认格式时使用 PNG，文件大小比清晰文字更重要时使用 JPG，现代网页测试使用 WebP，需要可缩放占位图片时使用 SVG。对于 JPG 和 WebP，90% 质量通常是不错的平衡；如果只需要轻量虚拟图片，可以降到 70% 或 80%。
5
第 5 步：生成并下载
点击生成按钮后，文件会直接下载。文件名包含尺寸，例如 `placeholder_1200x630.png`，因此在项目文件夹中也容易识别。
适用于应用、头像和布局的占位图片
每个占位图都应该清楚表达自己的用途。早期线框图中使用普通灰色矩形没有问题，但更具体的虚拟图片能帮助团队审查真实布局，而不用猜测每个空位代表什么。
| 占位图类型 | 建议尺寸 | 建议标签 | 适用场景 |
|---|---|---|---|
| 应用占位图片 | 375x667 或 768x1024 | 应用界面 | 手机和平板原型 |
| 头像占位图片 | 300x300 或 512x512 | 头像 | 头像和账户布局 |
| 文章占位图片 | 1200x630 或 800x450 | 文章图片 | 博客卡片和 CMS 预览 |
| 虚拟产品图片 | 800x800 或 1200x1200 | 产品图片 | 电商网格和产品页面 |
| 虚拟方形图片 | 1080x1080 | 方形图片 | 社交帖子和平衡卡片布局 |
| 竖版占位图片 | 1080x1920 | 故事图片 | 适合故事内容和竖版媒体槽位的竖向占位图片布局 |
如果占位图会放进设计工具，选择 SVG 可以保持清晰缩放。如果它会进入线上预发布站点，请选择最终素材管线预期使用的同一格式，这样图片加载、布局间距和压缩表现会更接近生产环境。
深色占位图片和其他样式建议
当你测试深色模式或图片密集的界面卡片时，深色占位图很有用。如果设计任务需要深色占位图变体，或需要适合仪表盘的深色占位图片，重点是对比度，而不是纯黑；占位图仍然应该清楚传达尺寸和用途。
可以参考这些简单规则：
- 深色界面可以从 `#1f2937` 左右的背景色和 `#9ca3af` 左右的文字色开始。
- 浅色界面可以从 `#e5e7eb` 左右的背景色和 `#6b7280` 左右的文字色开始。
- 品牌原型可以使用弱化后的品牌色，避免占位图看起来像最终成品图。
- 小型头像或图标占位图应保持自定义文字简短，或直接使用自动尺寸。
- 首屏图或横幅占位图中，如果自动标签在演示截图里看起来太小，可以手动设置字号。
当占位图出现在原型中时，它应该看起来是临时的，但仍然有设计意图。目标是保护间距、宽高比和内容层级，而不是假装最终图片已经完成。
如何选择合适的占位图片格式
最佳格式取决于占位图会用在哪里。
| 格式 | 最适合 | 说明 |
|---|---|---|
| PNG | 界面原型、截图、设计评审 | 文字清晰，浏览器支持稳定 |
| JPG | 更看重小文件体积的大型布局块 | 不支持透明；较低质量下文字边缘可能变软 |
| WebP | 现代网页预发布和性能测试 | 很多情况下比 PNG 文件更小 |
| SVG | 可缩放线框图和设计系统 | 文字和形状在任意尺寸下都保持清晰 |
这个占位图生成器不会创建动画占位 GIF。如果你需要加载动画，可以用这里生成的占位图片表示静态图片区域，再在 CSS 或前端框架中处理加载转圈或骨架屏状态。
它如何在浏览器中工作
PNG、JPG 和 WebP 版本通过浏览器 Canvas API 创建。SVG 版本则生成包含矩形和居中文字的矢量标记。不会上传任何图片；占位图完全由你的设置创建。
这有三个好处：
- 重复创建虚拟图片时速度很快，因为工作都在浏览器本地完成。
- 最终文件是确定性的：相同的尺寸、颜色、文字和格式会产生相同的视觉结果。
- 私有项目标签会留在你的设备上，而不是发送到服务器。
这个工具是可视化生成器，不是公开的占位图片 API 端点。如果你的流程需要基于 URL 的占位图，可以用此页面下载可复用素材，或搭配你自己的静态文件托管使用。
常见问题
输入宽度和高度，选择背景和文字颜色，决定显示尺寸还是自定义文字，选择 PNG、JPG、WebP 或 SVG，然后生成文件。占位图片会直接下载到你的设备。
占位图生成器是一种通过尺寸、颜色、标签和格式等简单设置创建虚拟图片的工具。这个工具基于浏览器运行，适合快速原型、预发布布局、界面审查和设计交接文件。
可以。选择深色背景和较浅的文字颜色即可。例如，`#1f2937` 这样的背景配 `#9ca3af` 这样的文字，很适合深色模式界面卡片、应用界面和仪表盘。
可以。输入你需要的屏幕或组件尺寸，例如手机原型用 375x667，平板布局用 768x1024。使用 "应用界面" 或 "截图" 这样的标签，可以让设计评审中的占位图更清楚。
可以。使用 300x300、512x512 或 1080x1080 这样的方形尺寸。添加 "个人资料" 或 "头像" 这样的简短标签，然后根据项目需要导出为 PNG、WebP 或 SVG。
可以。这个工具很适合用作网站卡片、产品模块、文章缩略图、头像位置和线框图的虚拟图片创建器。为了获得最清晰的效果，请按用途标注每张虚拟图片，而不是到处使用同一个通用文件。
这个页面不提供公开的占位图片 API 或动态 URL 语法。它会在浏览器中创建可下载的占位图片。如果你需要类似 API 的行为，可以在这里生成文件，然后托管到你的项目、CDN 或设计系统素材库中。
安全默认选择 PNG，现代网页测试选择 WebP，大型低优先级占位图选择 JPG，需要可缩放矢量输出时选择 SVG。如果占位图之后会被 JPG 产品图替换，用 JPG 测试可以更接近最终文件表现。
你可以生成从 1x1 px 到 4000x4000 px 的自定义占位图片。超大文件适合首屏区域或高分辨率原型，但对于普通网页布局测试，请匹配最终图片实际会使用的尺寸。