版权归作者所有，转载请注明出处
图片优化
实在忍受不了每次都在loading的小圈圈，“天真”的我把图片一遍一遍的压缩，结果，图片体积变小了，画质却差的不忍直视，然而加载速度还是慢的让人···，去Google一下，原来不止图片大小，网络传输带宽、图片解码、渲染加载快慢，都是影响图片加载速度的主要因素。
截止到今天，我所采用的静态图片不是jpg就是png，对比了两者：
jpg：解码速度快，压缩质量损失太严重（特别是图像有渐变的时候，整个都傻掉了）
png：虽无损数据压缩，但体积大，不太敢用32和24位的，用8位的又损失掉太多的颜色表
面临的问题：
1、画质清晰、但是体积大
2、体积小，但是画质损失太严重（不觉得像戴了一副有雾的眼镜吗）
（ps：设计图片尽量不要用阴影，渐变等样式，很大程度上增加图片体积）
无法接受不清晰的图片，但是也无法忍受一直在loading的小圈圈，然而很多网站看着图片质量挺好，加载速度也挺快的，肯定不能和大网站相比，但是总是会有一些办法的吧，去看了它们部分图片的大小，和我想的类似的是，大部分图片本身其实是用2x的大小来显示1x的效果，一张1600*480像素大小的jpg平均60~150KB。了解了jpg和png，发现还有APNG、WebP、BPG等，不做详细解释，可看性能测试对比。想说一下webp：
什么是webp？
webp标准是 Google 定制的，迄今为止也只有 Google 发布的 libwebp 实现了该的编解码 。 所以这个库也是该格式的事实标准。
虽然兼容性不是很好，但是各大互联网公司已经多方面使用了，可见它的优势还是很明显的：
1、具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；
2、同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。
来源：WebP 探寻之路 - 腾讯 ISUX – 社交用户体验设计
不管兼容性怎样，我还是想尝试一下。
如何使用webp：
1、智图
目前比较推荐的是使用腾讯的智图，ISUX 对此有专门介绍
智图同时提供了 Gulp 插件的 API
压缩前后体积对比：
压缩前后画质对比：(前：279KB,后：67KB，都是2x大小)
Gulp 插件的安装方法参阅智图项目中的 README.md
2、iSparta
看到喜欢的webp格式图片，如何转为普通格式呢？
推荐使用在线的文件转换网站 CloudConvert
1.打开 CloudConvert 上传 webp 文件
2.选择输出格式
3.点击转换，转换完成后下载即可。
最后，经过优化，清除一下缓存，加载速度好像是那么回事了。但是图片格式不是webp，🤣，还是需要再探索一下。
（还有一个.ico格式的windows图标图像还在转圈圈，怎么优化为1KB？）
