面向 Web 性能的图像压缩
2026-05-06
阅读时长 7 分钟
在视觉内容较多的网页中，图片往往是体积最大的资源之一。针对具体场景测量尺寸、编码格式和质量，比套用统一文件大小目标更可靠。
1. 有损与无损：如何选择？
优化的第一步是理解两种主要的压缩类型：
- 无损压缩 (Lossless)：在不丢失任何数据的情况下减小文件大小。适用于 Logo、图标和文字较多的图像。（格式：PNG、部分 WebP）。
- 有损压缩 (Lossy)：丢弃非必要数据以实现巨大的体积缩减。最适合摄影照片。（格式：JPEG、WebP）。
2. WebP 的优势
WebP 同时支持有损和无损压缩，并得到现代浏览器广泛支持。它在许多场景中可以减小体积，但实际结果取决于源图与质量设置。请在图片转换器中比较预览和输出大小，而不要假定某一种格式始终最优。
3. 智能压缩技术
图片压缩工具接受不超过 10MB 的 JPEG、PNG 和 WebP。它用 createImageBitmap 解码，把像素绘制到相同尺寸的 Canvas，再在浏览器内生成新的编码文件：
- JPEG/WebP：Canvas
toBlob()接收 0.01–1 的质量参数，具体编码结果由浏览器决定。 - PNG：UPNG.js 编码 Canvas 像素缓冲区；质量低于 100 时映射为 2–253 色的调色板目标，100 时传入零色量化参数。
- 元数据与尺寸：输出是新的像素编码，不复制源 EXIF 块；宽高保持不变，当前压缩器不提供缩放。
4. 保留结果前先测量
重新编码不保证每张图都会变小。已经优化过的文件可能变大，调色板压缩也可能产生色带或损伤透明边缘。请比较页面显示的原始与输出字节数，以 100% 缩放检查下载文件；结果更大或肉眼变差时应保留原图。
⚡ 性能技巧
请根据自己的页面制定性能预算，并按真实展示尺寸测试。应同时比较视觉质量、编码体积与加载表现，而不是套用统一的 KB 阈值。
结论
压缩只是图片交付的一环。选好可接受的编码后，还应提供合适尺寸与响应式图片、声明宽高并测量真实页面。本站工具负责本地重新编码，不能替代响应式标记或 CDN 图片处理链路。