性能优化系列:『图片优化怎样让图片加载得更快』

---

一、压缩png

本文介绍的第三方库node-pngquant-native

1、优势

跨平台，压缩比高，压缩 png24 非常好。

2、说明文档

https://www.npmjs.com/package/node-pngquant-native

3、安装

npm install -g node-pngquant-native

4、使用

4.1、环境

我在win10 32位系统中安装nodejs的版本为5.12.0，node-pngquant-native依赖的版本号为2.1.1
如果你们在使用下面的示例代码的时候报这个错误时
> 解决方法：可以在node_modules中找到node-pngquant-native相应的文件夹，对其中的index.js文件中指定的行进行修改，我只是下方if判断的代码拿出来，直接使用，就可以了。

4.2、示例

var pngquant = require("node-pngquant-native");
var fs = require("fs");

fs.readFile("./in.png", function (err, buffer) {
	if (err) throw err;
	var resBuffer = pngquant.compress(buffer, {
		speed: 1 //1 ~ 11
	});

	fs.writeFile(
		"./out.png",
		resBuffer,
		{
			flags: "wb"
		},
		function (err) {}
	);
});

4.3、API

• pngquant.compress(buffer, option)
• 第一个参数为文件流
• 第二个参数是配置对象

第二个配置对象中有一个属性`speed``速度/质量的权衡从1(蛮力)到11(最快)。默认值是3。Speed 10的质量降低了5%，但比默认值快8倍。速度11禁用抖动并降低压缩级别。

如果其他的API见node-pngquant-native

4.4、还有一个第三库是对当前库的封装，叫jdf-png-native【版本1.1.0，环境同node-pngquant-native】，使用方法和node-pngquant-native差不多

npm i jdf-png-native

var pngquant = require("jdf-png-native");
var fs = require("fs");

fs.readFile("./in.png", function (err, buffer) {
	if (err) throw err;

	var resBuffer = pngquant.option({}).compress(buffer);

	fs.writeFile(
		"./out.png",
		resBuffer,
		{
			flags: "wb"
		},
		function (err) {}
	);
});

二、压缩jpg

本文介绍的第三方库jpegtran

1、优势

跨平台，有 Linux、Mac、 Windows 的解决方案

2、官网

http://jpegclub.org/jpegtran/

3、下载

http://jpegclub.org/jpegtran.exe

4、使用方法

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

三、压缩 gif

本文介绍的第三方库gifsicle

1、介绍

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

2、安装

https://eternallybored.org/misc/gifsicle/

3、使用方式

• 优化级别设置为不小于 2，1 的话基本不压缩

gifsicle --optimize=3 -o out.gif in.gif

• 将透明部分截去

gifsicle --optimize=3 --crop-transparency -o out.gif in.gif

四、图片尺寸随网络环境变化

• 不同网络环境（Wifi/4G/3G）下，加载不同尺寸和像素的图片，通过在图片 URL 后缀加不同参数改变。

https://m.360buyimg.com/babel/s100x100_jfs/t1/141193/14/31496/79956/6397e466Ed616b604/289a249c724c46ca.jpg!q70.dpg

可以通过改变其中100x100的尺寸加载不同的图片

五、响应式图片

• 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 描述符：表示图像的设备像素比）

六、逐步加载图像

1、使用统一占位符

2、使用LQIP

低质量图像占位符（Low Quality Image Placeholders）

2.1、安装

本库博主清测有效，环境是win11 64为，nodejs【16.13.0】，lqip【2.1.0】

npm i lqip

2.2、源码

https://github.com/zouhir/lqip-loader

2.3、示例

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);
});

然后将生成的base64 url在html的img中标签中使用

<img src="in.png" />
<br />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAECAYAAAC3OK7NAAAAAklEQVR4AewaftIAAACUSURBVAXB0QrBUBzA4d9/52zLthK1kjTl3hvYE4hn8FZehSTJQ3CluJhiM9QS2Tm T7LN3Cpl8Js3vPCN1ke z4KfHtFo9ykzl/L0QNciiPiIsZjrlspLWa4N /OB2bgFToSIoI2FGvj8Emw9QWRA0g1Y7FZcijsuFZ7robVSIBYDOGGPV54Td2Km6RDfdQjCCOUIf1XhMMa8r80zAAAAAElFTkSuQmCC" />

效果如下：

第二张图是lqip生成的base64显示的效果

2.4、方法介绍

2.4.1、lqip.base64(filePath: string)

此方法接受图像文件路径，文件必须是这些格式之一['jpeg'， 'jpg'， 'png']，并返回一个有效的Base64图像字符串，可以在web应用程序中使用，如标签source或CSS属性url。

2.4.2、lqip.palette(filePath: string)

此方法接受图像文件路径，并返回一个调色板作为HEX颜色值数组。返回的数组按照主色从高到低的顺序排序。

3、使用 SQIP

基于 SVG 的图像占位符（SVG Quality Image Placeholders）

3.1、安装

本库博主清测有效，环境是win11 64为，nodejs【16.13.0】，sqip【0.3.3】

npm i sqip

3.2、源码

https://github.com/axe312ger/sqip

3.3、示例

const sqip = require("sqip");

const result = sqip({
	filename: "./in.png",
	numberOfPrimitives: 10
});

console.log(result.final_svg);

然后将生成的svg在html中使用即可

<img src="in.png" />
<br />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1786 782">
	<filter id="b"><feGaussianBlur stdDeviation="12" /></filter>
	<path fill="#d9b883" d="M0 0h1786v781H0z" />
	<g filter="url(#b)" transform="translate(3.5 3.5) scale(6.97656)" fill-opacity=".5">
		<path fill="#000004" d="M143 33h29v55h-29z" />
		<ellipse fill="#ffe413" rx="1" ry="1" transform="matrix(-40.40891 28.5558 -12.98961 -18.38142 111.6 28.6)" />
		<ellipse fill="#350f00" cx="176" cy="84" rx="16" ry="16" />
		<path fill="#000014" d="M135.8 33.8l10-6.7 22.4 33.1-10 6.7z" />
		<ellipse fill="#efc7a4" rx="1" ry="1" transform="rotate(110.3 38.4 94.2) scale(27.9053 11.70509)" />
		<ellipse fill="#f7d49d" cx="48" cy="53" rx="78" ry="78" />
		<ellipse fill="#f8cb09" rx="1" ry="1" transform="rotate(-140.7 51.7 1.1) scale(19.87192 28.36634)" />
		<ellipse fill="#ffffba" rx="1" ry="1" transform="rotate(-75.3 103.7 -118) scale(17.05 32.69356)" />
		<path fill="#070a2d" d="M152.9 30.8l15-.6 1.2 37-15 .6z" />
		<path fill="#e19300" d="M71.8 56l16.7-17.2L102.2 52 85.5 69.2z" />
	</g>
</svg>

效果如下：

3.4、方法和返回值介绍

Input options:

• filename (required)
• numberOfPrimitives (default=8)
• mode (default=0)
• blur (default=12)

Returns:

• final_svg - string
• svg_base64encoded - string
• img_dimensions - object

七、真的需要图片吗？

• Web Font 代替图片
• 使用 Data URI 代替图片
• 采用 Image spriting（雪碧图）

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

这篇好文章是转载于：学新通技术网