占位图怎么生成才不踩坑:设计稿和前端开发的临时图实战

做页面的时候有个很常见的卡点:布局已经搭好,真图却还在设计师手里,或者还在素材库里没下完。这时候硬等真图,整个页面就一直是空白框;随便找张图垫上,又容易忘记换,最后上线带着乱七八糟的临时素材。占位图(placeholder)就是为这个场景准备的:它不是最终素材,只是一块标好尺寸、颜色、文字的临时图,把页面的坑先填平,等真图就位再替换。

占位图到底解决什么问题

一张合格的占位图要回答三个问题:这个槽位多大、放进去之后视觉上协调不协调、以及它是不是临时的。前两个靠尺寸和颜色解决,第三个靠文字标签解决。把宽高、底色、文字这三样定死,页面就能在没有真图的情况下读起来是认真做过的,而不是裂开的半成品。

我自己最常用的方式是按宽高直接生成。比如要一张落地页头图的位置,我会先量出设计稿里这块区域是 1920×1080,然后用占位图生成器填入这两个数,选一个跟品牌色接近的底色,文字标签让它自动显示像素尺寸。几秒钟出图,贴进去,头图那一块就不再是空的了。

按宽高生成:把尺寸这件事说清楚

占位图最核心的参数就是宽和高。生成器里宽高各自支持 50 到 4000 像素任选,这个范围覆盖了从一个小图标到一张打印尺寸大图的几乎所有需求。关键不在于支持多大,而在于你填的尺寸要对得上实际槽位:

头图 / Hero 区:1920×1080,十六比九的横屏,桌面端落地页最常见。
Open Graph 卡片:1200×630,这是社交分享预览图的标准尺寸,发到微信、Slack、Twitter 都按这个比例裁。
应用图标:512×512,正方形。
移动端竖屏:750×1334,九比十六。

把这几个尺寸记住,大部分页面 day 1 需要的占位就都能配齐了。生成器顶部还有一条「标准尺寸」,点一下就依次把这五个版本全导出来,省得一个一个填。

一个真实的例子:OG 卡片先顶上

讲个具体的。周一要上线一个落地页,设计师的头图周四才给。落地页本身没问题,但发到群里和 Slack 里,分享预览图那块是空的,看着像页面坏了。

这时候我生成一张 1200×630 的占位图:底色用品牌蓝 #38BDF8,文字用深色 #0F172A,标签写上「OG draft」,导出 PNG,塞进页面的 og:image meta 标签。这样分享出去的预览图看着是有意为之的草稿,而不是裂开的空白框。周四真图到了,只要把这一个文件换掉,meta 标签一个字都不用动。1200×630 这个尺寸专门给 OG 卡片用,选它就是因为社交平台按这个比例渲染,换别的比例会被裁掉边。

格式怎么选:PNG、JPG 还是 WebP

占位图通常是纯色加一行文字,这种图选格式有讲究:

带文字标签的占位图,用 PNG 或 WebP。这俩对清晰的文字边缘友好。JPG 是有损压缩,会把文字边缘糊出噪点,标签看着脏。
WebP 体积最小。同样一张纯色加文字的占位图,WebP 通常比 PNG 小 5 到 10 倍,看起来却没区别。下游是浏览器(现代浏览器全部原生支持 WebP)就优先用它。
PNG 留给老工具。如果图要丢进老版本 Photoshop 或者某些还没跟上的邮件客户端,用 PNG 更稳。

还有个尺寸上的坑:只需要一张 600px 的卡片预览,却生成 4000×4000 的 PNG,文件一下子四五兆,纯属浪费。浏览器只会把图缩小显示,不会帮你省掉多出来的字节。像素尺寸对着实际槽位配就好。如果手上已经有偏大的图想压一压,可以再过一道图片压缩工具。

为什么不直接用远端占位服务

很多人习惯嵌一个远端占位服务的 URL,让 CDN 实时返回图。这招平时好用,但有几个翻车点:服务可能慢,可能限流,可能被公司防火墙挡住,甚至某天悄悄下线。过去几年至少有两个热门的 placeholder 服务出过这种事。一旦它挂了,你设计稿里、demo 里所有引用它的地方全变灰框。

更典型的是会场演示。网络一烂,远端占位图 URL 一断网就全白。本地生成的占位图是磁盘上的真文件,打进构建里,不管有没有网,demo 看着都一模一样。所有像素都在你浏览器本地用 Canvas 绘制,文字、颜色、尺寸都不上传,涉密的项目名、内部品牌色、NDA 设计稿标签也能放心填。

真图替换:别让临时图混上线

占位图的最后一步是干净替换。我的习惯是:占位图的文件名和真图保持一致(比如都叫 hero.png),这样真图就位时直接覆盖,引用路径一个都不用改。文字标签上写明白「draft」或者尺寸,review 的时候一眼能认出哪些还是占位的,不会漏。涉及图标和站点图标这类小图,可以顺手用 favicon 生成器一起出真版本。

占位图本身不复杂,但它能让页面在真图没到位的那几天里保持完整、可演示、可评审。把尺寸、颜色、文字这三样定准,把格式选对,把替换流程理顺,临时图就既好用又不会拖到上线。

Made by Toolora · Updated 2026-06-13