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格式,常用于移动端开发。如天猫手机端。