关于此工具
占位图是页面在真正的图片还没加载完成时展示的内容——真实照片的模糊缩影，或者一个纯色方块——这样布局不会跳动，页面看起来已经在加载真正的内容了。这种"模糊照片"风格通常被称为 LQIP（低质量图片占位图）：把原始照片缩小到只有几十个像素——长边 20 到 40 像素就足够了——可选地加一点模糊使其更柔和，然后重新编码这个极小的结果。由于像素极少，编码后的体积通常只有几百字节到几 KB，小到可以直接以 base64 Data URI 的形式内嵌，而不必再发起一次单独的文件请求。
把占位图内嵌为 Data URI，意味着它会随页面自身的 HTML 或 CSS 一起下发——不需要为了在真实照片到达前展示点什么而多发一次网络请求。用 CSS 把这个微小且略带模糊的结果放大到真实图片的显示尺寸，看起来就像是即将出现的照片的柔和预览；Medium 等网站以及许多商品图片画廊的淡入加载效果正是用的这个技巧。如果你还没有原始照片——比如做骨架屏、粗略的布局原型，或者为用户尚未上传的内容预留位置——可以切换到第二种模式，生成任意像素尺寸的纯色、渐变或条纹占位图，同样支持即时下载和可复制的 Data URI。一切都在你的浏览器本地运行，不会上传任何内容。
常见问题
LQIP 数据 URI 的"小"到底有多小？
在默认的微小尺寸（较长边远小于 50 像素）下，典型输出的 base64 字符串大约在几百字节到 1-2KB 左右——足够小，可以直接内联嵌入到你的 HTML/CSS/JS 中，而不会给你的页面增加任何有意义的负担，这正是 LQIP 技术的全部意义：在真正的、全尺寸图片在后台加载时立即显示"某些东西"。
我应该使用"从照片"模式还是"纯色/渐变"模式？
当你已经有真实图片，并希望占位符能在视觉上暗示即将出现的内容时，使用"从照片"（实际内容的模糊预览）——这能为用户提供更流畅、信息量更大的加载体验。当你在真实图片尚未确定或准备好之前需要一个通用占位符时（例如尚未选定照片的画廊的骨架加载状态），或者只是想要比 LQIP 更简单、甚至更小的东西时，使用"纯色/渐变"。