文章の目录

一、压缩png
- 1、优势
- 2、说明文档
- 3、安装
- 4、使用
- - 4.1、环境
  - 4.2、示例
  - 4.3、API
  - 4.4、还有一个第三库是对当前库的封装，叫jdf-png-native【版本1.1.0，环境同node-pngquant-native】，使用方法和node-pngquant-native差不多
二、压缩jpg
- 1、优势
- 2、官网
- 3、下载
- 4、使用方法
三、压缩 gif
- 1、介绍
- 2、安装
- 3、使用方式
四、图片尺寸随网络环境变化
五、响应式图片
六、逐步加载图像
- 1、使用统一占位符
- 2、使用LQIP
- - 2.1、安装
  - 2.2、源码
  - 2.3、示例
  - 2.4、方法介绍
  - - 2.4.1、lqip.base64(filePath: string)
    - 2.4.2、lqip.palette(filePath: string)
- 3、使用 SQIP
- - 3.1、安装
  - 3.2、源码
  - 3.3、示例
  - 3.4、方法和返回值介绍
七、真的需要图片吗？
写在最后

一、压缩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^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

性能优化系列之『图片优化：怎样让图片加载得更快？』相关推荐

前端性能优化（一）用一张图说明加载优化
本文从加载的角度写一下前端性能优化. 需要说明的是下面这种脑暴图是按照从第一象限和第四象限的顺序来看的. 一.加载体积优化我们无法控制用户的网络状况,既然想加载速度快,那当然是能不加载就不加载,能少 ...
ios加载本地html懒加载图片方案,IOS开发中加载大量网络图片优化方法
IOS开发中加载大量网络图片如何优化 1.概述在IOS下通过URL读一张网络图片并不像其他编程语言那样可以直接把图片路径放到图片路径的位置就ok,而是需要我们通过一段类似流的方式去加载网络图片,接着 ...
js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观存在两个问题 1.点击查看后,电子照片会变形 ...
【Youtobe trydjango】Django2.2教程和React实战系列八【渲染数据库数据与模板加载顺序探究】
[Youtobe trydjango]Django2.2教程和React实战系列八[渲染数据库数据与模板加载顺序探究] 1. 准备数据 2. 渲染数据库数据到模板 3. 如何在app里加载django ...
「性能优化系列」APP内存优化理论与实践
当一个应用同时运行越来越多的任务以及复杂的业务,Android系统的内存管理机制已经无法满足内存的释放与回收,为了应用的稳定性与性能,去控制内存的创建和回收就成为了一个重要的命题. 本篇文章主要涉及内 ...
Android性能优化系列：CPU收敛优化（线程优化）
文章目录线程调度线程调度的原理线程调度模型 Android 的线程调度线程调度小结 Android 异步方式汇总 Thread HandlerThread IntentService Asyn ...
java 优化寄存器_JVM性能优化系列-(6) 晚期编译优化
6. 晚期编译优化晚期编译优化主要是在运行时做的一些优化手段. 6.1 JIT编译器在部分的商用虚拟机中,java程序最初是通过解释器(Interpreter) 进行解释执行的,当虚拟机发现某个方 ...
抖音 Android 性能优化系列：Java 内存优化篇
内存作为计算机程序运行最重要的资源之一,需要运行过程中做到合理的资源分配与回收,不合理的内存占用轻则使得用户应用程序运行卡顿.ANR.黑屏,重则导致用户应用程序发生 OOM(out of memory ...
MySQL优化系列18-应用层优化
备注:测试数据库版本为MySQL 8.0 文章目录一.概述二. 常见问题三.web服务器问题 3.1 寻找最优并发度四.缓存 4.1 应用层以下的缓存 4.2 应用层缓存 4.3 缓存控制策略 ...

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

文章の目录

一、压缩png

1、优势

2、说明文档

3、安装

4、使用

4.1、环境

4.2、示例

4.3、API

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

二、压缩jpg

1、优势

2、官网

3、下载

4、使用方法

三、压缩 gif

1、介绍

2、安装

3、使用方式

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

五、响应式图片

六、逐步加载图像

1、使用统一占位符

2、使用LQIP

2.1、安装

2.2、源码

2.3、示例

2.4、方法介绍

2.4.1、lqip.base64(filePath: string)

2.4.2、lqip.palette(filePath: string)

3、使用 SQIP

3.1、安装

3.2、源码

3.3、示例

3.4、方法和返回值介绍

七、真的需要图片吗？

写在最后

性能优化系列之『图片优化：怎样让图片加载得更快？』相关推荐

最新文章

热门文章