最近在研究图片的格式和对应压缩系数对图片大小带来的影响，用这篇文章记录一下过程。
图片格式
图片格式的不同主要是源于采用的压缩方式不同，而不同的压缩方式对应着不同的压缩需求。对于前端页面而言，我们需要的是在保证肉眼可见的视觉效果不受影响的条件下尽可能的减少图片大小，尽可能减少网络资源消耗。
最通用的图片是JPEG（jpg），这是一种高质量的有损压缩方式，压缩前后的质量不容易被肉眼所察觉，兼容性好，是应用范围最广的格式。
网页上最优解决方案的图片格式是WebP，由Google推出，能够在同等画质下使用最小的图片体积，支持无损和有损压缩、透明度处理、动态图片。Webp能够满足你对网页图片的一切需求，目前只兼容chrome、Edge、oprea、Android和chrome内核的浏览器，但根据写这篇文章时的市场浏览器份额，使用WebP大概能提升79.47%的用户体验。
至于其他图片格式各有所长，可在特定的场景下使用，下面是我整理的表格
体积对比
上述都是理论基础，是骡子是马拉出来溜溜就完事了。 本文采用Photoshop CC 2015对PSD页面设计稿导出多种压缩品质下的多种格式图片，对其进行大小和细节比对。用Photoshop打开PSD文件后，点击左上角“文件”，点击“存储为”，选择存储格式之后会弹出相关选项，可选择相应压缩品质保存。
这是webp无损图片，1028Kb
这是JPEG最高品质12图片，1240Kb
以上两种1080*1920分辨率的设计稿在webp和JPEG下最高品质，肉眼看上去几乎没有区别。
第一幅图为JPEG品质为3时的图标截图，原图为163Kb， 第二幅图为Webp压缩质量为40时的图标截图，原图为124Kb。 第三幅图为Webp压缩质量为50时的图标截图，原图为144Kb。
图中文字部分几乎没有差别，但从桌子的条纹细节可以看出压缩之后视觉效果对比，JPEG品质3的条纹是比Webp压缩质量40时更清晰。若仔细看会发现略强于Webp压缩质量50，但细微差别可以忽略，可认为JPEG品质3视觉效果约等于Webp压缩质量50。
文字部分同样几乎没有差别，从桌子的条纹细节来看，JPEG品质5的条纹清晰度略强于Webp压缩质量70，可认为JPEG品质5视觉效果约等于Webp压缩质量70。
根据上述列出对比表格，同一行认为视觉效果为一致
由对比可以发现同级别视觉效果平均节省16.5%大小，与官方宣称的28%有差距，也许是样例图片对比度太强，但是网页若包含大量图片已经足够节省大量的空间。而且，当对画质要求不高时，Webp格式可突破JPEG的最低画质，即还可向下采用Webp压缩质量20、10等。
贴上所有对比图片，文件名包含了压缩指数，后缀为格式。若图片对比度要求不高，完全可采用webp格式压缩质量为10来替换JPEG品质1，这种情况可从126Kb降低到72Kb，节省43%图片大小！
格式切换实现
由于webp格式的兼容性问题，需要单独给不兼容浏览器备用方案，可采用页面初始化时进行浏览器特性检测，判断浏览器是否支持后采用对应支持的图片格式。具体实现下次再写
总结
最后，从本次对比中得出以下几个观点：
- 图片压缩与格式有关，但由压缩指数决定
- Webp同等视觉效果下可比JPEG小16.5%，其他情况可能更多
- 图片格式可按需选择，尽可能采用webp格式且保证能够兼容所有浏览器
