之前我的博客中!《网站优化14条》https://yhzy888.github.io/2017/03/14/yahoo.html 一文中，第一条就说过减少http请求，合并css，js文件和图片等。
前端自动化的工具grunt，gulp等，还有很多在线工具等都能达到目的。今天就单说一下，前端的图片的优化。
单单以我现在的项目入手，说一下图片的优化。
第一：最大的优化就是不用图片
不用图片，小伙伴们是不是惊呆了。此处的不用图片是指那些特别简单的只要几句css代码就可以实现的图片。比如渐变色的图片，箭头图片等，还有icon font可以用来实现单一颜色的小图片呦，这样还能用css进行操控，改变字体颜色啥啥的。此处不多说。
第二：图片格式的特点
对于jpeg这种格式的文件有两种保存方式，不知道大家晓不晓得。分别是Baseline JPEG（标准型）和Progressive JPEG（渐进式）。两种格式有相同尺寸以及图像数据，扩展名也是相同的，唯一的区别是二者显示的方式不同。
这一块的内容在我的另一篇文章《Baseline JPEG 与 Progressive JPEG 的区别》https://yhzy888.github.io/2017/04/19/jpg.html有详细的解释。
若你对图片的http是否有一定的了解，我的《有关图片http请求的总结
》https://yhzy888.github.io/2017/04/19/picHttp.html一文中有解释，不太了解的可以看一下。
了解图片的http请求的有关知识后，接着进入正题。
图片优化的方案：
1.使用base64编码代替图片（此处要注意一点，base64编码的图片，浏览器不会做缓存。）
适用：图片大小小于2KB，页面上引用图片总数不多的情况。
原理：将图片转换为base64编码字符串inline到页面或css中。
优点：减少http的请求次数，并可以放到后台数据库中，只传输字符串，有较多的构建工具可以直接实现。
缺点：这种方法仅限于图片总数较少，而且图片大小小于2KB的情况。否则图片字符串会变得很长。
- 按照HTTP协议设置合理的缓存
适用：站点中不常换的图片，可以缓存到浏览器的localStorage中。
原理：缓存在浏览器的localStorage中后，每次在请求的就是缓存过的图片。
优点：减少http请求，加快图片显示速度。
缺点：这种方法，服务器中图片更换后，不会实时的展现。所以如果用这种方法建议设置一个时间间隔，来重新获取图片。比如“一天”后再重新获取。
3.合并图片sprite(雪碧图)
适用：描述性图片才适合，对于img标签设置的内容性图片，是不能合并到雪碧图的，否则会影响页面的可读性。
原理：雪碧图的制作实际上就是零星小图合并成一张大图。
优点：（1）减少http请求，提高页面的性能（最大的优点）。（2）对于整体更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。
缺点：（1）只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。（2）对于合成的sprite(雪碧图)中的单个图片的改变，维护性就比较差了，需要更改之前引入其他未更改图片的代码的background-position。（3）在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。
4.图片压缩
适用：在不得不加载图片的前提下，要进一步提升优化效果，只能通过有损或无损压缩来减少图片的大小。
原理：对图片进行无损、有损压缩，转为压缩后图片来实现。
优点：减少图片加载流量，效果比较明显。
缺点：服务器和浏览器压力增大，而且服务器需要额外的服务支持。