占位图生成器

如何使用占位图生成器

关于占位图生成器的常见问题

占位图生成器会上传数据吗？断网能用吗？

不会上传。图片由浏览器本地的画布绘制，SVG 与 data URI 由本地代码拼出，批量的 ZIP 也在本地打包，没有任何内容发往服务器。页面加载完成后断网也能继续生成和下载。本工具只在本地存储里记住格式、画质、倍率、字体、字重和代码标签这几项偏好，图上的文字不保存。

手机浏览器里怎么用占位图生成器下载图片？

手机上直接打开本页即可：常用尺寸、格式与倍率都是可触控的按钮，窄屏下参数区和预览区上下排列。点「下载」后图片会进系统的下载目录，部分手机浏览器会先打开预览，长按即可保存。手机浏览器的画布有面积上限，超大尺寸请改用 SVG。

占位图生成器生成的图片可以商用吗？

图片不是来自素材库，而是由你填写的尺寸、颜色和文字在本地现算出来的，本站对生成结果不主张任何权利，可以用在原型、设计稿和上线前的页面里。本站不提供法律意见，若项目对素材来源有严格审查，请以团队或法务的要求为准。

占位图生成器能像 placehold.co 那样给链接吗？

不能。本站是纯前端工具，没有可被 img 标签直接引用的图片接口。替代办法是复制「HTML img」或「CSS 背景」里的 data URI，图片数据就写在代码里；或者下载文件放进项目自己的静态目录。这样页面不依赖任何外部服务，内网、断网或服务停运时也不会裂图。

占位图生成器最大能生成多大的图片？

宽和高都可以填 1~8192 像素。PNG、JPG、WebP 这类位图的总像素上限是 1678 万（相当于 4096×4096），这是手机浏览器画布面积的安全线，超过后位图选项会禁用；SVG 是矢量图，不受这个限制。

用占位图生成器导出的 JPG 背景为什么是黑的？

JPG 格式不支持透明。浏览器把带透明区域的画布编码成 JPG 时，透明像素会直接变成黑色。本工具在导出 JPG 且背景透明或半透明时，会先在最底层铺一层白色，所以不会出现黑底；需要透明背景请选 PNG、WebP 或 SVG。

占位图生成器导出的 SVG 文字为什么比 PNG 小一点？

SVG 里的文字是在查看者自己的设备上用它的字体渲染的，本工具无法预知那台设备有什么字体，只能按偏宽的估算来定字号，保证换了字体也不出界。PNG 等位图是在你的浏览器里直接画好的，可以用真实的文字宽度，所以字号能更贴近边缘。

怎么用占位图生成器一次生成多种尺寸？

展开「批量生成」，每行写一个尺寸，如 1200x630、300*250 或 64 64，还可以加 @2x，井号后面写注释。一次最多 30 张，按当前的样式与格式逐张生成后打包成 ZIP 下载；无法识别、重复或超出上限的行会逐行提示，生成途中可以随时取消。

在线占位图链接失效了，占位图生成器能替换吗？

能。展开「粘贴在线占位图链接」，把原来的链接粘进去点「解析并套用」，本工具会从链接里认出宽高、背景色、文字色和文字并套用到当前参数，再复制 data URI 或下载文件替换原链接即可。解析只在本地进行，不会访问那个链接。

占位图生成器做的 2 倍图（@2x）是什么意思？

高清屏上一个 CSS 像素对应 2 个或 3 个物理像素，按原尺寸做的图会发虚。选 2× 后导出图片的实际像素是宽高各乘 2，文件名带 @2x，但图上标注的仍是页面里的显示尺寸，在网页里按原尺寸显示即可得到清晰效果。总像素会变成 4 倍，大图要留意上限。

占位图生成器常用尺寸速查表

占位图也叫图片占位符，英文叫 placeholder image 或 dummy image，对应的工具常被称为 placeholder image generator、dummy image generator，也有人直接搜 placehold。本工具就是一个占位图片生成器，做的是网页占位图、设计稿占位图：把文字清空就是空白图片生成，保留尺寸标注就能一眼看出每个坑位该放多大的图。下表是常用尺寸，点工具里同名按钮即可一键填入；这些尺寸属常用约定，以平台后台最新要求为准。

不知道该用多大尺寸？可以先用 屏幕分辨率查询 看看当前屏幕和视口有多大。

占位图选 PNG、JPG、WebP 还是 SVG

纯色占位图里 SVG 占位图通常最小，因为它只存几行绘制指令：默认 800×600 的这张只有 383 字节，而且放大到多少都不会糊。它的代价是文字由查看者的设备用自己的字体渲染，字形会有细微差别。位图的字节数取决于浏览器的编码器，同一张图在不同浏览器里大小不同，本工具在你生成后显示真实大小。

