PNG 与 JPG 对比：何时使用这两种格式（附实例）
核心区别：两种格式如何处理压缩
PNG 和 JPG 不能互换。它们解决的是不同的问题。JPG（或 JPEG）使用有损压缩，这意味着它通过永久丢弃像素数据来减小文件大小。每次你保存 JPG 文件时，算法会扫描颜色相近的像素，将它们分组并取平均值。这样你能得到更小的文件，但如果压缩得太狠，就可能出现肉眼可见的失真。在 Photoshop 中，80 的质量设置（文件 > 导出 > 导出为）可以在几乎没有可见损失的情况下，将照片大小减少 60-70%。但如果你把质量降到 40，就会看到块状的方格——称为宏块效应——尤其是在高对比度区域，比如背景上的文字。 PNG 则相反：它使用无损压缩。每一个像素都被完好无损地保留下来。DEFLATE 压缩算法只是在数据中寻找重复的模式，并以更高效的方式存储它们，不丢弃任何东西。打开一个 PNG，保存它，再打开它——像素是完全相同的。这使得 PNG 在要求绝对保真时成为唯一的选择。 实际结果是：一张 4000×3000 的山景照片，作为高质量的 JPG 可能只有 3-5 MB。而同样一张图片，作为 PNG 可能会膨胀到 25-40 MB。对于照片来说，这额外的大小几乎带不来任何视觉上的好处。但如果是一张 1200×800 的电子表格截图，即使是 75 质量的 JPG，文字也会变得模糊，单元格边框周围会出现色边。而作为 PNG，它会保持绝对清晰，大小可能只有 300-500 KB。你选择哪种格式，应该始终基于内容做出审慎的决定，而不仅仅是凭习惯。
什么时候应该用 JPG
JPG 是为照片而生的，至今这仍是它的主场。这种格式的有损压缩巧妙地利用了人类视觉的一个特点：我们的眼睛对亮度的变化比对色彩的细微变化要敏感得多。照片中充满了渐进的色调变化——天空从深蓝褪到淡白，或者肤色在柔和光线下变换。JPG 会对这些区域进行大幅压缩，而大多数时候，我们甚至都注意不到。 在以下情况，请选择 JPG： **用于网页的相机照片。** 比如电商网站的产品图、博客的头图，或者你 Instagram 上的度假照片。在 75-85 的质量设置下，一张典型的单反照片可以缩小到 500 KB 以下，在正常屏幕尺寸下看起来和原图一模一样。 **任何文件大小是首要考虑因素的图片。** 这包括邮件附件、用于分发的 PDF 中嵌入的图片以及缩略图。谷歌的 PageSpeed 指南建议，如果可能，图片应保持在 200 KB 以下。对于照片来说，JPG 是达到这个目标最快的方式。 **真正定稿的图片。** 因为 JPG 压缩是有损的，每一次保存循环都会降低文件质量。如果你在反复修改一张图片，却一直用 JPG 格式来回保存，那纯粹是自找麻烦。把你的主文件保存为无损格式（如 PNG、TIFF 或相机的 RAW 格式），只在绝对的最后一步才导出为 JPG。 JPG 一个无法妥协的巨大限制是透明度。它不支持。如果你需要把一张产品图放到不同颜色的背景上，JPG 就派不上用场了。你必须使用 PNG 或 WebP。
什么时候应该用 PNG
PNG 的优势恰恰是 JPG 的短板，这要归功于它的无损压缩和完整的透明度支持。 **截图和导出为静态图的屏幕录像。** 任何在教程截图中费力辨认模糊文字的人，都懂用错 JPG 的痛苦。屏幕上的文字是高对比度和锐利边缘的。JPG 压缩会把它弄得一团糟，即使在高质量设置下也会产生色边和模糊。代码编辑器的截图、UI 设计稿或财务仪表盘的图片，都必须是 PNG。 **带有纯色块的 Logo、图标和插图。** 如果你的公司 Logo 需要放在不同颜色的背景上，你就需要一个透明的 PNG。从 Illustrator 导出矢量插图时（文件 > 导出 > 导出为 > PNG），每一条清晰的线条都会被保留下来。如果同样导出为 JPG，则会强制加上白色背景，并产生模糊的边缘。 **需要进一步编辑的图片。** 如果你要把文件交给设计师进行合成、遮罩或调整，请发送 PNG。它的无损特性意味着文件在不同程序间打开和保存时不会有任何质量损失。 **有大面积纯色的图片。** 信息图、图表和示意图是 PNG 的完美用例。DEFLATE 压缩算法在处理大块重复的单一颜色时效率极高。在这些情况下，PNG 有时甚至比 JPG 更小，同时看起来要好上无数倍。 那么 PNG 的缺点是什么？文件大小，但仅限于照片内容。一张 24 位 PNG 格式的细节丰富的照片，几乎总是比一张效果不错的 JPG 大得多，而质量上却看不出区别。对于照片来说，那额外的大小很少是值得的。
实例对比与真实数据
抽象的比较是一回事，但数字能让利弊变得真实。让我们来看三个包含实际文件大小的具体例子。 **示例 1：产品照片（2400×1600 像素，跑鞋的相机照片）** - JPG，质量 85：487 KB — 清晰，无可见失真 - JPG，质量 60：198 KB — 纹理略有柔化，但用作缩略图没问题 - PNG (24-bit)：6.2 MB — 与原图完全相同，但比质量 85 的 JPG 大 12 倍 结论：JPG 完胜。PNG 没有提供任何视觉上的好处，而且会对页面加载时间造成灾难性影响。 **示例 2：UI 截图（1440×900 像素，显示着文字密集页面的网页浏览器）** - JPG，质量 85：312 KB — 黑色文字周围有明显的色边，尤其是小号字体 - JPG，质量 95：890 KB — 色边减少，但在 12px 的正文文字上仍可见 - PNG (24-bit)：418 KB — 文字完美清晰，零失真 结论：PNG 是显而易见的赢家。它实际上比最高质量的 JPG 更小，而且看起来好得多。 **示例 3：公司 Logo（800×400 像素，带透明背景的扁平化设计）** - JPG，质量 90：45 KB — 强制添加了白色背景，无透明度；边缘柔和 - PNG (24-bit with alpha)：38 KB — 完美的透明度，边缘清晰 结论：毫无悬念。PNG 不仅更小，而且是唯一能胜任这项工作的格式，因为 JPG 不支持透明度。 这些数字会因图片内容而异，但你在这里看到的模式适用于成千上万的真实文件。
PNG 和 JPG 之间转换：会发生什么？
我们先来澄清一个常见的误解：把 JPG 转换成 PNG 并不会神奇地恢复丢失的数据。如果一张照片以 70 的质量保存为 JPG，它的数据就永远丢失了。将该文件转换为 PNG，只是得到了一个已有损坏图像的完美无损副本。你保留了失真，而不是消除了它们。文件变得更大了，但质量并没有变好。 然而，从 PNG 转换为 JPG，是一个常见且有用的步骤，特别是在你将照片从编辑阶段转为最终在网络上发布时。这是你第一次应用 JPG 压缩的地方，让你能够控制最终的质量。例如，CocoConvert 的 PNG 转 JPG 工具，可以让你选择 1 到 100 的质量等级。我发现对于大多数照片来说，质量 82 是一个很好的起点。 那么什么时候你会把 JPG 转成 PNG 呢？这种情况很少见，但确实存在。也许你需要为一张现有的照片添加透明背景（尽管你需要另一个工具来完成抠图本身）。或者你正在归档旧照片，希望停止任何进一步的质量下降。但请记住，原始 JPG 保存时造成的压缩损伤已经固化在文件里了。 像 CocoConvert 这样的工具真正能节省时间的地方在于批量转换。如果你从设计师那里拿到了 200 张 PNG 格式的产品照片，需要把它们放到网站上，一次性将它们全部以 80 的质量转换为 JPG 会非常省事。CocoConvert 的批量上传功能在免费计划中支持 50 个文件，在专业版中支持 500 个。不过，它不能监控文件夹或提供 API；要实现那种程度的自动化，你需要研究 ImageMagick 脚本或像 Cloudinary 这样的服务。
WebP、AVIF 和其他现代格式呢？
PNG 和 JPG 统治了网络二十多年，但它们的地位正受到挑战。由谷歌开发的 WebP 现在已被所有主流浏览器（Chrome、Firefox、Safari 14+、Edge）支持。它是一种灵活的格式，同时具有有损和无损模式。在有损模式下，WebP 文件通常比同等视觉质量的 JPG 小 25-35%。在无损模式下，它通常比 PNG 小 20-30%。 AVIF 更为新潮，它将压缩推向了极致，通常能创建比 JPG 小 40-50% 的文件。它基于 AV1 视频编解码器，并且能很好地处理 HDR 内容。目前浏览器支持已经全面普及（Chrome 85+、Firefox 93+、Safari 16+），但其编码过程较慢，相关工具链也不够成熟。 那么为什么我们仍然如此关注 PNG 和 JPG 呢？首先，是通用兼容性。JPG 和 PNG 在*任何地方*都有效，包括老旧的电子邮件客户端和离线软件。其次，是熟悉度。大多数客户和供应商都期望收到 JPG 或 PNG，甚至可能不知道如何处理 WebP 文件。最后，许多专业工作流程，从图库网站到按需打印服务，仍然完全围绕 JPG 和 PNG 上传构建。 CocoConvert 支持与 WebP 之间的相互转换，这是一个很棒的功能。我的建议是：如果你正在构建一个现代化的 Web 项目并且完全控制技术栈，可以考虑使用 WebP 作为交付格式，同时将你的主源文件保存为高质量的 JPG 或 PNG。AVIF 转换已在 CocoConvert 的开发路线图上，但目前尚不可用。
一个实用的决策框架
好了，上面讲了很多技术细节。让我们把这一切归结为一个简单的决策流程，足以应对大多数情况。 **首先，看你的内容：** - 是照片或逼真的图像吗？→ 使用 JPG，除非你必须要有透明度。 - 是截图、图表、Logo 或线条锐利的插图吗？→ 使用 PNG。 - 是否绝对需要透明背景？→ 使用 PNG（或者如果只在浏览器中使用，可以用 WebP）。 **其次，考虑目的地：** - 速度至关重要的网页？→ 照片用质量 75-85 的 JPG；图形用 PNG；如果支持，可考虑 WebP。 - 打印或长期存档？→ PNG 或 TIFF。永远不要对你计划重新编辑的文件使用 JPG。 - 电子邮件附件？→ 照片用 JPG（尽量保持在 1 MB 以下）；截图用 PNG。 - 社交媒体？→ 照片用 JPG（反正它们会重新压缩）；任何带文字的图形用 PNG。 **另外，请尽量避免这些常见错误：** - 把 Logo 保存为 JPG，然后奇怪它为什么会模糊。 - 为你所有的网站照片使用巨大的 PNG，然后奇怪网站为什么这么慢。 - 把一个低质量的 JPG 转换成 PNG，并期望它看起来更好。 - 把 JPG 质量调到 70 以下，然后惊讶于锐利边缘上出现的块状失真。 如果你实在拿不定主意，这里有一个决胜法则：每种格式都导出一个，打开它们，放大到 100%。观察图像最锐利的部分。如果 JPG 看起来很干净，那就没问题。如果你看到模糊或奇怪的颜色，那你就需要 PNG。 像 CocoConvert 的转换器这样的工具能完美地处理格式切换的技术活。但它无法为你做战略决策。这需要你了解你的图像是什么，以及它将用在哪里。这个框架应该能让这个决定变得更加直接明了。