占位图生成器

创建最大 4000×4000 的任意尺寸占位图，自定义颜色和文字。可下载 PNG、JPEG、WebP 或 SVG，也可复制 data URI，无需外部服务。

宽度（px）

高度（px）

背景色

文字颜色

文字

留空则显示尺寸。

格式化

什么是占位图生成器？

制作简单的占位图，显示图片尺寸（如 640×360）或你自己的文字，尺寸可在 1 到 4000 像素之间任意设定。选择背景和文字颜色，并导出为 PNG、JPEG、WebP 或 SVG。图片在本地绘制，因此你无需依赖占位图网络服务。

如何使用占位图生成器

输入以像素为单位的 宽度（px） 和 高度（px）。
选择 背景色 和 文字颜色，并输入文字，留空则显示尺寸。
选择格式。
下载图片，或复制 SVG 代码 / data URI。

示例

输入

Width 300, Height 150, Background #cccccc, Text color #555555, Format SVG

输出

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150"><rect width="100%" height="100%" fill="#cccccc"/><text x="50%" y="50%" fill="#555555" font-family="Arial, Helvetica, sans-serif" font-size="30" text-anchor="middle" dominant-baseline="central">300×150</text></svg>

何时使用占位图生成器

适合线框图、设计原型、测试响应式布局和图片组件，以及为 CMS 或电商演示填充数据。想要逼真的预览，请使用真实照片或图库照片；想要模糊的加载占位图，请使用实际图片的低分辨率版本。

占位图生成器的工作原理

对于 PNG、JPEG 和 WebP，图片绘制在指定大小的 HTML canvas 上：一个填充矩形加上用 Arial 居中的文字，字号为较短边的五分之一（文字较长时会缩小以便放下），然后通过 canvas.toDataURL 导出。对于 SVG，工具会写出一个很小的矢量文件，包含一个 <rect> 和一个居中的 <text> 元素，在任何缩放比例下都保持清晰，通常不到 400 字节。