占位图上的文字怎么做到不出界

本工具先在四周留出短边 8% 的边距（至少 4 像素），再把每一行文字按 100px 字号量一次宽度。文字宽度与字号成正比，所以只量一次就能直接算出「刚好放得下」的字号，不用反复试。字号取三者中最小的：宽度约束、高度约束（行数 × 1.2 倍行高），以及短边 ÷ 4.5 的上限——最后这一条让大图上的文字不会顶满整个画面，保持经典占位图的观感。默认 800×600 的 SVG 里字号是 129px。算出来不到 6px 时，说明画布太小，就只出纯色块、不画文字。

PNG、JPG、WebP 是在你的浏览器里直接画的，用的是真实的文字宽度；SVG 则会被别人的设备用别人的字体渲染，所以按偏宽的估算定字号：汉字按 1.02 个字宽计（常见中文字体实际约 1.0），数字和字母按 0.62 个字宽以上计，大写 W、M 这类宽字母单独按更宽的值计。因此同样的参数下，SVG 的字会比 PNG 略小一点，但换到任何设备上都不会出界。

JPG 占位图为什么背景是黑的，图片大小有上限吗

用画布导出 JPG 时，透明像素没有颜色可存，浏览器会把它编码成黑色——这就是很多工具做出的「透明 JPG」变黑底的原因。本工具在 JPG 且背景透明或半透明时，会在最底层先铺一层白色，并在预览下方提示。

位图的另一个限制是画布面积。手机浏览器（尤其是 iOS Safari）对单张画布的像素总数有上限，超过后会直接画不出来。本工具把位图上限定在 1678 万像素，也就是 4096×4096；选 2× 倍率时宽高各翻一倍、像素数变成 4 倍，所以 4096×4096 只能用 1×。8192×8192 这样的尺寸有 6711 万像素，位图选项会被禁用，但 SVG 仍然可以导出。

在线占位图链接打不开了怎么办：换成本地图片

很多项目直接在 img 标签里引用在线占位图服务的链接。一旦这个服务停运、限流，或者页面跑在内网、断网的环境里，所有占位图会同时裂开。更稳的做法是把占位图放进项目自己：要么下载文件放进静态目录，要么用 data URI 把图片数据直接写进代码。

本工具的「粘贴在线占位图链接」可以帮你迁移：它把链接当作普通文本解析，找出路径里第一个「宽x高」段作为尺寸，其后的十六进制颜色段依次作为背景色和文字色，再读取 text 参数作为文字。比如 https://placehold.co/600x400/EEE/31343C?text=Hello+World 会被识别为宽 600、高 400、背景 #eeeeee、文字色 #31343c、文字「Hello World」。解析规则不认具体网站，只看链接格式，而且全程不会访问那个链接。

占位图写进代码：data URI、img 标签与 CSS 背景

data URI 把图片数据直接放进链接里，页面不需要再请求任何文件。SVG 是以 ASCII 为主的文本，本工具用 URL 编码而不是 Base64：默认这张 SVG 有 383 字节，URL 编码后的 data URI 约 423 字节，而 Base64 会让体积增加约三分之一，约 538 字节。「HTML img」标签页给出带宽高和 alt 的完整 img 标签，「CSS 背景」标签页给出一行 background 声明。

PNG、JPG、WebP 是二进制，只能用 Base64 编码。生成位图后，「位图 data URI」标签页会给出 Base64 占位图的完整串，适合小图标、小占位图这类几 KB 的图；超过 2MB 时不再显示文本，建议直接下载文件。想了解 Base64 的原理与体积换算，可以看站内的 Base64 图片指南；只需要通用的编解码，请用 Base64 编码解码。

多种尺寸一起要时用占位图批量生成：每行一个尺寸，打包成 ZIP 下载，文件名统一是 placeholder-宽x高.格式，2× 时带 @2x。

占位图常和占位文字一起用：英文假文可以用 Lorem Ipsum 生成器，中文假文用 中文假文生成器，表格与接口假数据用 Mock 假数据生成器。只要一整块纯色可以用 纯色全屏；需要纹理背景用 SVG 背景纹理生成器；要把代码做成分享图请用 代码美图生成。

要把现成图片改尺寸、转格式或压缩，请到姊妹站在线图片处理处理；本工具只生成新的占位图，不接受上传。

相关教程

遇到格式选择、乱码或校验问题，可以先看这些说明再动手处理。

• 问题解答图片和文件转 Base64 怎么用？DataURL 用法说明讲清图片、文本、文件转 Base64 与 DataURL 的常见用法、体积变化、URL-safe 区别，以及什么时候不该把文件塞进 Base64。