1、常用的图像类型
1) gif: 适用于动画效果。
2) jpg: 使用有损压缩，将图片的每个像素分解成8*8的栅格，然后对每个栅格的数据进行压缩处理，通过特殊的算法用附近的颜色填充栅格。用户可以设置质量级别，从0到100，数字越小，图片质量越差。但是有损压缩对于我们用户来说是没有影响的。
3) png：使用无损压缩，将图片出现的颜色进行索引，保留在调色板上，在显示图像时会调用调色板的颜色去填充相应位置。png又分为png8、png24和png32，png8表示支持2^8个种颜色，通常png8是最通用的web图片格式。
png8 —— 2^8色 + 支持透明 + 最小
png24 —— 2^24色 + 不支持透明
png32 —— 2^24色 + 支持透明
2.不同格式图片常用的业务场景
jpg有损压缩，压缩率高，不支持透明———大部分不需要透明图片的业务场景
png支持透明，浏览器兼容好———–大部分需要透明图片的业务场景
webp压缩程度更好，在ios webview有兼容性问题————-安卓全部
svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景————图片样式相对简单的业务场景
1) jpg or png
对于颜色较多的图像，使用jpg更好，因为png可以选择使用调色板颜色更多的png24，得到的图片比jpg大。
对于颜色简单对比强烈的图像，使用png更好，因为png使用调色板颜色最少的png8就可以满足显示效果，且得到的图片相对较小，而jpg是有损的，在清晰的颜色过渡周围会有大色块，影响显示效果。
2) 将png24|32转化为png8
某些png24|32图片的颜色较为简单，将其转变为png8的显示效果类似，但能明显减小图片的大小。可以使用完全免费的工具pngGo来完成，且可根据需要设置png所需的调色板颜色数，得到最大的压缩效果。
3.图片优化
3.1 压缩
针对真实图片情况，舍弃一些相对无关紧要的色彩信息，色彩信息越少，那么就会被压缩的越小
3.2 使用雪碧图
把你的网站上用到的一些图片整合到一张单独的图片中，这样可以减少你的网站的HTTP请求数量；
缺点： 整合的这张雪碧图可能会很大，一次加载的很慢；如果丢失，导致很多图片都加载不出来（可以分为多张雪碧图）
3.3Image inline
在构建阶段将图片（base64格式）的内容内嵌到html当中，请求html，base64图片会直接获取到，减少你的网站的HTTP请求数量
3.4使用矢量图
使用SVG进行矢量图的绘制
使用iconfont解决icon问题
3.5在安卓下使用webp
WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。