关于前端中图片的性能优化方案
什么是前端性能优化？
什么是前端2-5-8原则?
所谓的“2-5-8原则” ， 简单说 ， 就是当用户能够在2秒以内得到响应时， 会感觉系统的响应很快 ；当用户在2-5秒之间得到响应时 ， 会感觉系统的响应速度还可以 ；当用户在5-8秒以内得到响应时 ， 会感觉系统的响应速度很慢 ， 但是还可以接受 ；而当用户在超过8秒后仍然无法得到响应时 ， 会感觉系统糟透了 ， 或者认为系统已经失去响应 ， 而选择离开这个Web站点 ， 或者发起第二次请求 。
如何性能优化？
优化的方式自然有很多种，今天呢，介绍一下图片的优化方法。
图片的文件形式以及应用场景
JPEG （Joint Photographic Experts Group）
JPEG 是一种大家最常见的图片文件形式了。
它是一种"联合图像专家小组是一种针对彩色照片而广泛使用的有损压缩图形" .
介绍：栅格图形。常用文件扩展名为 .jpg，也有 .jpeg、.jpe。JPEG 在互联网上常被应用于存储和传输照片。
我们一般在网络状态不好的时候，会看到图形从上到下一条一条线的慢慢往下加载，一般这种图片就是JPEG 的格式的。
适用场景：色彩十分鲜艳的图片、彩色图、大焦点图、banner以及结构复杂的图形。
不适用场景：线条图形和文字、图形图标，因为它的压缩算法不是很支持此类图片；并且不支持透明度。
PNG（Portable Network Graphics）
便携式网络图形是一种无损压缩的位图图形格式，支持索引、灰度、RGB 三种种颜色方案以及 Alpha 通道等特性。
介绍：栅格图形。PNG 最初是作为替代 GIF 来设计的，能够显示 256 色，文件比 JPEG或者 GIF 大，但是 PNG 非常好的保留了图像质量。支持 Alpha 通道的半透明和透明特性。最高支持 24 位彩色图像（PNG-24）和 8 位灰度图像（PNG-8）。
适用场景：纯色、透明、线条绘图，图标；边缘清晰、有大块相同颜色区域；颜色数较少但需要半透明。
不适用场景：有网络不好的状态加载较慢（因为是无损存储格式）
GIF （Graphics Interchange Format）
图像互换格式是一种位图图形文件格式，以 8 位色（即 256 种颜色）重现真彩色的 图像，采用 LZW 压缩算法进行编码
介绍：栅格图形。支持 256 色；仅支持完全透明和完全不透明；如果需要比较通用的动画，GIF 是唯一选择。
适用场景：动画，图标。
不适用场景：每个像素只有 8 比特，不适合存储彩色图片。
Webp
Webp 是一种现代图像格式，可为图像提供无损压缩和有损压缩，这使得它非常灵 活。由 Google 在购买 On2 Technologies 后发展出来，以 BSD 授权条款发布。
介绍：优秀算法能同时保证一定程序上的图像质量和比较小的体积；可以插入多帧，实现动画效果；可以设置透明度；采用 8 位压缩算法。无损的 Webp 比 PNG 小 26%，有损的 Webp 比 JPEG 小 25-34％，比 GIF 有更好的动画。
适用场景：半透明图像、图形图案等
不适用场景：彩色的图片（因为最多处理256色）
好了，上面我们已经了解了各种图片的格式，下面就让我们来看一看优化的方案吧。
优化方案
1.使用工具进行图片压缩
压缩 PNG图片
工具：node-pngquant-native
优点：跨平台，压缩比特别高，压缩png24非常好。
官方文档：https://www.npmjs.com/package/node-pngquant-native
使用node安装：
npm install node-pngquant-native接下来，给大家实际操作一下
压缩JPEG图片
工具：jpegtran
优点：同样也是跨平台，但是压缩的比率只有80-90%
官网：http://jpegclub.org/jpegtran/
安装方法：npm install –g jpegtran
使用方法：
jpegtran -copy none -optimize -outfile out.jpg in.jpg这是将'big.jpg' 变为'small.jpg'
下面让我们来看一下示例
压缩 GIF图
工具：Gifsicle
通过改变每帧比例，减小 gif 文件大小，同时可以使用透明来达到更小的文件大小，目前公认的解决方案。
安装：http://www.lcdf.org/gifsicle/
使用方式：
优化级别设置为不小于 2，1 的话基本不压缩
gifsicle --optimize=3 -o out.gif in.gif将透明部分截去 :
gifsicle --optimize=3 --crop-transparency -o out.gif in.gif2.逐步加载图片
这里简单介绍一下一些工具的使用方法
使用LQIP（Low Quality Image Placeholders） 工具
安装：npm install lqip
源码: https://github.com/zouhir/lqip-loader
在 index.js中写入以下内容：
const lqip = require('lqip');
//将文件路径
const file = './in.png';
//将输入的图片转为base64
lqip.base64(file).then(res => {
console.log(res);
});
//color
lqip.palette(file).then(res => {
console.log(res);
//这里输出的是base64的图片地址
});使用node index.js运行一下这个文件，可以输出图片的base64格式。
下面是原图和经过lqip处理后的比较
使用 SQIP（SVG Quality Image Placeholders）
介绍：基于 SVG 的图像占位符（SVG Quality Image Placeholders）
安装：
npm install sqip源码：https://github.com/axe312ger/sqip
使用方法：
在 index.js中写入以下代码
const sqip = require('sqip');
const result = sqip({
filename: './in.png',
numberOfPrimitives: 10 //可根据不同应用场景设置大小
});
console.log(result.final_svg);在本地执行 node index.js 后，将会输出一串的<svg>标签，将其直接放入HTML文件中即可。非常的方便
下面是两个图片的对比：
我们可以看到，这个方法的图片会比lqip稍微清晰那么一点点。
在实际使用中，我们经常会看到网页会有这样的模糊图片效果，一般都是在网页中先加载模糊的base64图片或者是svg图标图，然后再加载高清大图，这样会给用户更好的体验。
3.响应式图片
• JavaScript 绑定事件检测窗口大小
• CSS 媒体查询
@media screen and (max-width:640px) {
my_image{
width:640px;
}
}• img 标签属性
<img srcset="img-320w.jpg, img-640w.jpg 2x, img-960w.jpg 3x"
src=“img-960w.jpg” alt=“img”> （x 描述符：表示图像的设备像素
思考：我们真的需要图片吗？
web font 图标代替图片
精灵(雪碧)图
使用DATA URL 代替图片
SVG格式图标
看了以上这些，你是否还会接着使用笨重繁琐的图片呢？
总结：以上就是关于前端静态资源中的图片资源的优化方案，希望大家看完以后能够有所收获，大家也可以动手去尝试。
参考：极客时间《前端全链路性能优化》