图片优化：怎样让图片加载得更快

用工具进行图片压缩

• 压缩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 （雪碧图）