📖 图片压缩原理与实践深度指南

一、有损压缩与无损压缩的本质区别

图片压缩从原理上分为两大类。有损压缩（Lossy Compression）利用人类视觉系统的特性，有选择地丢弃人眼不易察觉的信息，从而大幅减小文件体积。典型代表是JPEG和有损模式的WebP。无损压缩（Lossless Compression）通过数学算法消除数据中的统计冗余，不丢失任何原始像素信息，解压后可完全还原。典型代表是PNG（使用DEFLATE算法，即LZ77+哈夫曼编码的组合）。

选择有损还是无损，取决于使用场景：摄影作品、产品图片、用户上传的照片等色彩丰富的图像适合有损压缩，因为人眼对连续色调的微小变化不敏感；而图标、Logo、UI截图、包含文字的图像、需要精确像素的技术图等适合无损压缩，避免出现模糊或色块伪影。

二、JPEG压缩算法详解

JPEG（Joint Photographic Experts Group）是目前使用最广泛的有损图片格式，其压缩过程包括以下关键步骤：

• 色彩空间转换：将RGB色彩空间转换为YCbCr（Y为亮度，Cb/Cr为色差）。由于人眼对亮度变化远比色彩变化敏感，可以对色差通道进行更激进的下采样（通常为4:2:0，即色差分辨率降为原来的1/4），这一步就能减少约50%的数据量。
• 分块与DCT变换：将图像分为8×8像素的小块，对每个块进行离散余弦变换（DCT），将空间域的像素值转换为频率域的系数。低频系数代表图像的整体色调，高频系数代表边缘和细节。
• 量化：这是JPEG有损压缩的核心步骤。用一个量化矩阵去除人眼不敏感的高频分量——quality参数越低，量化越激进，丢弃的高频信息越多，文件越小但质量越差。质量设为100并非"无损"，只是量化最弱。
• 熵编码：对量化后的系数进行之字形扫描、游程编码和哈夫曼编码（或算术编码），进一步压缩数据。

JPEG的8×8分块机制是其主要弱点——当压缩过度时，会出现明显的"方块效应"（Blocking Artifact），特别是在平滑渐变区域。这也是后来WebP和AVIF采用更灵活分块策略的原因。

三、主流图片格式全面对比

四、质量参数与文件大小的关系

以JPEG为例，质量参数（Quality，0~100）与文件大小之间呈非线性关系。经验数据如下：

• Quality 100 → 85：文件大小可减少约40~50%，视觉差异几乎无法感知。这是因为100到85之间去除的主要是统计冗余和极高频信息。
• Quality 85 → 70：文件大小再减少约30~40%，仔细对比可能发现轻微差异，但日常浏览完全可接受。
• Quality 70 → 50：文件大小继续减少约20~30%，但方块效应和色带伪影开始在平滑区域显现。
• Quality 50以下：压缩伪影明显，仅适用于缩略图或对质量要求极低的场景。

Google的Web性能团队建议，网站图片使用JPEG时质量设置在75~85之间，WebP建议80左右。根据测试，这一区间在SSIM（结构相似性指标）评分上仍可达到0.95以上，即与原图高度相似。

五、现代图片格式：WebP与AVIF

WebP由Google于2010年发布，基于VP8/VP9视频编解码技术。有损模式比JPEG小25~35%，无损模式比PNG小约26%，同时支持Alpha透明通道和动画。截至目前，全球超过97%的浏览器支持WebP，已成为Web图片的首选格式。

AVIF（AV1 Image File Format）基于开源视频编解码标准AV1，由开放媒体联盟（AOMedia）开发。相同质量下，AVIF比JPEG小约50%，比WebP小约20%。AVIF支持高动态范围（HDR）、宽色域、高达12位色深以及胶片颗粒合成等高级特性。缺点是编码速度较慢，且浏览器兼容性仍在完善中（Safari于16.4版本开始支持）。

六、不同场景下的格式选择策略

• 网站照片/产品图：优先使用WebP（有损，质量80），提供JPEG作为回退方案。可通过HTML的 <picture> 标签实现自动切换。
• 图标/Logo：优先使用SVG（矢量格式，任意缩放不失真），如必须使用位图则选PNG。
• 需要透明背景：WebP > PNG。WebP有损透明图比PNG体积小60%以上。
• 追求极致体积：使用AVIF格式，但需做好兼容性降级方案。
• 社交媒体分享：使用JPEG（兼容性最广），质量设85以上确保视觉质量。
• 电商详情页：WebP + 懒加载（Lazy Loading），可将页面总传输量减少40%以上。

七、本工具的压缩原理

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

1. 读取上传的图片文件，创建Image对象并获取原始尺寸
2. 将图片绘制到与原图等尺寸的Canvas元素上，完成像素解码
3. 调用canvas.toBlob(callback, mimeType, quality)，由浏览器内置的编码器按指定格式和质量重新编码
4. 将编码结果生成Object URL用于预览，并提供下载链接

需要注意：PNG为无损格式，Canvas API的quality参数对PNG输出无效。如需进一步缩小PNG文件，可将输出格式切换为JPEG或WebP。此外，Canvas API的压缩效果依赖浏览器厂商的编码器实现，不同浏览器在同一质量参数下可能产生略有差异的文件大小。