📖 图片压缩相关知识

什么是有损压缩与无损压缩？

图片压缩分为两大类。有损压缩（Lossy）会丢弃部分视觉冗余信息，以换取更小的文件体积，JPEG 和 WebP 均支持有损模式。无损压缩（Lossless）不丢失任何像素数据，PNG 使用 DEFLATE 算法进行无损压缩，WebP 也支持无损模式。

常见图片格式对比

质量参数如何影响文件大小？

以 JPEG 为例，质量参数控制量化表的精细程度。质量从 100 降至 80 通常可减少约 60–70% 的文件大小，而肉眼几乎看不出差异。质量低于 60 时，块状压缩伪影（Blocking Artifact）会开始明显。推荐将质量设置在 75–85 之间，可在体积与视觉质量间取得良好平衡。

Canvas API 压缩原理

本工具使用浏览器内置的 Canvas API 进行纯前端压缩，所有数据均在本地处理，不上传至任何服务器。核心步骤如下：

1. 将原始图片绘制到 <canvas> 元素上（像素解码）
2. 调用 canvas.toBlob(callback, mimeType, quality)，由浏览器的原生编码器重新编码
3. 将编码结果转为 Object URL，用于预览和下载

注意：PNG 为无损格式，调整质量参数对 PNG 输出无效；若需缩小 PNG 文件，建议将输出格式切换为 JPEG 或 WebP。

影响压缩效果的因素

• 原图类型：照片类图片（大量自然色彩渐变）压缩收益远高于纯色图标
• 分辨率：高分辨率图片压缩后节省空间更多；如允许，可同时缩小尺寸
• 格式转换：PNG → JPEG 通常可节省 60–80% 体积（但会失去透明通道）
• 重复压缩：对已经压缩过的 JPEG 再次有损压缩会累积伪影，应避免多次重复压缩