图片是大部分网页的重要组成部分，一般情况下，我们不会太关注这方面的问题，需要显示图片直接一个 img 标签搞定。但实际上，无论是对于提高加载速度，还是对于优化用户体验，优化图片都是一个重要的手段。现在我们从图片大小角度分析图片优化。
减小图片大小
1、选择合适的图片格式
如果效果真的需要图片来表现，那么选择图片格式是优化的第一步。以下是关于各图片格式的介绍。
- jpg有损压缩，压缩率高，不支持透明
- png支持透明，浏览器兼容好，无损压缩，体积大于jpg
- png8 —— 256色 + 支持透明
- png24 —— 2^24色 + 不支持透明
- png32 —— 2^24色 + 支持透明
- webp压缩程度更好，在ios webview有兼容性问题，pc端可在检测支持webp后使用检测客户端是否支持webp
- gif 支持动图
实际应用中应根据不同场景选择图片格式：
- jpg —— 大部分不需要透明图片的业务场景
- png —— 大部分需要透明图片的业务场景
- webp —— 安卓全部、pc端可在检测支持webp后使用
- gif —— 体积不大的动画，体积过大，建议用视频代替gif图
2、确定合适的尺寸
不同终端对同一个图片需求不一样，可以根据终端加载不同的图片来节省没必要的流量。
- 一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素。
- 二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素。
- 三倍图：当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。
pc一般使用一倍图就可以，手机端建议使用二倍图。
3、压缩图片
在线工具：
- tinypng：支持压缩png、jpg，压缩率高
- 智图：腾讯出品，支持压缩png、jpeg、gif，并支持生成一张webp格式图片
- svg压缩：支持压缩svg
构建工具：
- gulp：gulp-imagemin：支持PNG, JPEG, GIF and SVG
- webpack：1、image-webpack-loader：支持PNG，JPEG，GIF，SVG和WEBP图像；2、 imagemin-webpack-plugin：可以优化一些因为loader局限性优化不了的图像。
总结
图片优化的手段总是随着浏览器特性的升级，网络传输协议的升级，以及用户对体验要求的提升而不停地更新迭代，几年前适用的或显著的优化手段，几年后不一定仍然如此。深入学习并掌握多种图片优化方法，根据不同情况进行选择，并且及时更新优化思路，以适应技术的发展，是至关重要的。
