placeholder.pics

Placeholder pics 是一个用 URL 即时生成 SVG 占位图的在线服务。相比传统的位图占位方案（如预先切好的 PNG/JPG 占位图，或本地维护一套占位素材），它的核心优势是：文件体积极小、矢量不失真、无需准备和管理素材、通过 URL 参数即可生成任意尺寸和颜色的图片。如果你的场景是设计稿、原型、开发阶段的临时占位，并且能接受 SVG 格式，它通常比位图方案更省事；如果目标环境不支持 SVG，或需要真实照片质感的占位图，则不适合。

核心差异对比

为什么体积和缩放是主要优势

服务说明中明确写到，所有图片都以“sub-kilobyte、完全优化的 SVG”形式提供。这意味着同一张占位图，用 SVG 方案往往只有几百字节级别，而一张普通位图占位图动辄几 KB 到几十 KB。在页面里大量使用占位图时，这个差距会累积成明显的加载负担差异。

同时，SVG 是矢量格式，请求 100×100 和请求 2000×2000 得到的是同一套矢量描述，放大不会失真。位图占位图一旦被拉伸到超出原始尺寸，就会变糊。对于需要在高分屏或不同尺寸下保持清晰的场景，这一点更省心。

无需管理素材，改 URL 就能改图

普通位图方案通常需要：先做图 → 命名 → 放进项目 → 在代码里引用 → 改尺寸时重新导出。Placeholder pics 把这些步骤压缩成一条 URL。

它的 URL 格式规则是：

• 必须以 /svg/ 开头
• 宽高用 WIDTH x HEIGHT 指定，例如 /svg/100x100
• 只写一个尺寸时返回正方形，例如 /svg/100 返回 100×100
• 背景色可写单个 3 位或 6 位十六进制色值，或用 START - STOP 定义渐变
• 前景文字和边框色写在背景色之后，格式为 TEXT - BORDER，且必须先定义背景色
• 标签写在 URL 最后，前景和背景色必须先指定

例如需要一张 100×100、背景 #888888、前景 #EEEEEE 并带标签的占位图，URL 结构就是 /svg/100x100/888888/EEE/My Label。

这意味着调整尺寸、换颜色、加标签都只是改字符串，不需要打开设计工具重新导出，也不需要维护一套占位素材库。

适合与不适合的场景

适合：

• 设计稿、原型、线框图里的临时占位
• 开发阶段接口未就绪时的图片占位
• 需要快速生成大量不同尺寸/颜色占位图的场景
• 对页面加载体积敏感、又需要清晰缩放的项目

不适合：

• 运行环境不支持 SVG
• 需要真实照片质感或复杂视觉的占位图
• 需要长期稳定托管、对第三方服务可用性有要求的正式生产素材

使用前需要知道的限制

服务以“as is”形式提供，官方声明不附带准确性或可访问性方面的明示或暗示保证。因此它更适合临时、非关键的占位用途，而不是作为正式生产环境的关键依赖。另外，标签应保持简短，并考虑所请求图片的尺寸——图太小、标签太长会显示不下。

如果你的项目能接受 SVG，且占位图只是过渡性质，Placeholder pics 在体积、缩放和素材管理上都比传统位图方案更轻；如果这两点不成立，继续用位图占位更稳妥。

Placeholder pics 通过 URL 路径传参，支持背景色、渐变、前景文字/边框色和文字标签四类自定义。颜色用 3 位或 6 位十六进制色值，渐变用两个色值加短横线连接，标签放在 URL 最后且必须位于颜色参数之后。所有图片以 SVG 形式返回，尺寸由 URL 中的宽高决定。

URL 基本结构

图片 URL 必须以 /svg/ 开头，各段按固定顺序拼接：

/svg/WIDTHxHEIGHT/BACKGROUND/FOREGROUND/LABEL

• 只写一个尺寸时生成正方形，例如 /svg/100 返回 100×100 像素的 SVG。
• 宽高用 WIDTHxHEIGHT 表示，如 /svg/100x100。
• 后面的背景、前景、标签都是可选项，但顺序不能颠倒。

背景色与渐变

背景色支持两种写法：

渐变通过 START-STOP 两个色值用短横线连接实现，起始色在前、结束色在后。

前景文字与边框颜色

前景色控制图片中的文字和边框，写法有两种：

• 单色：一个 3 位或 6 位十六进制色值，同时作用于文字和边框。
• 双色：TEXT-BORDER，文字色在前、边框色在后，用短横线分隔。

关键限制：必须先定义背景色，才能设置前景色。也就是说，前景色参数不能跳过背景色单独出现。

/svg/100x100/888888/EEE        # 背景 888888，前景 EEE
/svg/100x100/888888/EEE-000    # 文字 EEE，边框 000

标签

标签是 URL 的最后一段，用于在设计中标记图片用途。

