占位图生成器，免费

工作原理

1. 设置尺寸：输入占位图的宽度和高度（像素）。
2. 自定义外观：选择背景色、文字颜色和要显示的标签（留空则显示尺寸）。
3. 使用或下载：复制图片的 URL 以在 HTML/CSS 中使用，或直接下载 PNG 用于您的设计稿。

为什么使用占位图生成器？

在网页开发和设计稿制作过程中，常常需要在真实内容准备好之前使用图片。占位图在布局中占据空间以显示比例、测试响应式行为，并向客户传达设计意图。与搜索图库照片或手动制作空白图片相比，此工具可即时生成具有所需尺寸和颜色的图片。

功能特性

• 自定义尺寸：任意宽度和高度（像素）· 方形、纵向、横向或横幅格式。
• 颜色自定义：通过 hex 代码或取色器设置背景和文字颜色。
• 自定义标签文字：在图片上显示任意文字，或默认显示尺寸标签（如 400×300）。
• 即时 URL：获取可直接粘贴到 src 属性进行测试的 data URI。
• PNG 下载：将占位图下载为 PNG 文件，以用于您的设计工具。

常见问题

可以在 HTML 的 src 属性中使用吗？

可以。生成的图片以 data URI 形式提供，您可以直接粘贴到 HTML 的 <img src=""> 属性中。无需托管或外部 URL。

占位图有哪些常见尺寸？

常见尺寸：主视觉图（1200×630）、文章缩略图（400×300）、头像（100×100）、Open Graph 图片（1200×628）和横幅广告（728×90）。可按需输入任意自定义尺寸。

如何在 CSS 中使用占位图？

复制 data URI 并作为 CSS 背景：background-image: url("data:image/png;base64,…")。在所有现代浏览器中都可使用，无需外部文件。

占位图服务简史

占位图服务起源于 2010年,当时网页设计师需要一种快速填充模型图(早于最终素材到来之前)的方法。placehold.it 由 Dave Reilly 在 2010 年推出,是首个被广泛使用的服务:在任何 <img> 标签中粘贴一个 URL,例如 placehold.it/300x200,就能得到一个灰色矩形。placekitten.com 同年跟进,用随机小猫代替矩形,而 dummyimage.com(Russell Heimlich,2010)增加了颜色自定义。各种异想天开的变体不断涌现:fillmurray.com(Bill Murray 的照片,2013)、placebeard.it(胡须,2014)、placecage.com(Nicolas Cage)。严肃的继任者稍晚到来:Lorem Pixel(约 2017 年停运)和 David Marby 的 Lorem Picsum(2018),后者以任意尺寸提供来自 Unsplash 的随机照片。约在 2014年,Facebook 让「骨架屏」模式流行起来:在内容即将加载的位置显示灰色形状。到 2019年,Wolt 发布了 BlurHash,这是一个 20 字节的字符串,可解码为真实图像的低分辨率模糊占位图。如今,ThumbHash(Evan Wallace,2023)和原生 CSS 属性 aspect-ratio(Chrome 88,2021 年 1 月)让你完全无需外部服务即可预留图像空间。

值得记住的标准图像尺寸

• Open Graph(1200×630)。由 Facebook 的 Open Graph 协议定义的链接预览标准尺寸。LinkedIn、Slack、Discord、Twitter(未设置 Twitter Card 时)都会回退到此尺寸。宽高比 1.91:1。
• Twitter Card summary_large_image(1200×675)。16:9 比例,用于信息流预览。你常看到引用的 1200×628 是旧标准,已于 2023年被 1200×675 取代。
• Instagram(1080×1080 方形、1080×1350 竖版、1080×1920 故事)。宽度超过 1080 的内容会被下采样。故事比例为 9:16。
• YouTube 缩略图(1280×720)。16:9。YouTube 自动从视频帧生成这些缩略图;上传的自定义缩略图必须小于 2 MB。
• IAB 广告尺寸。互动广告局(Interactive Advertising Bureau)标准化了横幅尺寸:728×90(排行榜)、300×250(中等矩形,全球购买量最大的尺寸)、300×600(半页)、160×600(宽摩天大楼)、320×50 和 320×100(移动端)。
• Favicon。16×16 和 32×32 用于浏览器标签页,180×180 用于 Apple Touch 图标,192×192 和 512×512 用于 Android 的 manifest.json,PWA 安装提示最低 512×512。
• 邮件标题(600×200)。大多数邮件客户端将渲染宽度上限设为 600 px。超过会被压缩,或在 Outlook 桌面版出现滚动条。

