# 图片优化
# 图片压缩
计算图片大小
优化图片:
- 减少像素点
- 减少每个像素点能够显示的颜色
直接使用库
- imagemin
- imagemin-pngquant 处理PNG图片
- imagemin-mozjpeg 处理jpeg图片
https://github.com/imagemin/imagemin
使用webpack https://www.npmjs.com/package/imagemin-webpack https://www.npmjs.com/package/imagemin-webpack-plugin
# 图片加载优化
- 不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。
- 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。
- 小图使用 base64 格式
- 将多个图标文件整合到一张图片中（雪碧图）
- 选择正确的图片格式：
- 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好，需要降级处理
- 小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代替
- 照片使用 JPEG
- 图片懒加载
- 使用占位图