编者按:有同学问切完图还是太大了该怎么办,今天@Matuo__Basyou 介绍了几种常用的方法,从PNG到WebP,再到JPG都有相关的技巧经验分享,最后还附上一个SVG的免费福利,来收!
首先如果只是压缩的话,建议使用 ImageAlpha(专门压缩PNG)
以网上的一副海报为例(侵删)
正常从PS导出的PNG大小:
![](https://i-blog.csdnimg.cn/blog_migrate/d61f98a6c731cbcfeb08dad407886ccd.png)
原本是 1.1 MB
![](https://i-blog.csdnimg.cn/blog_migrate/1495a8cf13c760734e3dbb16a9c95816.png)
在 ImageAlpha 中打开后可以看到在默认参数下可压缩 65%。
![](https://i-blog.csdnimg.cn/blog_migrate/b4bd6d9bbc6e04506f7a90209aa3fdaa.png)
压缩后 379 KB。而且是几乎无损画面细节的。我一般在输出切图资源的时候都是靠 ImageAlpha 来完成素材的压缩。
而且 ImageAlpha 还可以通过调节颜色数位来进一步压缩,但是这样是有损的。
![](https://i-blog.csdnimg.cn/blog_migrate/360770870ea67b8e8800a0c177e3f8d1.png)
比如夸张一些将颜色数位调节到 4,细节就已经丢失的差不多了,但是能极大限度的压缩图像。
另外还有一些在线的图片压缩工具,最常用的也就是:TinyPNG 。和 ImageAlpha 的压缩默认压缩率差不多,所以具体喜欢用哪个来压缩还是看个人习惯了。
还有一种压缩方式是讲 PNG 转为 WebP 格式。
工具有 Webponize 等。
![](https://i-blog.csdnimg.cn/blog_migrate/5d4525dd6f33cb74f39bb67bad778232.png)
![](https://i-blog.csdnimg.cn/blog_migrate/dd72f0078fb920c5168c4026f4d49df6.png)
(图侵删)网上的测试结果压缩率还是非常可观的。
然而 WebP 还没有普及开来,大部分公司内部还是主要使用 PNG 来输出,所以还是要看公司大多数人的使用习惯来选择具体输出的格式。
另外如果是一些不带 Alpha (透明)通道的图,可以使用 JPG 来输出,比如移动端产品的引导页,一般情况同样大小的 JPG 格式文件都会比 PNG 小,还是以之前的图为例。
![](https://i-blog.csdnimg.cn/blog_migrate/a02a7f406ac96284f6340de07338944c.png)
JPG 只有 338KB。直接导出 JPG 不用额外压缩,而且通过 PS 还可以直接选择你想输出的质量,通过降低质量来减小图片大小。
![](https://i-blog.csdnimg.cn/blog_migrate/a3cb533eb946eb586f8b06213bc40c1a.png)
同时如果觉得降低 JPG 导出质量仍然还是偏大,还可以在 PS 里通过色调分离来进一步压缩图片的大小:
![](https://i-blog.csdnimg.cn/blog_migrate/4cc646d7517d05bb5d1b4094b74983e3.png)
当然这个也是有损的,这里将参数设置到40时,已经出现了一些肉眼可见的质量损失:
![](https://i-blog.csdnimg.cn/blog_migrate/fc9fec35a25b137b684afc915a310510.png)
所以具体怎么平衡质量与大小的平衡还是看实际情况来决定。
还有一种情况是图标素材的压缩,最理想的情况是将图片处理为矢量的 SVG 格式。一方面可以无损放大缩小,而且体积也相较于未压缩的文件来说有很大的减小。网上有很多转 SVG 的教程,我这里就不过多描述了,附上链接:Iconfont-阿里巴巴矢量图标库,在帮助里面有如何制作 SVG 图标的详细教程。
最后关于系统中控件的输出,有一条原则就是能用代码来实现就用代码,最好不要用图片,一方面用素材输出就需要好几套素材来适配 xhdpi、xxhdpi、xxxhdpi,后期维护起来非常麻烦。而且程序在加载这些素材的时候也会占用内存,对稳定性和性能都会有影响,一张图可能不太明显,但是一个页面中如果大量的使用图片素材,那么影响就是非常巨大的了。
一般软件工程师都可以对矢量图形的圆角参数,描边,填充色,投影大小,投影距离,投影颜色进行定义,所以只要素材可以转换为实际可用的参数,都是建议写清楚参数,然后由软件工程师通过程序来实现。
「有哪些看上去很高大上,实际很简单的PS技巧?」
- 《有哪些看上去很高大上,但实际很简单的PS技巧?》
- 《有哪些看上去很高大上,但实际很简单的PS技巧?(入门篇)》
- 《有哪些看上去很高大上,但实际很简单的PS技巧?(酷炫火焰篇)》
- 《有哪些看上去很高大上,但实际很简单的PS技巧?(人像篇)》
- 《有哪些看上去很高大上,但实际很简单的PS技巧?(渐变色篇)》
- 《有哪些看上去很高大上,但实际很简单的PS技巧?(二次元篇)》
原文地址:zhihu
转载地址:http://www.uisdc.com/fix-oversize-image-slice