前端开发中的图片优化-格式的取舍

简单介绍下在前端开发中的切图时常用的几种图片格式
我们常见的图片格式有JPG、GIF、PNG。
基本上,内容图片多为照片之类的,适用于JPG。
而修饰图片通常更适合用无损压缩的PNG。
而GIF基本上除了GIF动画外不要使用。
这里主要讲一下JPG和PNG在切图中的取舍问题

什么是合理切图?
首先,我们要弄清楚png和jpg的差异。这里套用一个别人总结的表格
02025SC4-7

从这里可以看出,png对应的是无损压缩,jpg是有损压缩。
最重要的一点,由于png的特性,与尺寸关系不大,但与颜色数关系很大。颜色数越多,png文件就越大;颜色越少,png文件就越小。

所以这里简单的总结下在切图时对图片格式的选择问题:

1.颜色数越少,尽量用png格式,切出来的图片不仅保真度高,而且图片文件也会很小。
2.反之,颜色数多了千万不要用png,而是要用jpg,可以根据自己的实际需求来选择压缩比例。
3.剩下就要看实际项目需求和经验了,切图的时候肯定是前景和背景的区别的,有些图需要很清楚,有些则不需要,为了保证用户在打开网页时,尽量缩短响应时间,而且自己的硬件设施又不是特别好的话,建议一些背景方面的图(不是主要图片)能压多小就压多小。

1 条评论

欢迎留言