懒加载图片生成器：优化图片与 LQIP
为懒加载准备图片：一个优化后的全尺寸文件，加上一个用于模糊渐显效果的极小低质量占位图（LQIP），在浏览器中生成。
正在加载懒加载图片生成器（LQIP）…
您的文件绝不离开您的设备
如何使用懒加载图片生成器（LQIP）
- 1
在此页面打开懒加载图片生成器（LQIP），它直接在浏览器中加载。
- 2
添加文件、文本或数值，并调整设置。
- 3
复制或下载结果。不会上传或存储任何内容。
如何为懒加载生成图片和占位图
懒加载是指首屏以下的图片只有在访客滚动到附近时才下载。现代浏览器通过 img 标签上的 loading="lazy" 属性原生支持这一点，许多网站还会加入低质量图片占位图（LQIP）：一个极小、模糊的图片版本，立即显示，等真实图片加载完成后再替换。这两种技术都依赖合适的文件，本页正是帮你生成这些文件。
先说清楚生成器做什么：它以画质 80、原格式和原尺寸压缩你的图片，供懒加载使用。改动两项设置后，它还能生成占位图：一个只有几十像素宽的低画质版本，通常远小于 1 KB。它不会编写 HTML 或 CSS，也不会对图片本身做模糊处理；模糊效果是在浏览器中把占位图放大时用 CSS 实现的。
如何使用懒加载图片生成器（LQIP）
- 把图片拖到上传区域、点击选择文件，或用 Ctrl+V 粘贴图片。本页支持 JPG、PNG、WebP、GIF 和 BMP 文件，可一次添加多张，每个文件最大 80 MB。
- 第一轮，完整图片：保持默认（画质 80、原尺寸），或在 Format 中改为 WebP，然后下载优化后的文件。
- 第二轮，占位图：打开 Resize，选择 Max 并输入 32 × 32，把画质降到约 30到40，并在 More options 中把命名规则设为 {name}-lqip。同样下载这些极小的文件。
- 用前后对比滑块检查结果：在预览上拖动分隔线，并在下方查看新的尺寸、文件大小、画质和节省的百分比。任何设置的改动都会自动重新处理所有图片。
- 下载单张图片，或用 Download all (ZIP) 打包下载整批图片。在 More options 中还可以设置 DPI 值，以及使用 {name}、{w}、{h} 的文件命名规则。
懒加载小贴士
- 不要懒加载 LCP 图片。主视觉或首张大图应立即加载；对它懒加载会推迟 Largest Contentful Paint。请改用 网站图片优化器 优化它。
- 预留空间。为每张懒加载图片设置 width 和 height 属性（After 一行显示准确尺寸），加载时页面就不会跳动。
- 内联占位图。几百字节的占位图可以作为 data URI 嵌入，或用作 CSS 背景，并在完整图片加载前用 CSS 滤镜保持模糊。
- 完整图片也要轻量。懒加载只是推迟字节，并没有去掉它们；请转换为 WebP，或用 批量图片压缩器 处理大文件夹。
私密、免费、快速
全部处理都在你的浏览器中完成：图片在你自己的设备上解码、调整尺寸并重新编码，不会上传到任何服务器。无需注册、没有水印、没有每日限制，每个结果中的位置和相机信息（EXIF）都会被移除。
功能
- 以画质 80 优化的全尺寸图片
- 通过 Max 缩放生成极小的 LQIP 占位图
- {name}-lqip 等文件命名规则
- 可选 WebP 或 AVIF 输出
- 提供用于 width 和 height 的精确输出尺寸
- 批量处理并打包 ZIP 下载
常见问题
什么是 LQIP？
低质量图片占位图：一个非常小、高度压缩的图片版本，能立即加载，并在完整图片到达前显示（通常是模糊的）。
这个工具会生成懒加载代码吗？
不会。它只生成图片文件。懒加载本身需要在你的 HTML 中使用 loading="lazy" 属性或 JavaScript 库实现。
占位图应该多小？
约 16 到 40 像素宽、低画质，通常只有几百字节。把 Max 设为 32 × 32，画质设为 30到40 左右。
如何实现模糊渐显（blur-up）效果？
把极小的占位图拉伸到完整尺寸并加上 CSS 模糊滤镜显示，完整图片加载后再淡入替换。工具提供两个文件，效果由你的 CSS 实现。
每张图片都应该懒加载吗？
不是。首次加载时可见的图片，尤其是最大的那张，应正常加载。懒加载用于页面下方的图片。
我的图片会上传到服务器吗？
不会。图片在浏览器本地处理，从不离开你的设备。关闭标签页后即被丢弃。