和 placeholder.com、dummyimage 这类在线服务有什么区别？

那些服务通过链接实时返回图片，服务一旦下线或被墙，页面上的占位图就全部失效。这里生成的是真实文件或 Data URI，可以直接放进项目里，离线也能用。

Data URI 该选什么格式？

推荐 SVG：几百字节就能描述任意尺寸的图片，写在 CSS 或 HTML 里非常短。PNG、JPG 的 Data URI 是 Base64 编码的位图，大尺寸时会有几十 KB。

批量生成怎么写？

在批量框中每行写一个尺寸，例如 300x250，也可以用 × 或 * 分隔；尺寸后面空一格可以写这张图的文字，如“728x90 顶部横幅”。所有图片使用上方设置的颜色、字体和格式，打包为一个 ZIP。

为什么 SVG 和 PNG 里的字体看起来略有不同？

SVG 中的文字由查看它的设备渲染，使用的是系统字体栈；PNG 在你的浏览器里渲染后固定成像素。两者布局一致，只是字体可能因设备不同而略有差别。

⬜

⬜占位图生成器 - 在线生成任意尺寸占位图片，PNG / SVG / Data URI

做网页原型、排版设计稿、测试图片上传或给广告位预留位置时，经常需要一张“300×250”这样标好尺寸的占位图。输入宽和高（最大 8000 像素），选背景色与文字颜色，文字默认显示“宽×高”，也可以换成任意文案（支持中文），并可以在下方附上尺寸副标题、加一圈描边。字号会根据画面自动缩放到合适大小，也可以手动指定。内置常用尺寸：横幅广告（728×90、300×250、160×600 等）、社交媒体（Open Graph 1200×630、Instagram 1080×1080、Story 1080×1920、YouTube 封面、公众号封面）、头像图标和常见屏幕分辨率。可以下载 PNG、JPG、WebP 或 SVG，复制 SVG 代码，或者生成 Data URI 直接写进 HTML、CSS 或 Markdown；SVG 格式的 Data URI 只有几百字节。需要一套尺寸时，在批量框里每行写一个尺寸（可附文字），一键打包成 ZIP 下载。全部在浏览器本地生成，不依赖任何在线占位图服务。

免费 · 无需注册 · 浏览器本地处理最后更新：2026-10-26

正在加载工具...

如何使用占位图生成

1输入宽高或点选常用尺寸，设置背景色、文字颜色和文字
2选择导出格式 PNG / JPG / WebP / SVG
3下载图片、复制 SVG 代码或 Data URI，或在批量框中列出多个尺寸打包下载

常见问题

和 placeholder.com、dummyimage 这类在线服务有什么区别？: 那些服务通过链接实时返回图片，服务一旦下线或被墙，页面上的占位图就全部失效。这里生成的是真实文件或 Data URI，可以直接放进项目里，离线也能用。
Data URI 该选什么格式？: 推荐 SVG：几百字节就能描述任意尺寸的图片，写在 CSS 或 HTML 里非常短。PNG、JPG 的 Data URI 是 Base64 编码的位图，大尺寸时会有几十 KB。
批量生成怎么写？: 在批量框中每行写一个尺寸，例如 300x250，也可以用 × 或 * 分隔；尺寸后面空一格可以写这张图的文字，如“728x90 顶部横幅”。所有图片使用上方设置的颜色、字体和格式，打包为一个 ZIP。
为什么 SVG 和 PNG 里的字体看起来略有不同？: SVG 中的文字由查看它的设备渲染，使用的是系统字体栈；PNG 在你的浏览器里渲染后固定成像素。两者布局一致，只是字体可能因设备不同而略有差别。