关于前端中图片的性能优化方案

什么是前端性能优化？

什么是前端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.gif

2.逐步加载图片

这里简单介绍一下一些工具的使用方法

使用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格式图标

看了以上这些，你是否还会接着使用笨重繁琐的图片呢？

总结：以上就是关于前端静态资源中的图片资源的优化方案，希望大家看完以后能够有所收获，大家也可以动手去尝试。

参考：极客时间《前端全链路性能优化》

VirMach 便宜 VPS

QNews

QNews