支持 1×1 到 4000×4000 像素,并内置卡片、横幅、社交与设备尺寸的一键预设。
在浏览器里生成占位图
占位图生成器
用自定义颜色、样式和文字,在任意尺寸下生成占位图。实时预览,下载 PNG/JPG/WebP/SVG,或复制 Next BConvert、Lorem Picsum、Placehold.co、DummyImage 的热链 URL 与现成代码片段。
为原型、线框图和前端开发生成占位图
用纯色、渐变或棋盘格背景以及自定义颜色和文字,生成单边最大 4000px 的占位图。预览实时更新,你可以下载 PNG、JPG、WebP 或 SVG 文件,或复制 Next BConvert、Lorem Picsum、Placehold.co、DummyImage 的热链 URL 与现成代码。
如何生成占位图
- 1.输入像素宽高,或选择 Avatar、Card、Hero、Twitter Card、YouTube 缩略图等预设。
- 2.选择纯色、渐变或棋盘格背景,设置颜色,并可选输入自定义文字——留空会自动显示尺寸。
- 3.每次改动预览都会实时更新。无需上传,图片在本地 canvas 上绘制。
- 4.将占位图下载为 PNG、JPG、WebP 或 SVG,或复制 Next BConvert、Lorem Picsum、Placehold.co、DummyImage 的热链 URL 与现成的 HTML、Markdown、JSX、CSS、BBCode 片段。
- 5.点击 Retina 1×/2×/3×,为高 DPI 屏幕下载同一占位图的三份副本,用于 srcset。
支持的占位图功能
可选纯色、双色渐变或棋盘格背景,背景与文字颜色可独立设置。
canvas 预览随每次输入实时重绘,下载或复制前就能看到准确结果。
可下载为 PNG、JPG、WebP 或 SVG,也可将图片复制为 base64 data URL。
用四种服务生成与设置尺寸一致的热链 URL:Next BConvert 从你自己的域名提供,Lorem Picsum 返回随机真实照片,Placehold.co 与 DummyImage 提供外部纯色占位图。
复制携带精确尺寸的现成 HTML、Markdown、JSX、CSS 或 BBCode 片段。
一切都在浏览器中完成。你的尺寸、颜色和文字不会离开设备。
占位图生成器常见问题
可以生成哪些尺寸?
单边从 1×1 到 4000×4000 像素均可。用宽高字段输入精确尺寸,或选择 Avatar(200×200)、Card(400×300)、Hero 16:9(1920×1080)、Twitter Card(1200×630)、Instagram(1080×1080)等预设。
宽高比锁定有什么用?
开启锁定宽高比后,宽高比例保持固定:修改一边,另一边会按比例同步更新。需要同一裁剪的响应式尺寸集合(比如用于 srcset 的 1×、2×、3×)时很有用。
有哪些背景样式可用?
纯色用单一颜色填充图片。渐变将背景色与次色沿对角线混合。棋盘格绘制双色棋盘图案,有助于预览透明背景在叠加设计中的呈现效果。
可以在占位图上添加自定义文字吗?
可以。输入最多 80 个字符,文字会居中绘制,并自动缩小以适配占位图宽度。留空则显示尺寸(例如 600 × 400)。
可以下载哪些格式?
PNG 保留透明,JPG 与 WebP 更适合网页使用且文件更小,SVG 在任意显示尺寸下都保持清晰。你也可以把图片复制为 base64 data URL,直接粘贴进 HTML 或 CSS。
Retina 1×/2×/3× 按钮是做什么的?
它会把当前占位图按 1×、2×、3× 三个比例各下载一份 PNG,文件名形如 placeholder-600x400.png 与 placeholder-600x400@2x.png,可直接用于高 DPI 屏幕的 srcset 属性。
Next BConvert、Lorem Picsum、Placehold.co 和 DummyImage 有什么区别?
Next BConvert 通过 nextbconvert.com 的 /api/placeholder 端点提供服务,与预览完全一致且停留在你自己的域名上。Lorem Picsum 按请求尺寸返回随机真实照片,适合写实 mockup。Placehold.co 与 DummyImage 提供中央印有尺寸文字的外部纯色矩形,适合线框图。按图片实际使用场景选择即可。
我的占位图数据会被上传吗?
不会。图片完全在浏览器内用 canvas 绘制,没有上传步骤,你的尺寸、颜色和文字不会发送到任何服务器。