占位图与核心网页指标

Google 的核心网页指标(Core Web Vitals)(2020 年 5 月推出)衡量用户体验,并影响搜索排名。三项指标中有两项直接取决于你处理图像的方式。CLS(累积布局偏移)惩罚页面加载时跳动的内容。最常见原因:<img> 没有明确的 width 和 height 属性,导致浏览器在图像下载完毕前无法预留任何空间。得分高于 0.1 即未达标。修复方法很简单:始终设置 width 和 height,即使是响应式图像,这样浏览器才能计算宽高比。LCP(最大内容渲染)衡量最大可见元素加载完成的时间。对大多数页面来说,这个元素就是 Hero 图。任何超过 2.5 秒的都不达标。策略:提供现代格式(WebP、AVIF)、对首屏下方图像使用 loading="lazy"(Chrome 76,2019 年 8 月)、对 Hero 使用 fetchpriority="high"。占位图在视觉上填补空白:骨架屏处理布局,BlurHash 或 ThumbHash 提供实际图像调色板的即时预览。

图像格式决策指南

• PNG(1996)。无损,支持透明,无专利问题。最适合 logo、图标、截图、有锐利边缘的图形。索引颜色 PNG-8(256 色)比 RGB PNG-24 小得多,对 UI 图标通常无视觉损失。
• JPEG(1992)。有损,不支持透明,为摄影优化。质量 75-85 是网页的甜蜜点;视觉上与质量 95 难以区分,但只有一半大小。避免对有锐利边缘的内容(文字、logo)使用 JPEG:会出现可见的振铃伪影。
• WebP(Google,2010)。同等视觉质量下比 JPEG 小 25-35%,无损模式下也比 PNG 小。支持透明、动画、有损与无损模式。浏览器支持:截至 2024 年达 97%。新站点的默认选择。
• AVIF(开放媒体联盟,2019)。基于 AV1 视频编解码器。比 JPEG 小约 50%,比 WebP 小 20%。编码 CPU 成本更高。浏览器支持:截至 2024 年约 93%,旧版 Safari 不支持。请在 <picture> 回退后使用。
• SVG。矢量。无限缩放无质量损失。SVG 中的 logo 通常 500 字节,而 512×512 PNG 则需 10 KB。HTML 内联 SVG 完全避免了一次额外的 HTTP 请求。不要用于摄影图像。
• Data URI。data:image/png;base64,... 将图像字节直接嵌入 HTML 或 CSS。以约 33%(base64 开销)膨胀周围文件为代价,节省了一次 HTTP 请求。对极小的占位图缩略图值得,对 Hero 图绝不可用。

占位图实际用于何处

• 线框图与模型图。Figma、Sketch、Adobe XD、Penpot 都支持拖放占位图。在艺术指导到位之前,设计师勾勒布局,使用灰色矩形或尺寸文字作为视觉占位。
• 骨架屏。Twitter、Facebook、YouTube、LinkedIn 都在内容加载时显示灰色块状占位。Luke Wroblewski(2013)的研究表明,骨架屏让感知加载时间比转圈加载器快多达 20%。
• 设计系统故事。Storybook、Histoire 和 Ladle 渲染需要替代图像的组件预览。一套一致的占位图让截图在 CI 构建间可复现。
• 邮件模型图。Litmus、Email on Acid、Mailchimp 模板构建器。邮件客户端的图像支持差异巨大(Outlook 桌面、Gmail Web、iOS Mail),所以设计师在切换到生产素材前先用占位图测试。
• 印刷打样。书籍排版、杂志页面和包装设计在排版期间使用 FPO(「for position only」)占位图。尺寸早在摄影师交付之前就存在于排版中。
• 教程与文档。当你写「如何构建卡片组件」时,你需要不会因源更改而崩溃的替代图像。当外部服务停运时(如 Lorem Pixel),自托管的占位图能够存活。
• A/B 测试与原型。用三种不同图像尺寸快速测试布局,使用生成的占位图比重新渲染真实素材更快。

