聊点图片压缩的事儿，顺便说说 PictKit 的压缩工具
从有损与无损压缩的原理讲起，聊到 mozjpeg、WebP、AVIF、PNG 调色板优化、元数据清理、并行处理，以及 PictKit 图片压缩工具背后的技术选型与实现思路。
图片压缩是网站性能优化中影响最大的任务之一。理解主要格式及其取舍，比单纯降低质量滑块更有用。这篇文章会解释压缩的工作原理、各格式的使用场景，以及如何建立可复用的压缩流程。
两类压缩方式
无损压缩会更高效地重写图片数据，不丢弃像素。它适合截图、Logo 和文字较多的图形，但节省空间有限，通常在 5%-30% 之间。
有损压缩会移除难以察觉的视觉信息，然后重新编码。它可以把文件体积减少 50%-90%，但过高的压缩会产生块状噪点、色带或边缘模糊等伪影。
主要格式
| 格式 | 类型 | 透明通道 | 典型用途 |
|---|---|---|---|
| JPEG | 有损 | 不支持 | 照片、相机导出 |
| PNG | 无损 | 支持 | 截图、Logo、UI 素材 |
| WebP | 两种 | 支持 | 网页图片 |
| AVIF | 两种 | 支持 | 高压缩效率网页图片 |
WebP 和 AVIF 使用比 JPEG 更先进的预测和编码方式，因此在更小体积下也能提供接近的画质。
影响结果的因素
最终质量不只取决于编码器：
- 分辨率：只在 1200px 宽度展示的 4000px 图片会浪费带宽。
- 源文件质量：压缩已经压缩过的图片会叠加伪影。
- 内容类型：平滑渐变和细腻纹理对压缩的反应不同。
- 质量设置：再好的编码器在极端设置下也会产生可见问题。
可复用的压缩流程
- 使用可用的最高质量源文件。
- 缩放到图片实际展示的最大尺寸。
- 根据内容和浏览器支持选择格式。
- 设置质量值，并与原图对比。
- 调整到视觉差异可接受为止。
- 把优化后的文件与原图分开保存。
如何评估压缩效果
文件大小只是其中一部分。还需要检查：
- 正常观看尺寸下是否有可见伪影
- 限速网络下的加载时间
- 品牌色图片的色彩准确性
- 截图和图形中文字与边缘的清晰度
元数据与隐私
压缩工具也可能移除 EXIF 等元数据。这对隐私通常是好事，但需要保留相机信息的摄影师应单独保存原始文件。
压缩检查清单
- 从可用的最高质量源文件开始。
- 压缩前先缩放到最大展示尺寸。
- 根据内容和浏览器支持选择格式。
- 在正常观看尺寸下与原图对比。
- 检查边缘、文字和渐变是否存在可见伪影。
- 保留原始文件，方便以后重新生成优化版本。
每次使用同一套检查清单，可以让压缩决策更可预测，也让整个网站的图片质量保持一致。
如何评估压缩指标
文件大小是最直观的指标，但不能代表全部。更有用的指标包括：
- 文件大小：文件包含多少数据。
- 画质：压缩结果与原图有多接近。
- 编码时间：生成文件需要多久。
- 解码时间：浏览器展示文件需要多少算力。
- 兼容性：哪些浏览器和设备可以渲染该格式。
一个格式可能文件很小，但编码时间很长，不适合交互式编辑器；也可能画质很好，但旧设备不支持。综合评估这五项指标，比只看文件大小更准确。
实际编码器对比
JPEG 仍然是照片场景兼容性最好的格式，主要弱点是高压缩下的伪影和不支持透明背景。WebP 通过同时支持有损、无损和透明背景改善了这些问题。AVIF 通常文件最小，但编码可能更慢，支持范围也更窄。
在实际项目中，用同一张源图在多个编码器和多个质量等级下测试。在正常观看尺寸和 100% 缩放级别下分别比较。在 1200px 下看起来不错的格式，在 200% 缩放下可能暴露色带或模糊，这对高质量印刷很重要。
不同场景的推荐设置
- 网站照片：WebP 或 AVIF，质量 75-85，并缩放到最大展示宽度。
- 商品图：WebP 质量 80-90，仅在需要透明背景时准备 PNG。
- 截图和 UI 素材：PNG 或无损 WebP，保持文字清晰。
- 邮件附件：照片使用 JPEG 质量 85，带文字的图形使用 PNG。
- 归档：保留原始文件，另行生成优化版本。
这些只是起点，最终值取决于图片和平台，请务必检查结果。
常见伪影与避免方法
常见压缩伪影包括块状噪点、色带、模糊和颜色偏移。块状噪点表现为平滑区域的可见方块；色带表现为渐变中的可见阶梯；模糊来自细节被移除；颜色偏移可能来自色彩配置未保留。
要避免这些问题，请从最佳源文件开始，使用合理的质量设置，并在发布前检查渐变和边缘。避免压缩已经压缩过的文件，因为伪影会不断累积。
工作流示例
假设你有一张 2400 万像素的相机 JPEG，宽 6000 像素，文件大小约 6MB。
- 先把图片缩放到 1920 像素宽，也就是实际展示的最大宽度。
- 导出 WebP 质量 75 和质量 85，再导出 AVIF 质量 70。
- 在正常观看尺寸和 100% 缩放下对比三个文件。
- 选择体积与可见画质最平衡的文件。
- 把相同设置应用到其余批次。
- 保留原始文件，方便以后修改。
在这个示例中，缩放后的 WebP 通常比原 JPEG 小 80%-90%，在正常屏幕尺寸下几乎看不出区别。
按输出场景选择质量
- 缩略图：质量 60-70 通常足够，因为图片很小。
- 社交媒体：质量 80-90，可以在平台二次压缩后保持干净。
- Hero 主图：WebP 和 AVIF 使用质量 80-85，需要时提供 JPEG 回退。
- 印刷：保持实际可用的最高质量，避免过度有损压缩。
同一张图片在不同使用场景下可能有不同的最佳设置。请保留原图，并按输出场景生成不同版本。
批量压缩策略
批量处理前，先取一小批包含不同内容类型的样本，应用候选设置并检查结果，再处理完整批次。保持文件名一致，并确认输出目录中文件数量正确。只有先验证设置，批量处理才高效。
元数据与隐私
压缩工具可能移除 EXIF 等元数据。这对隐私通常是好事，但对需要保留相机信息的摄影师来说很重要。需要保留元数据时，请单独保存原始文件，发布时使用清理后的副本。
常见问题
最佳质量设置是多少？ 没有统一数字。WebP 和 JPEG 从质量 75-85 开始测试比较常见，但最终取决于图片和用途。
可以做到肉眼无损吗？ 对大多数照片，适度的有损压缩在正常尺寸下几乎看不出区别。带文字或锐利边缘的图形建议使用无损格式。
为什么小图文件仍然很大？ 图片可能包含复杂纹理，或者已经高度优化。降低分辨率通常比调整质量效果更明显。
PictKit 会上传我的图片吗？ 不会。所有处理都在浏览器本地完成。