无需登录 数据私有 本地保存

LQIP占位图生成 - 缩略图转Base64

12
0
0
0

LQIP 占位图生成器

上传图片，一键生成低质量占位图（LQIP）的 Base64 编码，提升网页加载体验。

上传图片

点击上传、拖拽图片到此处

或使用 Ctrl + V 粘贴图片

支持 JPG / PNG / WebP / GIF / SVG，最大 20MB

📷 原图预览

原图预览
效果预览

🔍 缩略图（实际像素大小）

缩略图实际大小

🌫️ LQIP 模糊放大效果（模拟页面中的占位图）

LQIP模糊效果

模糊半径：15px

请先上传图片

参数设置
px
建议 20-60px，越小加载越快，模糊感越强
低质量 = 更小的 Base64，推荐 30-60%
用于 CSS filter: blur()，推荐 10-25px
LQIP 推荐 JPEG，兼容性最佳且体积小
输出代码
请先上传图片，代码将在此显示...
原图：- 缩略图：- Base64 长度：-

常见问题与知识点

LQIP（Low Quality Image Placeholder）即低质量图像占位符。它是一种网页性能优化技术：在原始高清图片加载完成之前，先显示一个极低质量、体积微小的缩略图（通常仅 200-800 字节），并配合 CSS filter: blur() 进行模糊放大，让用户在图片加载过程中看到一个大致的轮廓，而不是一片空白。这能显著减少感知加载时间，提升用户体验和 Core Web Vitals 得分。

一般推荐缩略图宽度在 20px 到 60px 之间。20px 宽度生成的 Base64 通常只有 200-400 字符，非常适合极速加载；40px 是一个很好的平衡点，既能保留足够轮廓信息，体积也控制在 600-1000 字符以内。如果图片细节非常重要（如产品图），可以适当增加到 60-80px。记住：缩略图宽度每增加一倍，Base64 长度大约增加 3-4 倍。

优点：① 嵌入 HTML/CSS 后无需额外 HTTP 请求，减少网络往返；② 适合极小图片（如 LQIP 缩略图）；③ 不依赖外部资源，离线也能显示。
缺点：① Base64 编码比原始二进制大约 33%；② 会增加 HTML 文档体积；③ 不适合大图片（会使 HTML 膨胀）。
对于 LQIP 场景，缩略图本身就极小（通常 <1KB），Base64 编码后的体积增加完全可以接受。

最经典的 LQIP 用法是结合渐进式加载：
① 在 <img> 标签的 src 中先使用 Base64 缩略图；
② 使用 CSS filter: blur(15px) 制造模糊效果；
③ 通过 JavaScript 监听高清图加载完成事件（或使用 loading="lazy"）；
④ 高清图加载完成后，平滑过渡替换 src 并移除模糊滤镜。
也可以使用 Responsive LQIP：在不同屏幕尺寸下使用不同宽度的缩略图。

对于 LQIP 缩略图：JPEG 是首选，因为它对照片类图片压缩率极高，兼容性最好，30-50% 质量下仍能保留足够轮廓；WebP 体积更小但部分老旧浏览器不支持（如 IE）；PNG 适合有透明通道或纯色块的图片（如图标、Logo），但对于照片体积会偏大。一般情况下选择 JPEG、质量 30-50% 即可获得最佳效果。

间接有帮助。LQIP 本身不是直接的 SEO 排名因素，但它能显著改善 Core Web Vitals 指标（特别是 LCP 和 CLS），而页面体验是 Google 排名的重要因素。通过减少累积布局偏移（CLS）和改善最大内容绘制时间（LCP），LQIP 能帮助页面在搜索引擎中获得更好的评价。此外，更快的感知加载速度会降低跳出率，这是用户体验信号，也会间接影响 SEO。
🔧 相关工具