损害页面性能的错误

• 忘记 width 和 height 属性。CLS 得分差的最常见原因。即使使用 CSS 驱动的响应式图像,也要设置固有的 width 和 height,让浏览器预留正确的宽高比。自 2020 起,现代浏览器自动根据这些属性计算 aspect-ratio: width/height。
• 为 200×200 显示提供 4096×4096 占位图。字节数翻二十倍,毫无视觉收益。让占位图尺寸匹配实际渲染尺寸,或使用 srcset 提供多个变体。
• 空的或缺失的 alt 文本。屏幕阅读器只会无上下文地宣告「图像」。对于纯装饰的占位图,显式使用 alt="" 来表示「跳过这个」。对于内容图像,即使在占位图上也写描述,这样 QA 才能发现缺失的文案。
• 内联大型 Data URI。100 KB 的图像作为 base64 会变成 ~133 KB 嵌入你的 HTML 中,阻塞解析,并破坏缓存(HTML 通常不会被激进缓存,图像会)。仅对 ~2-4 KB 以下的 data URI 使用。
• 在生产中依赖 placehold.it / lorempixel / 外部服务。它们会宕机。Lorem Pixel 约在 2017 年消失,导致数千个演示站点崩溃。对于教程、演示和故事,自行生成占位图或自托管它们。
• 用 PNG 装摄影、用 JPEG 装 logo。同一张照片,PNG 比 JPEG 大 3-5 倍。JPEG 装 logo 会在边缘出现难看的压缩振铃。按内容类型选择格式,不要凭习惯。
• 跳过 loading="lazy"。首屏下方急切加载的图像会与 Hero 争夺带宽。对视口以下的所有内容添加 loading="lazy"。原生支持,无需库,Chrome 76(2019 年 8 月)和 Safari 15.4(2022)起即支持。

更多常见问题

为什么占位图上的尺寸标签如此有用?

当布局中有十几个不同尺寸的占位图时,标签立刻告诉你哪个槽位是哪个。灰色矩形上的「400×300」比猜卡片是 4:3 还是 16:9 信息更多。评审模型图的设计师和开发人员能从房间的另一头发现尺寸错误的元素。

BlurHash、ThumbHash 和 LQIP 有什么区别?

三者都将图像的微小预览编码,以解码为模糊占位图。LQIP(「低质量图像占位符」)只是一个小 JPEG(~100 字节到 2 KB)。BlurHash(Wolt,2019)将任何图像编码为 20-30 字符的 ASCII 字符串,存储在数据库中;解码时间为微秒级。ThumbHash(Evan Wallace,2023)类似,但相同质量下小 30-50%,并且边缘渲染更锐利。现代框架(Next.js、Astro、Hugo)都内置支持 BlurHash。

占位图缩略图应该用 SVG 还是 PNG?

如果占位图是简单形状(矩形、图标、几何图案),用 SVG。50 字节的内联 SVG 每次都胜过 2 KB 的 PNG。如果需要像素精确的文本渲染或特定字体回退,用 PNG:SVG 文本渲染在浏览器和平台间差异较大。对于客户端生成的动态占位图,此工具生产 PNG,因为 Canvas 文本渲染在浏览器间可预测。

生成的 PNG 是否包含 EXIF 或隐藏元数据?

不。HTML canvas toBlob() 或 toDataURL() API 生成的 PNG 仅包含 IHDR、IDAT 和 IEND 块,加上某些浏览器中的最小 tEXt 块。没有 GPS,没有相机信息,没有编辑历史,没有用户标识符。与手机相机的 JPEG 形成对比,后者会泄漏 GPS 坐标和设备序列号。

我在这里生成图像时,任何东西会发送到服务器吗?

不会。图像通过 HTML5 Canvas 2D API 在你的浏览器中本地绘制。生成时打开 DevTools 的 Network 标签:为该图像的零出站请求。对机密模型图、NDA、客户工作和未发布的产品设计来说是安全的。