浅谈前端性能优化（七）——图像优化

1、常用的图像类型

1) gif: 适用于动画效果。

2) jpg: 使用有损压缩，将图片的每个像素分解成8*8的栅格，然后对每个栅格的数据进行压缩处理，通过特殊的算法用附近的颜色填充栅格。用户可以设置质量级别，从0到100，数字越小，图片质量越差。

3) png：使用无损压缩，将图片出现的颜色进行索引，保留在调色板上，在显示图像时会调用调色板的颜色去填充相应位置。png又分为png8、png24和png32，png8表示支持2^8个种颜色，通常png8是最通用的web图片格式。

2、图像优化

1) jpg or png

对于颜色较多的图像，使用jpg更好，因为png可以选择使用调色板颜色更多的png24，得到的图片比jpg大。

对于颜色简单对比强烈的图像，使用png更好，因为png使用调色板颜色最少的png8就可以满足显示效果，且得到的图片相对较小，而jpg是有损的，在清晰的颜色过渡周围会有大色块，影响显示效果。

2) 将png24|32转化为png8

某些png24|32图片的颜色较为简单，将其转变为png8的显示效果类似，但能明显减小图片的大小。可以使用完全免费的工具pngGo来完成，且可根据需要设置png所需的调色板颜色数，得到最大的压缩效果。