我有一个 2042 x 1250 的 PNG 文件,大小为 6.1 MB。当我用 Photoshop 打开并执行“另存为 > PNG 24”并选择两个选项的压缩文件大小(另一个是不压缩)时,我仍然得到一个大约几 MB 的图像,因为它将成为网络资产,我想在 KB 中而不是 MB 中。如何智能地将此图像压缩到几千 KB 的范围?
Photoshop:如何减小 PNG 的大小以供 Web 使用
令人讨厌的细节(你没有要求)
一些图像格式,例如 JPG,支持有损压缩。当保存有损压缩图像然后重新渲染时,图像并不是 100% 完全按照您的设计,而是“接近”它,有点像草图。一些原始细节丢失了。由于不期望准确性,有损压缩图像可以存储有关原始设计的少量信息,从而产生小文件。它们甚至允许您指定结果的准确度:结果需要的准确度越低,文件就越小。
另一方面,PNG 格式在设计上支持无损压缩。这意味着在图像保存在文件中后,当它被渲染回来时,所有像素都完全按照您的设计进行渲染,而不会丢失任何细节。这很棒,但不幸的是,这意味着它必须存储大量信息才能完美渲染图像,从而产生大文件。
PNG 在将其保存到文件之前会先优化其所需的信息,但您无法像使用 JPG 那样指定您希望文件的压缩程度或准确程度。结果是原样,您无法控制文件的大小。
一些建议
话虽如此,您可以做一些事情来尝试获得更小的文件。
- 大面积的平面颜色比复杂的图案区域压缩得更好。看看你是否可以简化你的形象。
- 图像周围是否有很多负空间?尝试将其削减到最低限度。
- 你在使用透明度吗?如果不是,请考虑将图像另存为 JPG。
- 如果您出于任何原因无法将其另存为 JPG,但未使用透明度,请从保存选项中取消选中“透明度”。这将从您的最终结果中减少一点点。
- 考虑将图像分成几部分并将其组合到最终的 HTML 中,就像某种拼图一样。您可以将需要透明度的部分保存为 PNG,将其他部分保存为高度压缩的 JPG。总的结果应该不那么重。
- 使用 PNG 压缩工具(例如https://tinypng.com/)。请注意,这些工具使用有损算法。他们试图简化您的图像,以便能够将其保存为较小的文件。它们确实会显着减小文件的大小,但最终结果可能会丢失太多细节。您可以随时尝试它们并根据应用程序判断结果。
如果你分享你的图片,我可以给你一些建议。
尝试向图像添加色调分离调整图层并减少颜色数量。我发现您仍然可以通过这种方法保持高质量并减小文件大小。
6.1MB PNG 远远超出 KBs 范围,因此 Cokypup 的建议是最好的。
对于您可能创建的其他 PNG,保存它们以供 Web 使用的最佳方法是在 Photoshop 中使用“另存为 Web”而不是“另存为”保存。Photoshop 的“Save for Web”进行了一些优化,可以显着减小文件大小。
然后我会使用 PNG 的压缩工具来跟进,例如Tiny PNG
Tiny PNG 使用有损压缩,就像保存 JPG 时一样。它极大地减小了文件大小,并且正如您通过网站上的示例所看到的,它执行的有损压缩几乎不引人注意。
可能不言而喻,但许多人忘记将 Web 资源的分辨率设置为 72 像素/英寸。
图像>图像大小>将分辨率设置为 72 ppi。