“压缩”这个词常让人担心图片会变模糊、变丑。但事实上,并非所有压缩都会损失画质。只要选对方法,你可以让图片大幅缩小,视觉上却毫无差异。本文将带你深入了解有损与无损压缩的区别,以及各种保留画质的压缩技术。
理解这两个概念是选对压缩方式的前提:
有损压缩(Lossy Compression)会永久删除部分图片资料。算法分析图片,找出人眼较不敏感的资讯(如高频细节、颜色渐层边缘),然后舍弃或近似化这些资讯。JPEG 是最典型的有损格式。压缩程度越高,失真越明显,常见表现为“方块感”(blocking artifacts)或细节模糊。
无损压缩(Lossless Compression)不丢失任何像素资料,而是透过更聪明的方式重新编排资料。想像把一段重复的序列用“重复 100 次”来表示,而非真的写 100 次——这是无损压缩的基本思路。解压缩后,图片与原始档案完全相同。
对于需要保留最高画质的场景(如印刷、产品展示、医疗影像),无损压缩是唯一选项。对于网页一般图片,合理的有损压缩往往就足够了。
PNG 格式本身采用无损压缩(DEFLATE 算法),但许多 PNG 档案并未达到最佳压缩状态,仍有进一步缩小的空间。
严格来说,pngquant 属于有损压缩,它将 PNG 的色彩从数百万色缩减到 256 色以内。但由于算法极为精准,视觉上几乎看不出差异,档案却可缩小 40–70%。
pngquant --quality=65-80 input.png这类工具重新压缩 PNG 的 DEFLATE 资料流,找到更有效率的压缩方式,不改变任何像素值:
optipng -o7 input.png(-o7 为最高压缩等级)oxipng -o max input.png(Rust 开发,速度更快)JPEG 格式本身是有损的,但有方法在不重新编码的情况下缩小 JPEG 档案:
相机拍摄的 JPEG 通常包含大量 metadata:拍摄地点(GPS 座标)、相机型号、光圈快门、色彩描述档(ICC profile)等。这些资料对网页显示完全无用,但可能占整个档案的 10–30%。
jpegtran -copy none -optimize input.jpg > output.jpgexiftool -all= input.jpg(移除所有 metadata)jpegtran 还可以对 JPEG 的 Huffman 编码进行最佳化(-optimize 参数),以及转换为渐进式 JPEG(-progressive),前者缩小档案,后者让图片在载入时从模糊逐渐变清晰,改善用户体验。
WebP 格式同时支援有损和无损压缩,且两种模式的效率均优于 JPEG 和 PNG:
cwebp -lossless input.png -o output.webpcwebp -q 80 input.jpg -o output.webp现代浏览器(Chrome、Firefox、Safari 14+、Edge)均支援 WebP。可使用 HTML 的 <picture> 元素提供 WebP 优先、JPEG 备用的方案,兼顾新旧浏览器。
AVIF(AV1 Image File Format)是目前压缩效率最高的图片格式,基于开放标准 AV1 视讯编解码器:
根据不同需求,以下是最值得使用的工具:
除了肉眼对比,也可以用客观指标衡量压缩品质:
<picture> 元素提供 WebP/AVIF 优先方案“不失真压缩”并非只有一种方法,而是一系列技术的组合:移除无用的 metadata、使用更高效的格式、让压缩算法发挥最大效能。对于大多数网页图片而言,善用现代格式(WebP/AVIF)加上合理的有损压缩,往往能在视觉无损的前提下,让图片小到令人惊讶的程度。
在浏览器里直接完成,档案不会离开你的电脑:图片最佳化