• 标签应简短，并考虑图片实际尺寸——图小的时候长标签会显示不下。
• 使用标签时，前景色和背景色都必须先指定，标签只能放在颜色参数之后。

/svg/100x100/888888/EEE/My Label

参数顺序速查

常见卡点

• 跳级设置：想加前景色却没写背景色，URL 无效。颜色参数必须从背景开始逐级往后。
• 标签位置：把标签写在颜色前面不会生效，标签永远是最后一段。
• 尺寸与标签长度：小尺寸图片配长标签会溢出，标签要按图片大小取舍。
• 颜色位数：十六进制支持 3 位或 6 位，不要混用其他长度。

按上述顺序拼接，就能用一条 URL 同时控制尺寸、背景、渐变、前景和标签。

Placeholder pics 是一个用 URL 直接生成 SVG 占位图的免费在线服务，适合在网页设计、原型和 mockup 中快速插入尺寸、颜色、标签都可控的占位图片。使用前需要清楚几点：图片全部是 SVG 格式，使用场景必须支持 SVG；服务按“现状”提供，官方明确不附带准确性或无障碍方面的明示或暗示保证；标签要写得简短，并考虑图片实际尺寸；颜色和标签的 URL 顺序有固定要求，写错会拿不到想要的效果。

服务本身的限制

按“现状”提供，无保证

网站底部写明：The placeholder.pics service is provided "as is" with no express or implied warranty for accuracy or accessibility. 也就是说，官方不对图片的准确性或无障碍性作任何承诺。如果你的项目对可访问性有硬性要求（例如需要为图片提供有意义的替代文本、满足 WCAG 对比度标准），不能默认这个服务生成的占位图已经达标，需要自行检查或替换。

输出格式固定为 SVG

所有图片都以“sub-kilobyte、完全优化的 SVG”形式返回。这意味着：

• 使用环境必须能渲染 SVG。现代浏览器、多数设计工具都支持，但某些只接受 PNG/JPG 的场景（部分邮件客户端、某些旧系统、部分 CMS 上传限制）无法直接使用。
• SVG 是矢量图，缩放不会失真，这是它相对位图占位方案的主要优势；但如果你需要的是带真实照片质感的占位图，SVG 纯色/渐变方块并不适合。

标签要短，且要考虑尺寸

官方提示：Labels should be short and take into account the size of the image being requested. 标签是直接画在图片上的文字，图片越小，能容纳的文字越少。给一个 50×50 的图配一段长标签，文字会溢出或挤在一起。实践上应让标签长度与请求的宽高匹配。

URL 写法上的硬性顺序

生成图片的 URL 必须遵循固定结构，顺序错了就得不到预期结果。

几个容易踩的点：

• 只写一个维度（如 /svg/100）会得到正方形，不是“宽度 100、高度自动”。
• 想设置前景色，必须先有背景色；想加标签，必须先有前景色和背景色。跳步会导致 URL 无效或解析结果不符预期。
• 标签会替换掉默认显示的图片尺寸文字（Optional, replaces image dimensions）。

版权与来源

• 服务版权标注为 Copyright 2010。
• 页面使用的图标来自 Freepik（www.flaticon.com），采用 CC 3.0 BY 许可。如果你要在自己的项目中复用这些图标，需要遵守该许可的署名要求；但占位图本身由服务生成，与图标许可是两回事。

什么时候适合用，什么时候要换方案

适合：网页/应用开发阶段的布局占位、设计稿 mockup、需要极轻量（亚 KB 级）且可任意缩放和改色的场景。

需要换方案：目标环境不支持 SVG；对无障碍有强制要求且无法自行补足；需要照片级占位图；需要服务方提供可用性保证或长期稳定性承诺。

由于资料未提及价格、账号或登录要求，这里不对是否免费、是否需要登录作推断；实际使用前建议以网站当前页面为准。

Placeholder pics 是一个通过 URL 直接生成占位图片的在线服务，专为设计稿和原型中的图片占位场景设计。它的核心特点是所有图片都以 SVG（可缩放矢量图形）格式输出，体积不足 1KB，可以任意缩放而不失真。你不需要下载任何图片文件，只要在需要的地方引用一个 URL，就能得到指定尺寸、颜色和标签的占位图。

它解决什么问题

在设计网页或应用时，经常需要先用占位图填充版面，等真实图片就位后再替换。传统做法是找一张临时图片或手动制作色块，尺寸和颜色调整起来比较麻烦。Placeholder pics 把这件事变成了拼 URL：尺寸、背景色、前景色、标签全部写在地址里，改一个参数就换一种效果。

核心能力

• SVG 格式：所有图片都是经过优化的 SVG，体积小于 1KB，加载快，放大缩小都清晰。
• 自定义尺寸：可以指定宽高，也可以只给一个数值得到正方形。
• 自定义颜色：背景和前景都支持 3 位或 6 位十六进制色值，背景还支持渐变色。
• 文字标签：可以在图片上添加简短标签，方便在设计稿中标记每张图的用途。
• URL 引用：无需下载，直接在 HTML、CSS 或设计工具中引用 URL 即可。

