占位图片生成器(示例图片制作工具)

只需设置宽度、高度、背景色和文字颜色,即可在浏览器内生成示例图片并下载为PNG。图片不会发送到服务器。

常用示例图片尺寸一览

尺寸 主要用途
300×200 小型横幅或广告位占位图
800×600 博客文章插图或线框图的临时图片
1200×630 Facebook、X(推特)分享卡片用的OGP图片
1080×1080 Instagram等社交平台的正方形帖子
1920×1080 全高清主视觉图或幻灯片背景
640×360 16:9视频缩略图或卡片式UI缩略图

什么是占位图

占位图是在正式的照片或插画尚未备妥的阶段,用以先行填住该处的临时图像。它不过是在所指定尺寸的纯色矩形上叠写该尺寸数字之类的简单之物,用于验证版式或制作原型。正因其内容并无意义,才能把目光只放在配置与留白上,而非图像的内容。

本工具在指定宽、高、背景色与文字色后,会当场绘出预览并可保存为 PNG。叠加文字为选填,若留空则会自动填入「宽×高」的数值,故并排比较多种尺寸时可一眼分辨。颜色既可用取色器选取,也支持直接输入十六进制代码,可精确契合设计稿的配色。生成全部在浏览器内进行,图像不会被送往服务器。

占位图的制作方法

  1. 决定尺寸 以 px 输入宽与高。按下 300×200、800×600、1200×630(OGP)、1080×1080 的预设即可一次填入。
  2. 选择颜色 指定背景色与文字色。除取色器外,也可直接填入十六进制的色彩代码。
  3. 需要时填入文字 叠加文字为选填。留空则会自动显示「宽×高」,就此使用亦无不可。
  4. 以预览确认 每次更改设定都会重绘。请在此查看文字是否被背景淹没。
  5. 下载 PNG 按「下载 PNG」即保存至本地。文件仅在您的设备内生成,不会送往任何地方。

用好本工具的小技巧

  • 使用"1200×630(OGP)"预设,可立即获得在Facebook、X(推特)分享卡片中不会被裁剪的标准尺寸图片。
  • 将叠加文字留空时会自动显示"宽×高"数值,方便在比较多个线框图时一眼分辨尺寸。
  • 背景色和文字颜色既可以用取色器选择,也可以直接输入十六进制颜色代码,方便精确匹配设计稿配色。
  • 生成的图片仅下载到本地设备,绝不会上传或保存到本站服务器。

占位图的应用场景

搭建线框图与原型

即便照片尚未定案,只要放上与预定尺寸相同的方块,便可先行推进版式的验证。因尺寸就写在图上,比对时也不会张冠李戴。

先行占住 OGP 图像的位置

1200×630 是在分享卡片中不被裁切显示的标准尺寸,可作为正式图像完成之前的暂置。

试验图像上传功能

因可立即备妥任意尺寸、任意文件大小的图像,适合用来确认投稿表单的上限或显示是否走样。

摸索配色

一边改变背景色与文字色一边排列,即可迅速确认明度差是否足以让文字可读。

想处理实际图像时

若要改变手边图像的尺寸请使用图片缩放;若只需切出所需部分请使用图片裁切。

与占位图相关的术语

占位符(placeholder)
指在本应放入之物备妥之前,先行占住该处的临时元素。除图像外,文章的暂置则使用 Lorem Ipsum。
原型(mockup)
指为确认完成后外观而制作的、不可操作的样本。即便实际素材尚未齐备,也可据以判断配置与留白。
OGP 图像
指页面在社交平台被分享时作为卡片显示的图像。1200×630 为广泛采用的尺寸,依此制作则边缘不易被裁切。
十六进制色彩代码
指以 #RRGGBB 的形式表示颜色的写法,以两位数(00〜FF)分别表示红、绿、蓝的强度。
像素(px)
指构成图像的最小单位。本工具的宽与高即以此单位指定。
PNG
指无劣化的无损压缩图像格式。仅由单色背景与文字构成的图像与此格式颇为相合,文件也小。

常见问题

当网站或应用的设计稿、线框图中还没有准备好正式的照片或插图时,可以用它作为临时的"占位图"填充。这样可以在正式素材完成之前先确认布局、进行编码工作。

不会。该工具完全使用元素在浏览器内完成绘制和PNG编码,图片数据不会上传到任何地方。点击下载按钮后会直接保存到你的设备上。

Facebook、X(推特)等主流社交平台推荐使用1200×630px(宽高比约为1.91:1)。尺寸过小会显得画质粗糙,比例不同则可能在展示时被意外裁剪。

本工具支持1px至4000px范围内的尺寸。由于不同浏览器对元素的实现存在各自的上限,建议避免使用数万像素见方等极端尺寸。
工具君

闲话 ― 占位图片的文化

在网页制作领域,早已形成了在正式照片或插图准备好之前使用占位图片作为"临时替代"的文化。这与印刷行业中用来代替未完成文案的"lorem ipsum"填充文字是同一种思路,只是应用到了图片上。

2014年推出的"Lorem Picsum"服务,作为随机提供真实照片的占位图片服务被广泛使用。只需在网址中指定宽度和高度即可返回一张照片,这种便捷性使其被众多设计稿和教程采用。不过,依赖外部服务也意味着在离线环境或对保密性要求较高的项目中不太方便使用。

这款工具没有依赖此类外部服务,而是采用了仅凭浏览器即可立即生成纯色背景加文字标签图片的方式。虽然不像照片那样逼真,但对于确认尺寸和宽高比、测试社交分享图片的排版等"只是想先要一张尺寸正确的图片"的场景来说已经完全够用。