JPEG 是 Web 上最常用的图片类型，并且有充分的理由：几十年来，JPEG 几乎一直是编码照片的正确选择。用例就在名称中：JPEG 代表“Joint Photographic Experts Group”（联合图像专家组），该委员会负责在 1992 年首次发布该标准。您会看到 JPEG 的文件扩展名为 .jpg 或 .jpeg，尽管后者在现代用法中很少见。
虽然无损压缩会尽可能被动地压缩图片数据，但 JPEG 的有损压缩会寻找机会，通过对图片数据进行微小的、通常难以察觉的更改来提高压缩效率。JPEG 将图片数据编码为 8x8 像素块，并以算法方式描述这些块（而不是其中的单个像素）。
这在纸面上听起来可能像是一个学术上的区别：“GIF 使用由像素组成的网格，而 JPEG 使用由较小的像素网格组成的网格。”但在实践中，这种使用块而不是像素的方式意味着 JPEG 非常适合更常见的图片用例：构成真实世界照片的那种微妙的、分层的渐变。
即使使用 GIF 样式编码描述一个非常简单的单像素渐变也会非常冗长
第一行，第 1 列到第 9 列是 #00CC00。第一行，第 10 列是 #00BB00。第一行，第 11 列是 #00AA00。第一行，第 12 列是 #009900。第一行，第 13 列是 #008800。第一行，第 14 列是 #007700。第一行，第 15 列是 #006600。第一行，第 16 列是 #005500。
使用 JPEG 样式编码描述渐变要高效得多
块 1 是 #00CC00。块 2 是从 #00CC00 到 #005500 的渐变。
JPEG 的真正优势在于量化图片中“高频”细节的级别，而且通常难以察觉。因此，将图片另存为 JPEG 通常意味着以可衡量但并非一定可见的方式降低图片质量。正如您所了解的，GIF 样式的调色板量化是一种相对简单的操作：减少图片中的颜色数量会生成较小的文件，但人类的眼睛很容易发现这种方式。
另一方面，JPEG 在如何执行量化方面很聪明：JPEG 的有损压缩尝试以一种与我们自己的心理视觉系统量化周围世界的方式大致匹配的方式量化图片源。实际上，JPEG 试图丢弃我们一开始不太可能看到的细节，因此它可以偷偷地对我们进行额外的压缩。
人类的心理视觉系统在“压缩”您不断接收的图像方面做了很多工作。当我瞥一眼外面的小花园时，我可以立即处理大量信息：例如，单个颜色鲜艳的花朵非常突出。我立刻注意到土壤是灰蒙蒙的，叶子正在下垂 - 我的植物需要浇水了。我确实看到了，但没有完全处理的是任何单个下垂叶子的确切形状、大小、角度和绿色阴影。我当然可以积极寻找那种细节级别，但这对于被动接收来说信息量太大了，而且没有任何实际好处。因此，我的心理视觉系统会进行一些自己的量化，将该信息提炼为“叶子正在下垂”。
实际上，JPEG 的工作方式相同。JPEG 的有损压缩以一种可能根本不会在我们自然的“有损”心理视觉系统中注册的方式降低图片中的细节级别（如果在合理的范围内完成）——并且与单独的无损压缩相比，为节省带宽提供了更多机会。
例如，JPEG 利用了我们心理视觉的一个主要弱点：我们的眼睛对亮度的差异比对色调的差异更敏感。在应用任何压缩之前，JPEG 使用一种称为“离散余弦变换”的过程将图片分成单独的频率（在某种意义上说是“层”），这些频率表示亮度（亮度）和色度（颜色），或“亮度”和“色度”。
亮度层经过最小程度的压缩，仅丢弃人眼不太可能注意到的细小细节。
色度层被显着减少。与像 GIF 那样简单地量化色度层的调色板不同，JPEG 可以执行一个称为“子采样”的过程，其中色度层以较低的分辨率存储。当通过有效地将较低分辨率的色度层拉伸到亮度层上进行重组时，差异通常难以察觉。如果我们并排比较原始图片源和我们的 JPEG，则色调的细微差异可能会很明显，但只有当我们确切知道要寻找什么时才会这样。
话虽如此，JPEG 并非完美无缺。尽管 JPEG 在偷偷地对我们进行压缩方面很巧妙，但如果做得太过分，就会变得非常明显。事实上，如果您在 Web 上花费了大量时间（尤其是在很久以前的日子里），您可能已经注意到 JPEG 压缩过度的结果
过于激进地压缩图片数据意味着细节级别的降低程度超出了我们心理视觉系统自然会忽略的程度，因此幻觉被打破了。细节缺失变得很明显。由于 JPEG 以块为单位进行操作，因此这些块之间的接缝可能会开始显现。
渐进式 JPEG
渐进式 JPEG (PJPEG) 有效地重新排序了渲染 JPEG 的过程。“基线” JPEG 在传输进行时从上到下渲染，而渐进式 JPEG 将渲染分解为一组全尺寸“扫描”（同样是从上到下完成），每次扫描都会提高图片质量。整个图片立即出现，尽管是模糊的，并且随着传输的继续而变得更清晰。
这在纸面上看起来似乎只是一个纯粹的技术差异，但它具有巨大的感知优势：通过立即交付图片的完整尺寸版本而不是空白空间，PJPEG 可以让最终用户感觉比基线 JPEG 更快。此外，除了最小的图片外，与基线 JPEG 相比，将图片编码为 PJPEG 几乎总是意味着更小的文件大小 - 尽管不多，但每一字节都有帮助。
但是，有一个很小的权衡：解码 PJPEG 在客户端上更复杂，这意味着在渲染期间会对浏览器和设备的硬件施加更多压力。渲染开销很难用精确的术语来量化，但这非常小，并且不太可能被注意到，除非是在性能严重不足的设备上。这是一个值得做的权衡，总而言之，每当将图片编码为 JPEG 时，渐进式都是一种明智的默认方法。
使用 JPEG
您可能会对所有这些信息感到有些不知所措。不过，对于您的日常工作来说，有个好消息：JPEG 压缩的更多技术细节已被抽象化，而是以单个“质量”设置的形式公开：一个介于 0 到 100 之间的整数。0 提供最小的可能文件大小，并且正如您可能期望的那样，视觉质量最差。当您从 0 提高到 100 时，质量和文件大小都会增加。当然，此设置是主观的 - 并非每个工具都会以相同的方式解释值“75”，并且感知质量始终会根据图片的内容而变化。
为了理解此压缩设置的工作原理，让我们使用一个常用的基于 Web 的图片文件优化工具：Squoosh。
Squoosh（由 Chrome 团队维护）提供了在不同编码和配置图片输出方法之间的并排比较，配置选项范围从 0-100 的全局“质量”滑块到微调色度与亮度重采样的细节的能力。“质量”数字越低，压缩率越高，生成的文件越小。
在此处，当“质量”设置为 60 时，文件大小将减少 79%。不要被此标签的含义所迷惑：即使执行并排比较，整个量程范围内质量的差异对于人眼来说也是难以察觉的。
要将您的源图片转换为渐进式 JPEG，请选中“高级选项”下标记为“渐进式渲染”的框。其中一些配置选项几乎肯定比一般的 Web 项目需要的更深入，但它们可以让您更仔细地了解您所学的有关 JPEG 编码的知识如何影响现实世界用例中的文件大小和质量。
实际上并没有太多需要注意的地方，尽管我们现在知道 JPEG 在内部有多么复杂。Squoosh 只是无数种保存优化 JPEG 的方法之一，所有这些方法都使用类似的方法来确定压缩级别：一个介于 0 到 100 之间的整数。
鉴于 JPEG 编码的所有复杂性都被提炼为一个整数，尤其是在如此多的内容取决于图片的具体内容时，确定图片的理想压缩级别是一项精细的游戏。就像思考眨眼或呼吸一样，考虑 JPEG 压缩设置会改变我们感知它们的方式。
现在在写完所有这些内容后，再回头看看外面，我的心理视觉处理变得更加手动化 - 现在我正在看单个叶子，即使画面本身（可以这么说）没有改变。这使得配置 JPEG 压缩有点令人担忧：您确切地知道要寻找哪种视觉缺陷。首先，通过考虑图片压缩，您正在关注单个叶子 - 我们已经准备好发现轻微的模糊和偶尔出现的压缩伪影。在微调 JPEG 压缩设置时，您越努力寻找伪影，就越有可能找到它们，而用户可能不会找到它们。即使该用户确切地知道要寻找什么，他们也不太可能带着对 JPEG 压缩的思考来访问页面。
因此，避免想要放大图片以寻找伪影的本能 - 甚至不要过于仔细地查看我们图片中您知道伪影会首先出现的部分。对于用户而言，微弱的伪影与他们有损的心理视觉系统通常会忽略的微小细节融为一体。事实上，即使您了解 JPEG 尝试使用的技巧，除非您去寻找，否则您也不会在浏览 Web 时注意到那些相同的伪影。因此，几乎总是可以放心地将 JPEG 压缩稍微降低到您认为可能被注意到的程度 - 尤其是在由于直接样式或周围布局设置的约束，该图片将以小于其固有尺寸显示时。