占位图生成器

按尺寸、背景色、文字生成占位图片,网页设计、原型图、开发调试都能用,支持下载 PNG。

什么是在线占位图生成器?

占位图(Placeholder Image)是在真实图片尚未就绪时,临时占据图片位置的占位内容。网页设计师做视觉稿、前端工程师调试布局、产品经理画原型图时,都经常需要「任意尺寸、任意颜色」的占位图片来模拟最终效果。本工具支持自定义宽度、高度、背景色、文字颜色和显示文字,输入参数后即可在浏览器本地生成占位图并下载为 PNG 文件。

与第三方占位图服务相比,本工具有三个明显优势:一是完全本地生成,图片不经过任何服务器,也不需要联网等待;二是颜色、文字完全自定义,可以配合品牌色生成风格统一的占位图;三是无数量限制、无水印,可以批量生成不同尺寸的占位图用于响应式布局测试。

占位图默认显示「宽度 × 高度」的文字,方便开发时直接核对图片尺寸;也可以输入自定义文字,例如图片的用途说明或业务名称。

使用步骤

  1. 输入占位图的宽度和高度(像素);
  2. 选择背景色与文字颜色,勾选或取消「显示尺寸文字」;
  3. 如需自定义文案,在「占位文字」中输入内容;
  4. 点击「生成占位图」预览,确认后点击「下载 PNG」保存图片。

常见问题

占位图有什么用?
占位图用于在页面设计、原型图或开发阶段临时替代真实图片,让布局和效果提前可见。等正式图片就绪后直接替换即可,避免页面「空窗」影响预览体验。
最大支持多大尺寸?
理论上支持任意正整数尺寸,考虑到浏览器内存限制,建议长边不超过 4000 像素。超过该范围可能因内存不足导致生成失败,可按需缩小尺寸。
生成的是透明背景吗?
默认背景为浅灰色。需要透明背景时,可点击背景色输入框右下角的取色按钮,将透明度(Alpha)调为 0,即可生成带透明通道的 PNG 占位图。
下载的图片是什么格式?
下载为 PNG 格式,支持透明通道且无损,适合作为占位图使用。图片完全由浏览器本地生成,不会上传任何数据。