遇到不熟悉的词,先看这 5 个解释
- 压缩
- 压缩尝试用更省空间的方式表示数据,例如把重复片段及其位置记录下来。接收方按约定解释这些记录;是否能明显缩小,取决于数据规律和使用的方法。
- 无损压缩
- 无损压缩要求解压后能准确还原交给压缩器的数据,不能少一个字符或改一个数值。它适合需要保留原内容的文件,但能省多少空间仍取决于内容本身。
- 有损压缩
- 有损压缩允许舍弃一部分信息,以换取更小的体积。解码后得到的是近似结果;画面或声音能否接受,要结合具体内容和使用场景判断,不能只看文件大小。
- 离散余弦变换(DCT)
- 给一小块画面换一种记法:不再逐个记明暗,而是记几种固定图案各要加多少。这些图案由余弦波组成,可以从均匀一片到疏密不同的条纹;每种图案的用量叫系数。常见 JPEG 会对图像各个分量的 8×8 小块这样处理。
- JPEG 量化
- 把描述图像小块的数字按规定的步长取近似值。常见 JPEG 先把 DCT 系数除以量化表中对应的数,再取最近的整数;还原时乘回去,原来被舍去的差值通常就回不来了。
一张满是文字的截图存成 JPEG 后,字的周围可能出现灰色毛边;一张风景照存成 PNG,却可能变成很大的文件。两种格式并不是清晰与模糊的简单排名,它们在保留内容和节省空间上做了不同选择。
无损保存的是交给它的那组像素
PNG 使用无损压缩,解码后能还原被编码的图像样本。这里的前提很重要:如果导出前已经把图片缩小、减少颜色或改变位深,PNG 保存的是处理后的结果。它不会知道被删去的像素原来是什么,也无法把模糊截图自动变清楚。
我们日常导出的普通 JPEG 通常采用有损方式,用较小的数据量近似表现图像。细节可能因此改变,特别是压缩较强时。JPEG 标准家族还包含其他模式,所以本文只讨论常见网页和照片导出情形,不把所有名称里有 JPEG 的格式都归为同一种处理。
文字的边缘,比天空的渐变更挑剔
想象白底上只有一条黑色细线。线旁边多出一点灰色,就容易被发现;小字号文字更依赖这些清楚的边缘。因此讲义、代码截图和像素图常适合先试 PNG。照片里的树叶、皮肤和天空则有很多连续变化,普通 JPEG 往往能在可接受观感下省下不少空间。
这只是起点,不是对每张图片的保证。带大段字幕的照片、大片纯色的插画、含照片的网页截图都可能跨在两类之间。应在实际展示尺寸检查文字、边缘和渐变,再比较字节数;只看缩略图或把所有图都放大很多倍,容易偏离读者真正看到的效果。
透明背景不是把白色改个名字
PNG 可以保存透明度,常用来表达图标周围和半透明边缘。普通网页 JPEG 没有对应的透明通道。把带透明背景的图标导出成 JPEG,通常需要先与某个背景合成;如果选了白色,之后放到深色页面,就可能出现明显的白色方框。
这不是压缩质量调低造成的,单纯提高 JPEG 质量也不会恢复透明度。选择格式前应先问图片是否需要透出页面背景。若只是一张铺满画面的照片,透明能力可能没有意义;若是会出现在多种底色上的标志,它就是直接影响呈现的需求。
反复另存前,先留下原件
把一张已经有压缩痕迹的 JPEG 转成 PNG,只是无损保存当前解码后的像素,旧痕迹仍在。反过来,多次解码、编辑、再用有损设置编码,可能继续损失细节。单纯复制文件不会触发这个过程;并不是每次移动或打开图片都会让它变差。
一个实用流程是保留原始素材,从原件分别导出候选版本,用相同尺寸、背景和查看方式比较,再选择够清楚而体积合适的版本。不同软件的“质量八十”并非统一量尺,不能只比滑块数值。文件更大也未必更好,它可能只是保留了读者看不出的冗余。
记住这三点
- PNG 的无损不会恢复导出前已经丢失的细节。
- 文字边缘、照片渐变和透明背景,会让格式选择有不同重点。
- 从原件导出,在相同展示尺寸比较观感与字节数,比只看扩展名可靠。
别把例子用过头
- 本文的 JPEG 指常见有损网页图片,不代表 JPEG 家族所有编码模式。
- 改扩展名不会转换实际编码,图片尺寸与格式也不是同一个选项。
- 不同导出软件的质量数值不能直接视为相同画质。
自己试一小步
同一张含照片与小字的练习图,怎样选出适合文章插图的版本?
- 使用自己制作、不含隐私的图,把照片区域和小字放在一起,并保留原件。
- 以相同像素尺寸导出 PNG 和两档 JPEG,记录实际字节数。
- 在文章预定尺寸及相同背景下检查字边、色块和渐变。
做到这些,就算完成
- 说明自己的取舍依据,而不是预先认定某种格式一定胜出。
- 区分像素尺寸、编码格式、文件大小三个记录项。
- 没有通过反复覆盖原件来制造对照。
查原始资料
想确认一个细节,先看这份资料对应的部分,不必从头读完所有文档。
- JPEG 1 Overview (新标签页)↗
JPEG 1 包含常见 DCT 有损模式以及其他编码模式,避免把整个家族简单等同。
- PNG Specification, Third Edition (新标签页)↗
PNG 的无损图像表示、颜色样本与可选透明通道。
- Image file type and format guide (新标签页)↗
照片、清晰边缘与透明度等不同需求下的 JPEG / PNG 使用特点。
找一份资料继续练
先选一项,按下面的范围继续学;不必从头读完整门课程。
Unraveling the JPEG:照片里的方块从哪来 (新标签页)↗
先看颜色抽样,再看怎样把小块像素换成系数(DCT),以及怎样把系数按步长舍入(量化)。
查看学习准备与访问说明 →MDN 图像格式指南:只读 JPEG 与 PNG (新标签页)↗
只读 JPEG / PNG 两段,给照片、文字截图、透明图标各写选择理由。
查看学习准备与访问说明 →