一键生成占位图,尺寸 / 颜色 / 文字 / PNG / JPG / WebP 全搞定。
- 本地处理
- 分类 图片
- 适合 发布前把图片尺寸、格式或体积调到合适范围。
这个工具能做什么
100% 浏览器本地运行的占位图(placeholder)生成器,给设计师、 程序员、营销人随手要"先有个图填上"的场景用。宽高在 50 到 4000 像素之间任选,自定义背景色和前景色,自定义文字 标签(默认自动显示像素尺寸,比如 "1920×1080"),导出 PNG / JPG / WebP 三种格式之一。预览画布随调随更新,没有 接口请求,没有上传,完全本地渲染。点击顶部的"标准尺寸" 一键生成 5 个最常用的版本:Hero 1920×1080、Open Graph 卡片 1200×630、应用图标 512×512、移动端竖屏 750×1334、Instagram 正方形 1080×1080,一次性覆盖一个新 Next.js 项目、一份 Figma 设计稿、一份营销 brief 在拿到真图之前需要的所有占位。 所有字节都不出你的浏览器标签页,只有你主动点"下载"时, 文件才落到本地磁盘。
工具细节
- 输入
- 文件 + 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 下载 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 18 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 图片 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
占位图生成器 适合怎么用
适合在网站、店铺、社媒、表单上传或素材交付前处理图片。
适合处理的图片任务
- 发布前把图片尺寸、格式或体积调到合适范围。
- 分享照片前检查 EXIF、GPS 和其他隐藏元数据。
- 不上传私有素材,也能生成可发布的图片变体。
图片检查项
- 先按真实展示尺寸改图,再压缩。
- 转格式后检查透明度、动画和色彩配置是否变化。
- 图片可能含隐私时,先检查或清理元数据。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
真图没到位时先把 OG 卡片填上
周一要上线落地页,设计师的 Hero 图周四才给。你先生成一张 1200×630 的占位图,套上品牌色(比如 #38BDF8 底配 #0F172A 文字),标注「OG draft」,把 PNG 塞进 meta 标签。这样发到 微信、Slack、Twitter 的预览图看着是有意为之,不是裂开的 空白,等真图来了换一个文件就行。
给 Figma 帧栈批量铺上精确像素尺寸
设计师做一个 12 屏的移动端流程,每一帧都得有图,免得评审 老问「这屏是故意空的吗」。你生成 5 张 750×1334 的占位图, 各自标上「引导页 1」「引导页 2」,贴进去,整套原型立刻 读起来是认真做过的。每张图自带尺寸文字,没人会把 9:16 的竖屏看成 16:9 的横屏。
用混合宽高比压测响应式网格
前端同学在调一个 CSS grid,想看看卡片在 512×512、 1920×1080、750×1334 三种图同时存在时怎么换行。几秒钟生成 三张占位图丢进网格,在真照片到位之前就能看出布局在哪里 崩。不用担心 Lorem Picsum 限流,也不怕演示时 CDN 抽风。
做离线 demo,扛得住会场死掉的 WiFi
你在一个网络很烂的场地演示原型。远端占位图 URL 一断网就 全变灰框。改成把本地 PNG 打进构建里:每张图都是磁盘上的 真文件,不管你有 100 Mbps 还是断网,demo 看着都一模一样。 整套图生成一次提交进仓库,以后再不用为会场网络提心吊胆。
常见踩坑
前景色和背景色挑得太接近(比如
给带清晰文字边缘的占位图导 JPG,JPG 的压缩噪点会把文字糊掉。带文字标签的图一律用 PNG 或 WebP,JPG 只留给纯照片填充。
只需要一张 600px 的卡片预览,却生成 4000×4000 的 PNG,再纳闷文件怎么有 4 MB。像素尺寸要对着实际占位的槽位来配,浏览器只会把图缩小显示,不会帮你省掉多出来的字节。
隐私说明
所有处理都在你的浏览器标签页里完成。宽高、颜色、你输入的任何 自定义文字,都画在本地的 `<canvas>` 元素上,通过 blob 直接下载, 没有一个字节发到服务器,也不会进到页面 URL 里(除非你主动去 分享链接)。页面加载完之后零网络请求,涉密的项目名、内部品牌 色值、NDA 设计稿标签全都留在你自己的机器上。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。