跳到主要内容
PulsarKit

为什么压缩后的JPEG看起来还是不清晰

照片压缩后看起来发虚,通常和你选的压缩设置没有什么关系。真正造成这种效果的,是图片的分辨率。

作者:PulsarKit · ·

同一张风景照片的两个版本:左边是800 × 450像素的画面,放大到四倍后已经发虚;右边是3000 × 2000像素的原图,缩小一半后依然清晰

压缩和调整尺寸是两个不同的调节手段

人们很容易以为,一个“把它变小”的工具能同时做好两件事,但压缩和调整尺寸作用在不同的东西上。图片压缩用更低的质量重新编码照片已有的像素,文件变轻了,尺寸却完全不变。一张3000×2000的JPEG压得再狠,也还是一张3000×2000的JPEG,只是更发虚。调整图片大小改变的是图片本来有多少像素。照片在“压缩”之后看起来模糊,往往是因为它的尺寸被调整过,通常是之前处理它的某个应用做的,而不是因为压缩得太狠。

压缩级别改变了什么

处理JPEG、WebP或AVIF的压缩工具,实际上只是在0到100之间选一个质量数值,再把它交给编码器。质量设在85左右,画面和原图在视觉上几乎没有差别,文件大小的降幅也不大。70是大多数普通照片看不出变化的位置,适合作为默认值。55明显更软,凑近看就能发现,尤其是在头发、树叶这类细节丰富的纹理上,所以它更适合缩略图,而不适合页面的主图。PNG根本没有质量滑块,因为它本身就是无损格式。PNG的“级别”控制的是另一件事:无损优化器要花多大力气,把同样的像素更高效地重新打包。

压缩已经压缩过的照片,只会更糟,不会更好

照片还没到你手里,手机相机就已经把它压得很狠了。再用一遍激进的压缩,也找不到更多可以节省的空间,只会在相机丢掉的细节之外,再丢掉一些细节。如果重新压缩后的文件和原文件一样大,甚至更大,这说明图片已经没有多少余地,而不是工具出了毛病。设计合理的压缩工具能识别这种情况,原样返回你的原文件,而不是交给你一份技术上不同、却一点也没变小的副本。

发虚的真正原因通常是分辨率

把一张小图拉大,去填满更大的位置,并不会增加从来没有拍到的细节。它只是把现有的像素铺到更大的面积上,不管压缩质量设得多高,结果看起来都会发虚。所以工具默认不允许放大到超过原始分辨率。照片在不知不觉中被放大,是“模糊”结果最常见的原因,远比任何压缩设置都常见。照片显示得比它的像素所能支撑的更大,质量滑块怎么拖都救不回来。

有效的顺序

先调整尺寸,调到照片实际显示时的准确尺寸;再压缩,选和图片用途相称的中等质量。反过来做,先压缩,再在你控制不了的某个处理环节里调整尺寸,一张质量70、完全合格的照片就会被拉大到两倍,问题还会被怪到错误的步骤上。先把像素尺寸调对。尺寸对了,中等的压缩设置看起来也会比最高质量更好,因为后者用在了一张从一开始尺寸就不对的图片上。如果目标平台支持,图片转WebP在同样的质量下还能让结果再小四分之一。

让照片发虚的常见错误

大多数发虚的照片都来自下面四个习惯之一,而且没有一个是质量滑块的问题。第一个是让页面布局拉伸图片:一张800像素宽的照片,放进高密度屏幕上1600像素宽的位置,就是在让浏览器放大它,而这正是调整尺寸工具默认拒绝做的放大。第二个是压缩两次。照片先在手机应用里用低设置导出,再交给压缩工具压一遍,两步都会丢失细节;而且第二遍省下的远少于第一遍,因为相机自己的压缩已经拿走了最容易省的那些字节。第三个是给不合适的图片选了JPEG。截图、图表,以及任何带文字或硬边缘的图片,在任何有损质量下都会在字母周围出现振铃光晕;PNG或无损WebP则能让这些边缘保持精确,而且无损WebP保存同样的像素,文件通常比PNG更小。第四个是缩小了看结果。缩略图会掩盖一切问题,所以在判断某个设置够不够好之前,先按100%对比那些要紧的细节:头发、树叶、小字。改掉这四个习惯,质量70和质量85之间的差别就很难看出来了。

一个带数字的实际例子

拿一张刚从手机里拍出来的照片:4000乘3000像素,一共一千二百万个像素,要放进一个1200像素宽的页面栏。把它调整到1200乘900,剩下1,080,000个像素,只有原图的十一分之一。还没动质量,光是这一步缩小,文件就比任何压缩设置能做到的小得多。调整图片大小用Lanczos3滤镜缩小,普通的盒式滤镜会把边缘弄糊,它却能让边缘保持清晰;它会先应用手机写入的方向标签,所以结果是正的,相机的元数据则不会保留。然后用图片压缩的“均衡”级别(质量70),把调整过尺寸的文件再压小一次,一个像素尺寸都不改。如果重新压缩后的文件不会比输入的文件更小,工具会原样返回原文件,页面上也会说明这一点,而不是交给你一份技术上不同的副本。如果目标平台支持WebP,图片转WebP可以代替这第二步:在默认质量80下,WebP看起来和质量90的JPEG一样,体积却小三分之一左右。注意顺序起的作用:像素数先定下来,质量设置处理的就是最终真正显示的那张图片,而不是之后还会再缩小一次的图片。

本文用到的工具

继续阅读