占位图片生成器(示例图片制作工具)
只需设置宽度、高度、背景色和文字颜色,即可在浏览器内生成示例图片并下载为PNG。图片不会发送到服务器。
常用示例图片尺寸一览
| 尺寸 | 主要用途 |
|---|---|
| 300×200 | 小型横幅或广告位占位图 |
| 800×600 | 博客文章插图或线框图的临时图片 |
| 1200×630 | Facebook、X(推特)分享卡片用的OGP图片 |
| 1080×1080 | Instagram等社交平台的正方形帖子 |
| 1920×1080 | 全高清主视觉图或幻灯片背景 |
| 640×360 | 16:9视频缩略图或卡片式UI缩略图 |
什么是占位图
占位图是在正式的照片或插画尚未备妥的阶段,用以先行填住该处的临时图像。它不过是在所指定尺寸的纯色矩形上叠写该尺寸数字之类的简单之物,用于验证版式或制作原型。正因其内容并无意义,才能把目光只放在配置与留白上,而非图像的内容。
本工具在指定宽、高、背景色与文字色后,会当场绘出预览并可保存为 PNG。叠加文字为选填,若留空则会自动填入「宽×高」的数值,故并排比较多种尺寸时可一眼分辨。颜色既可用取色器选取,也支持直接输入十六进制代码,可精确契合设计稿的配色。生成全部在浏览器内进行,图像不会被送往服务器。
占位图的制作方法
- 决定尺寸 以 px 输入宽与高。按下 300×200、800×600、1200×630(OGP)、1080×1080 的预设即可一次填入。
- 选择颜色 指定背景色与文字色。除取色器外,也可直接填入十六进制的色彩代码。
- 需要时填入文字 叠加文字为选填。留空则会自动显示「宽×高」,就此使用亦无不可。
- 以预览确认 每次更改设定都会重绘。请在此查看文字是否被背景淹没。
- 下载 PNG 按「下载 PNG」即保存至本地。文件仅在您的设备内生成,不会送往任何地方。
用好本工具的小技巧
- 使用"1200×630(OGP)"预设,可立即获得在Facebook、X(推特)分享卡片中不会被裁剪的标准尺寸图片。
- 将叠加文字留空时会自动显示"宽×高"数值,方便在比较多个线框图时一眼分辨尺寸。
- 背景色和文字颜色既可以用取色器选择,也可以直接输入十六进制颜色代码,方便精确匹配设计稿配色。
- 生成的图片仅下载到本地设备,绝不会上传或保存到本站服务器。
与占位图相关的术语
- 占位符(placeholder)
- 指在本应放入之物备妥之前,先行占住该处的临时元素。除图像外,文章的暂置则使用 Lorem Ipsum。
- 原型(mockup)
- 指为确认完成后外观而制作的、不可操作的样本。即便实际素材尚未齐备,也可据以判断配置与留白。
- OGP 图像
- 指页面在社交平台被分享时作为卡片显示的图像。1200×630 为广泛采用的尺寸,依此制作则边缘不易被裁切。
- 十六进制色彩代码
- 指以 #RRGGBB 的形式表示颜色的写法,以两位数(00〜FF)分别表示红、绿、蓝的强度。
- 像素(px)
- 指构成图像的最小单位。本工具的宽与高即以此单位指定。
- PNG
- 指无劣化的无损压缩图像格式。仅由单色背景与文字构成的图像与此格式颇为相合,文件也小。
常见问题
当网站或应用的设计稿、线框图中还没有准备好正式的照片或插图时,可以用它作为临时的"占位图"填充。这样可以在正式素材完成之前先确认布局、进行编码工作。
不会。该工具完全使用
Facebook、X(推特)等主流社交平台推荐使用1200×630px(宽高比约为1.91:1)。尺寸过小会显得画质粗糙,比例不同则可能在展示时被意外裁剪。
本工具支持1px至4000px范围内的尺寸。由于不同浏览器对
闲话 ― 占位图片的文化
在网页制作领域,早已形成了在正式照片或插图准备好之前使用占位图片作为"临时替代"的文化。这与印刷行业中用来代替未完成文案的"lorem ipsum"填充文字是同一种思路,只是应用到了图片上。
2014年推出的"Lorem Picsum"服务,作为随机提供真实照片的占位图片服务被广泛使用。只需在网址中指定宽度和高度即可返回一张照片,这种便捷性使其被众多设计稿和教程采用。不过,依赖外部服务也意味着在离线环境或对保密性要求较高的项目中不太方便使用。
这款工具没有依赖此类外部服务,而是采用了仅凭浏览器