占位图生成 - 图片工具 · 萤炬工具箱

占位图生成按你填的尺寸、背景色、文字与文字颜色画出一张占位图，支持导出 PNG、WebP 或 SVG，改参数实时刷新预览。用于前端开发时先把布局撑起来、做设计稿演示时填充图片位、或在文档里示意某处应该放图。文字通常写上尺寸本身，一眼就知道这个位置该放多大的图。可设尺寸、背景色、占位文字与文字颜色。输出格式：PNG、W…

占位图生成按你填的尺寸、背景色、文字与文字颜色画出一张占位图，支持导出 PNG、WebP 或 SVG，改参数实时刷新预览。用于前端开发时先把布局撑起来、做设计稿演示时填充图片位、或在文档里示意某处应该放图。文字通常写上尺寸本身，一眼就知道这个位置该放多大的图。

使用步骤

1. 填写宽度与高度（像素）。
2. 设置背景色、占位文字与文字颜色。
3. 选择输出格式：PNG、WebP 或 SVG。
4. 实时预览确认后下载。

功能与限制

• 可设尺寸、背景色、占位文字与文字颜色。
• 输出格式：PNG、WebP、SVG。
• 本地生成，不依赖第三方占位图服务。

常见问题

占位图该选 SVG 还是 PNG / WebP？

前端开发首选 SVG：体积通常只有几百字节，任意缩放不失真，还能直接内联进 HTML 或 CSS。只有在确实需要一个真实位图文件（上传测试、图片组件必须要 PNG）时才用 PNG 或 WebP。

占位文字写什么比较实用？

最常见是直接写尺寸（如 800 × 600），方便对照布局是否正确。也可以写用途说明（「产品主图」「头像」）让设计稿更好读。

和用在线占位图服务有什么区别？

这里生成的是本地文件，不依赖第三方域名。用远程占位图服务的话，服务挂了或被墙，你的页面就是一堆破图。