前端性能优化之图片处理

css精灵

介绍：将所有小图片整合到一张大图上去，载入图片时一次加载完成；利用css中的background-image属性，background-position属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。优势在于能减少字节总数，减少HTTP请求；不适用于图片经常修改的场合。

转成base64位图片

介绍：base64的图片会随着html或者css一起下载到浏览器,减少了请求，webpack中的url-loader可以自动将图片转为base64，但低版本IE浏览器不兼容，css中过多使用base64图片会使得css过大，不利于css的加载；常用于只有几K的图片，或图片精灵不能处理的情况。

转为webp格式

介绍：与jpeg相同,WebP是一种有损压缩，在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%；谷歌和Open支持，火狐和ie暂时还不支持webp格式，常用于移动端开发。如天猫手机端。