URL 格式说明

所有图片 URL 都以 /svg/ 开头，后面依次拼接尺寸、颜色和标签。下面按顺序说明每一段。

尺寸

格式为 宽x高，例如 /svg/100x100。如果只写一个数值，例如 /svg/100，会返回 100×100 的正方形。

背景色

可以是单个 3 位或 6 位十六进制色值，例如 /svg/100x100/888888。也可以用两个色值加连字符表示渐变，格式为 起始色-结束色。

前景色（文字和边框）

格式为 文字色-边框色，同样支持 3 位或 6 位十六进制色值。注意：必须先定义背景色，才能设置前景色。

标签

URL 的最后一段可以作为图片标签，例如 /svg/100x100/888888/我的标签。标签要简短，并考虑图片本身的大小。使用标签时，前景色和背景色必须先指定。

完整示例

适用与不适用场景

适合：快速搭建页面骨架、设计稿占位、演示原型、需要轻量图片且不想引入外部文件的场景。

不适合：需要真实照片质感、需要复杂图形内容、对图片有版权或可访问性严格要求的正式上线产品。网站本身声明服务按“原样”提供，不对准确性或可访问性作明示或暗示担保。

使用时的注意点

• 颜色顺序不能颠倒：背景色在前，前景色在后，标签在最后。
• 想用标签就必须先把前景和背景色写全。
• 标签文字不宜过长，否则在小尺寸图片上会显示不全。
• 该服务适合开发与设计阶段，正式上线前记得替换为真实图片。

Placeholder pics 通过一个纯 URL 规则生成占位图，不需要注册或上传文件：URL 以 /svg/ 开头，后面依次拼接尺寸、背景色、前景色和标签，返回的是一张 SVG 图片。它适合在写 HTML/CSS 原型、设计稿或文档时快速插入一张指定尺寸和颜色的占位图。所有参数都写在 URL 路径里，因此你只要会拼地址就能用。

URL 的基本结构

官方给出的格式顺序是固定的，参数按位置解析，而不是按名字：

/svg/WIDTHxHEIGHT/BACKGROUND/FOREGROUND/LABEL

• 必须以 /svg/ 开头。
• 尺寸用 宽x高 表示，例如 100x100。
• 背景色可以省略，但一旦要设置前景色或标签，就必须先写背景色。
• 标签放在最后一段。

尺寸怎么写

尺寸参数紧跟在 /svg/ 之后，用 x 连接宽和高：

如果只写一个数值，得到的是正方形，这是官方明确说明的行为。

颜色参数：背景在前，前景在后

颜色用 3 位或 6 位十六进制色码表示，不带 #。

背景色

背景色可以是一种颜色，也可以是渐变：

• 单色：/svg/100x100/888888
• 渐变：用两个色码以短横线连接，表示起点色和终点色，例如 START-STOP，如 /svg/100x100/888888-EEEEEE

前景色（文字与边框）

前景色控制图中的文字和边框颜色，同样支持单色或双色：

• 单色：/svg/100x100/888888/EEEEEE
• 双色：两个色码用短横线分隔，格式为 TEXT-BORDER，分别对应文字色和边框色

关键限制：必须先定义背景色，才能设置前景色。也就是说，不能跳过背景色直接写前景色。

标签怎么写

标签是 URL 的最后一段，用来在图上显示一小段文字，方便在原型里区分不同占位图。例如：

/svg/100x100/888888/EEEEEE/My Label

使用标签时有两个前提：

• 前景色和背景色都必须先指定。
• 标签要短，并考虑图片本身的尺寸——图太小的话，文字会显示不下。

一个完整例子

假设你要一张 600×400、浅灰背景、深灰文字、标注为 “Hero” 的占位图：

/svg/600x400/EEEEEE/333333/Hero

拆开看：

• 600x400：尺寸
• EEEEEE：背景色
• 333333：前景文字与边框色
• Hero：标签

把这段路径拼到域名后面，就是可以直接放进 <img src="..."> 的地址。

常见卡点

• 顺序写错：参数按位置解析，背景色、前景色、标签的顺序不能调换。
• 忘了背景色：想设置前景色或标签时，背景色是必填的前置项。
• 色码带了 #：URL 里用的是 3 位或 6 位十六进制字符，不带井号。
• 标签太长：小尺寸图片配长标签会显示不清，标签应保持简短。
• 尺寸只写一个数：这不是错误，但结果会是正方形，而不是你想要的矩形。

适用与不适用

Placeholder pics 返回的是 SVG，体积小、可任意缩放，适合原型、设计稿和文档中的占位需求。官方说明该服务按 “as is” 提供，不对准确性或可访问性作明示或暗示担保。如果你需要的是真实照片占位、需要复杂图形，或需要服务端稳定托管的正式资源，这个纯 URL 方案并不合适。