说白了的“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图片

npm install node-pngquant-native

压缩JPEG图片

jpegtran -copy none -optimize -outfile  out.jpg in.jpg

压缩 GIF图

通过改变每帧比例，减小 gif 文件大小，同时可以使用透明来达到更小的文件大小，目前公认的解决方案。

优化级别设置为不小于 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） 工具

在 index.js中写入以下内容：

const lqip = require('lqip');
//将文件路径const file = './in.png';
//将输入的图片转为base64lqip.base64(file).then(res => {    console.log(res); });
//colorlqip.palette(file).then(res => {    console.log(res);    //这里输出的是base64的图片地址});

使用node index.js运行一下这个文件，可以输出图片的base64格式。

使用 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文件中即可。非常的方便

在实际使用中，我们经常会看到网页会有这样的模糊图片效果，一般都是在网页中先加载模糊的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 描述符：表示图像的设备像素

本文来源于：关于前端中图片的性能优化方案-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。