用工具进行图片压缩
- 压缩PNG
工具：node-pngquant-native
优点：跨平台，压缩比高，特别适合压缩png24 - 压缩JPG
工具：jpegtran
有点：跨平台，有linux、windows和Mac的解决方案 - 压缩gif
工具：Gifsicle
通过改变每帧比例，减少gif文件大小，同时可以使用透明来达到更小的文件大小，是目前公认的最优解决方案。
优化图片的另一个思路
让图片的尺寸随着网络的变化而变化
简而言之就是在不同的网络环境（Wi-Fi/4G/3G）下，加载不同尺寸和像素的图片，通过在图片URL后缀加不同参数而改变加载的图片的尺寸。
响应式图片
根据用户的设备的尺寸和像素大小来展示不同尺寸的图片。
- 利用JavaScript绑定事件，检测窗口大小实现加载不同尺寸的图片
- css的媒体查询
@media screen and(max-width:640px){
...
}
- img标签属性（html5的srcset）不支持的话默认展示src的图像
<img srcset="img-320w.jpg, img-640w.jpg 2x, img-960w.jpg 3x" src ="img-960w.jpg" alt="img">
x表示图像的设备像素比
逐步加载图片，增强用户体验
方法1: 使用统一的占位符，在每一张图片后面加logo等方式，在用户没看到图像之前先占位
方法2: 使用LQIP
- 低质量图像占位符（Low Quality Image Placeholders）
- 安装：npm install lqip
const lqip = require('lqip')
const file = './in.png';
// image
lqip.base64(file).then(res => {
console.log(res);
})
// color 拿到关键色值
lqip.palette(file).then(res => {
console.log(res);
})
方法3：SQIP
- 基于SVG的图像占位符（SVG Quality Image Placeholders)
- 安装：npm install sqip
const sqip = require('sqip');
const result = sqip({
filename: './in.png',
numberOfPrimitives: 10,// 效果值
});
console.log(result.final_svg);
替代图片
有些场景是不需要图片的。
- 用web font代替图片
- 使用data uri代替图片（base 64），把base64代码用css文件的形式缓存到本地，这样用户就不用再请求图片内容
- 采用Image spirting （雪碧图）
