如何减小 PNG 文件大小(无损 vs 有损)
在不损害画质的前提下缩小 PNG 文件的实用技巧
立即优化 PNGPNG 是网络上最受信赖的图片格式之一。它能保留每一个像素,支持透明度,并以极其清晰的效果呈现 logo、截图和图形。但高质量是有代价的:PNG 文件可能非常大。一张高分辨率截图就能轻松达到 5 MB 甚至更多,一批带透明背景的产品图可以占用几十兆的空间。
大体积的 PNG 会拖慢网站加载速度、让邮件附件变得臃肿、占用存储空间,还会让网速慢的用户感到抓狂。好消息是,你完全可以大幅减小 PNG 文件大小,而不需要换格式或牺牲你选择 PNG 的那些优点。关键在于知道该用哪些技巧,以及按什么顺序来用。
这篇指南会带你了解所有缩小 PNG 的实用方法——从保留每个像素的无损优化,到用微小的画质损失换取大幅体积缩减的有损压缩。读完后,你就能准确判断在任何场景下该用哪种方法。
为什么 PNG 文件会变得这么大?
理解 PNG 文件变大的原因,有助于你选择正确的压缩策略。有几个因素会导致这个问题。
无损压缩有其局限性。 PNG 使用 DEFLATE 算法,通过查找像素数据中的重复模式来进行高效编码。但照片和有平滑渐变的图像包含大量不同的颜色值,压缩器很难找到冗余数据。把一张照片保存为 PNG,文件可能比保存为 JPG 大五到十倍,因为 DEFLATE 根本无法像有损算法那样大力压缩照片数据。
尺寸比你想象的更重要。 一张 4000 x 3000 像素的图片包含 1200 万个像素。在带透明度的 32 位 PNG 中,每个像素在压缩前需要 4 字节的原始数据,所以未压缩的数据量大约是 48 MB。即使经过 DEFLATE 压缩,生成的文件仍然会有好几兆。把尺寸缩小一半,像素数量就减少 75%,压缩后的文件大小也会大致按比例下降。
色彩深度增加体积。 24 位 PNG 每个像素可以存储超过 1600 万种颜色。32 位 PNG 加上了用于透明度的 Alpha 通道,每个像素的数据量增加了三分之一。很多图像——特别是图标、图表和插图——实际上只用了很少的颜色,却携带了远超需要的色彩信息。
元数据在不知不觉中让文件膨胀。 EXIF 数据、ICC 色彩配置文件、文本块和时间戳可以给 PNG 文件增加几十 KB 的体积。对于图标和缩略图这样的小图片,元数据可能占到总文件大小的很大比例。要了解更多关于图片元数据的内容,请参阅我们的删除图片元数据指南。
无损缩小 PNG 文件的方法
无损技术在保持图像像素完美的同时减小文件大小。每一种颜色、每一条边缘、每一个透明区域都完全保持原样。这些方法应该始终是你的首选。
优化 DEFLATE 压缩。 并非所有 PNG 编码器的压缩效果都一样好。从图形编辑器快速导出的 PNG 通常使用的是快速但次优的 DEFLATE 配置。用更高效的压缩器重新编码同一张图片,可以在不改变任何像素的情况下减少 10% 到 30% 的文件大小。pic2PNG 使用 @jsquash/png WASM 库,在你转换或重新导出图片时应用优化的无损压缩,榨取 DEFLATE 算法能节省的每一个字节。
去除不必要的元数据。 删除 EXIF 数据、ICC 色彩配置文件、文本注释和时间戳,这些东西会增加体积却不影响可见图像。这对于手机或相机拍摄的图片尤其重要,因为它们会嵌入 GPS 坐标、设备信息和相机设置。pic2PNG 在转换过程中自动去除元数据,确保你的输出文件既精简又保护隐私。
缩小尺寸。 把图片调整到实际显示的大小。当容器只有 1200 像素宽时,提供一张 4000 像素宽的 PNG 毫无意义。使用 pic2PNG 在导出前批量调整图片尺寸,你会看到文件大小显著下降,而在显示尺寸下不会有任何画质损失。
裁剪到内容区域。 如果你的图片边缘有大片空白或均匀色块,裁剪到实际内容区域可以去掉那些增加文件大小但没有视觉价值的像素。pic2PNG 包含裁剪工具,让你把图片修剪到恰好需要的尺寸。
有损 PNG 压缩:何时使用以及如何使用
有时候无损优化还不够。当你需要达到目标文件大小,或者你的 PNG 是照片类型、无损压缩效果不好时,有损 PNG 压缩就成了一个强大的选择。
工作原理。 有损 PNG 压缩通过减少图像中不同颜色的数量并近似像素值,为 DEFLATE 压缩器创造更多可利用的冗余。图像仍然是有效的 PNG 文件,完全支持透明度,但细微的颜色变化会被平滑或合并。结果可以比无损原图小 50% 到 80%,而人眼几乎看不出区别。
质量级别。 大多数有损 PNG 工具允许你设置质量级别,通常是 0 到 100 的范围。在 80 到 90 时,大多数图片与原图的差异是察觉不到的。在 60 到 80 时,训练有素的眼睛可能会注意到渐变中的轻微色带或纹理细节的减少。低于 60 时,伪影会更明显,最好只用于缩略图或预览图。pic2PNG 提供由 browser-image-compression 驱动的可选有损压缩步骤,让你精确调节质量级别以满足需求。
何时使用有损压缩。 有损 PNG 压缩在以下场景表现出色:页面速度很重要的网页图片、颜色丰富或照片类内容的图片、以及需要 PNG 透明度但无法接受多兆字节文件的情况。在批量处理大量图片时也很有用,即使每张只减少 40%,累积起来的带宽和存储节省也相当可观。
何时避免有损压缩。 不要对像素画、有精确颜色编码的技术图表、或将要进一步编辑或合成的图像使用有损压缩。每一轮有损压缩都会引入累积的画质退化。如果你打算做额外的编辑,保留一份无损主文件,只在最终导出时应用有损压缩。
PNG 文件大小缩减技术一览
下表总结了每种技术、是否保留原始图像的完美性,以及你可以期待的典型文件大小影响。
| 技术 | 无损? | 保留透明度? | 典型效果 |
|---|---|---|---|
| 优化 DEFLATE 压缩 | 是 | 是 | 减少 10-30% |
| 去除元数据(EXIF、ICC、文本) | 是 | 是 | 减少 5-20%(因情况而异) |
| 调整到显示尺寸 | 是(新尺寸下) | 是 | 减少 50-90% |
| 裁剪到内容区域 | 是(新尺寸下) | 是 | 减少 10-60% |
| 缩减调色板 | 否 | 是 | 减少 30-70% |
| 有损质量压缩 | 否 | 是 | 减少 40-80% |
| 转为 JPG(照片) | 否 | 否 | 减少 60-90% |
| 转为 WebP | 两种都支持 | 是 | 减少 25-50% |
按正确的顺序组合使用这些技术效果最好。先调整尺寸,然后应用无损优化并去除元数据,最后只在文件仍然太大时才添加有损压缩。
有时候你不该使用 PNG
减小 PNG 文件大小的最佳方法,有时候就是不再使用 PNG。这种格式在某些类型的图像上表现出色,但对其他类型来说并不合适。
照片应该用 JPG。 如果你的图片是没有透明区域的照片,JPG 在人眼看不出区别的质量级别下,生成的文件比等效 PNG 小 60% 到 90%。PNG 本来就不是为照片内容设计的,它的无损压缩在面对 JPG 专为此类图像打造的有损算法时毫无竞争力。
WebP 兼顾了两者的优点。 如果你的目标受众使用的是现代浏览器,WebP 能提供比 PNG 和 JPG 都小的文件,同时支持透明度以及有损和无损两种模式。无损 WebP 通常比无损 PNG 小 25%。要了解详细对比,请阅读我们的 PNG vs JPG vs WebP 指南。
在 PNG 最擅长的地方继续用它。 PNG 仍然是 logo、图标、截图、带文字的图形以及需要像素级精确透明度的图像的最佳选择。当透明度不可或缺且图像颜色相对较少或有大面积均匀色块时,PNG 压缩效率很高,文件大小也可以保持在合理范围。
关键问题是:这张图片是否需要透明度或无损画质?如果是,用上述技术优化 PNG。如果不是,考虑 JPG 或 WebP 是否更适合。要了解更多关于 PNG 格式本身的信息,请参阅我们关于 PNG 是什么以及它如何工作的文章。
最佳 PNG 缩减工作流程
综合以上所有内容,以下是高效减小 PNG 文件大小的推荐步骤:
- 先调整尺寸。 把图片缩放到你实际需要的尺寸。这是减小文件大小最有效的手段。使用 pic2PNG 批量调整尺寸。
- 裁剪到内容区域。 去除图片边缘不必要的空白区域。
- 应用无损优化。 用优化的 DEFLATE 压缩重新编码 PNG。pic2PNG 使用 @jsquash/png WASM 库自动完成这一步。
- 去除元数据。 删除 EXIF 数据、ICC 配置文件和文本块。pic2PNG 在转换时默认去除元数据。
- 如果可以接受的话,应用有损压缩。 如果文件仍然太大且能容忍轻微的画质损失,启用有损压缩并将质量级别设为 80 或更高(适用于大多数场景)。
- 考虑转换格式。 如果图片是没有透明度的照片,改为导出 JPG。如果面向现代浏览器,可以考虑用 WebP 获得更小的文件。
这个顺序很重要。先调整尺寸再优化,确保压缩器处理更少的像素。在有损压缩之前去除元数据,避免把质量预算浪费在不可见的数据上。最后再评估格式替代方案,意味着你在换格式之前已经在 PNG 格式内做了所有能做的。
使用 pic2PNG,你可以在一次操作中完成工作流程的每一步:调整尺寸、裁剪、优化、去除元数据和导出——全部在浏览器中完成,无需上传、无需注册,完全保护隐私。用你的下一批 PNG 试试看,亲身体验效果吧。