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

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

常用示例图片尺寸一览

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

使用提示

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

常见问题

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

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

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

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

闲话 ― 占位图片的文化

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

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

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