核心区别：无损压缩对比有损压缩
JPEG 使用有损压缩。它丢弃人眼不太会注意到的图像信息——尤其是阴影、渐变和纹理区域中细微的色彩细节。文件更小，是因为部分原始数据被永久地去掉了。你无法从一个 JPEG 恢复原始的像素值；你得到的是一个非常好的近似。
PNG 使用无损压缩。它把每个像素值完全按记录的样子存储，然后应用一个数学算法来查找并消除冗余，而不丢弃任何信息。解压一个 PNG，你会逐位得到完全相同的原始像素数据。
大小的差别不是 PNG 的缺陷。它是准确的代价。当文件大小是优先项时，JPEG 胜出。当需要精确的像素准确度时，PNG 胜出。在两者之间选择，取决于图像包含什么以及你需要用它做什么。
PNG 还是 JPG：按内容选择
大小跟随内容。把格式与图像实际是什么相匹配：
| 图像内容 | 最佳格式 | 原因 |
|---|---|---|
| 照片 | JPG 或 WebP | 小 5–10 倍且无可见损失 |
| 截图、文字、界面 | PNG | 边缘锐利；这里往往比 JPG 小 |
| 标志、图标、透明 | PNG 或 WebP | 阿尔法透明；JPG 会把它填成白色 |
| 平涂色图形、图表 | PNG | 无损，且很好地压缩重复 |
| 你经常重新编辑的文件 | PNG | 反复保存也无质量损失 |
为什么无损压缩对照片仍产生大文件
PNG 使用 DEFLATE 压缩——与 ZIP 文件内部相同的算法。DEFLATE 在数据中查找重复的模式并紧凑地表示它们。当模式存在时它工作得很好：图表中一大片纯白、标志中重复的纹理，或截图中一连串相同的像素。
照片几乎没有这样的模式。一张森林、人脸或街道照片中的每个像素都与其邻居略有不同。像素值在各个方向上连续变化。DEFLATE 找不到多少可压缩的东西，输出文件几乎和原始像素数据一样大。
JPEG 恰好在相反的条件下工作。它应用一种把图像分解为频率分量的变换，并积极丢弃高频色彩细节——正是照片中充满的那种复杂变化。结果是在照片类内容上以最小的可见质量损失实现剧烈的大小缩减。
截图和图表：PNG 在大小上胜出之处
对于非照片内容，比较反了过来。一张网页截图有大片平涂色、锐利的文字边缘和硬边的界面元素。DEFLATE 非常高效地压缩这类内容，因为有大量重复。
把同一张截图存为 JPEG 会引入可见的伪影。JPEG 的压缩算法会模糊锐利边缘，并在高对比度过渡周围引入块状噪点——正是文字和界面元素所在之处。要让 JPEG 看起来干净，需要高到让文件最终比 PNG 还大的质量设置。
经验法则：截图、图表、标志和文字用 PNG。照片用 JPEG。
透明度：PNG 能做而 JPEG 不能的事
PNG 支持一个存储逐像素透明度的阿尔法通道。这就是为什么标志和图标几乎总是 PNG：透明区域让任何页面的背景透出来。JPEG 完全不支持透明。把带透明的 PNG 转换为 JPEG 会用单一颜色——默认是白色——填充透明区域，这是一个功能性的改变，而不仅是质量上的取舍。
如果一张图像需要透明背景，无论大小，PNG 都是正确的格式。WebP 是一个支持透明的替代品，对于内容多样的图像，它往往产生比 PNG 更小的文件。
JPEG 的重新保存问题
JPEG 每次文件被重新编码时都会丢失信息。打开一个 JPEG，编辑它，再次存为 JPEG——第一次保存的压缩伪影会在第一轮压缩之上再被压缩一次。这样做几次，可见的劣化就会出现：块状斑块、色带、模糊的边缘。PNG 没有这个问题。一个 PNG 可以打开和保存任意多次，像素数据都不会改变。
认真编辑的标准工作流程：把工作文件保留为 PNG 或原始 raw 格式，然后仅在最后一步为网页交付导出为 JPEG。这在每次编辑中都保持质量，且只产生一次有损压缩。
实际中典型的大小差异
- 智能手机照片存为 PNG: 15–25 MB。同一张照片存为高质量 JPEG：2–5 MB。以标准网页质量：低于 1 MB。
- 截图存为 PNG: 200–500 KB。同一张截图以相当的视觉质量存为 JPEG：因伪影需要高质量设置，往往比 PNG 还大。
- 带透明的标志存为 PNG: 30–100 KB。存为带白色背景填充的 JPEG：大小相近，但失去透明功能。
何时把 PNG 转换为 JPEG
如果你有 PNG 照片——也许是从相机应用或编辑软件导出的——而它们不需要透明，那么为网页发布转换为 JPEG 几乎总是正确的决定。质量设置 80–85 通常会产生一个在正常查看尺寸下与原始 PNG 无法区分、但小三到五倍的文件。
PhotoTools 在你的浏览器中把 PNG 转换为 JPG，不向服务器上传任何东西。调整质量滑块，比较预览，并下载结果。对大多数网页照片，JPEG 版本在图像实际显示的尺寸下会明显更小，且没有可见的质量损失。