文章の目录

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

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

  1. 前端性能优化(一)用一张图说明加载优化

    本文从加载的角度写一下前端性能优化. 需要说明的是下面这种脑暴图是按照从第一象限和第四象限的顺序来看的. 一.加载体积优化 我们无法控制用户的网络状况,既然想加载速度快,那当然是能不加载就不加载,能少 ...

  2. ios加载本地html懒加载图片方案,IOS开发中加载大量网络图片优化方法

    IOS开发中加载大量网络图片如何优化 1.概述 在IOS下通过URL读一张网络图片并不像其他编程语言那样可以直接把图片路径放到图片路径的位置就ok,而是需要我们通过一段类似流的方式去加载网络图片,接着 ...

  3. js实现点击图片放大效果,以及懒加载图片

    js实现点击图片放大效果,以及懒加载图片 近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观 存在两个问题 1.点击查看后,电子照片会变形 ...

  4. 【Youtobe trydjango】Django2.2教程和React实战系列八【渲染数据库数据与模板加载顺序探究】

    [Youtobe trydjango]Django2.2教程和React实战系列八[渲染数据库数据与模板加载顺序探究] 1. 准备数据 2. 渲染数据库数据到模板 3. 如何在app里加载django ...

  5. 「性能优化系列」APP内存优化理论与实践

    当一个应用同时运行越来越多的任务以及复杂的业务,Android系统的内存管理机制已经无法满足内存的释放与回收,为了应用的稳定性与性能,去控制内存的创建和回收就成为了一个重要的命题. 本篇文章主要涉及内 ...

  6. Android性能优化系列:CPU收敛优化(线程优化)

    文章目录 线程调度 线程调度的原理 线程调度模型 Android 的线程调度 线程调度小结 Android 异步方式汇总 Thread HandlerThread IntentService Asyn ...

  7. java 优化 寄存器_JVM性能优化系列-(6) 晚期编译优化

    6. 晚期编译优化 晚期编译优化主要是在运行时做的一些优化手段. 6.1 JIT编译器 在部分的商用虚拟机中,java程序最初是通过解释器(Interpreter) 进行解释执行的,当虚拟机发现某个方 ...

  8. 抖音 Android 性能优化系列:Java 内存优化篇

    内存作为计算机程序运行最重要的资源之一,需要运行过程中做到合理的资源分配与回收,不合理的内存占用轻则使得用户应用程序运行卡顿.ANR.黑屏,重则导致用户应用程序发生 OOM(out of memory ...

  9. MySQL优化系列18-应用层优化

    备注:测试数据库版本为MySQL 8.0 文章目录 一.概述 二. 常见问题 三.web服务器问题 3.1 寻找最优并发度 四.缓存 4.1 应用层以下的缓存 4.2 应用层缓存 4.3 缓存控制策略 ...

最新文章

  1. R语言使用caret包构建随机森林模型(random forest)构建回归模型、通过method参数指定算法名称、通过ntree参数指定随机森林中树的个数
  2. 每日一皮:修Bug的真实情况...
  3. c 调用易语言dll字节集,总结VC与易语言DLL互相调用的方法
  4. 计算机网络spoc作业4
  5. 多线程调用同一个对象的方法_多线程之如何创建和使用线程
  6. 将win8安装在U盘的心得(七步搞定,无需用命令行分区,无需提取镜像)
  7. AS3 JPEG Encoder应用:从Flash中保存图片
  8. 朋友圈的人脉关系的算法
  9. 安利一个免费下载VIP文档神器
  10. gbk与gb2312的区别是什么?
  11. 关于车载 时间同步 的理解
  12. 支撑起SNS的六度分隔理论和150法则
  13. [sql server] 取汉字 拼音 首字母
  14. 药店管理系统|数据库设计
  15. 数组传参的三种方法:泛型;压扁数组;数组结构
  16. 订阅号和服务号有什么区别?哪种更好?企业该如何选择?
  17. C++:函数指针进阶(三):Lambda函数详解
  18. windows10+python3.5+CUDA10.0 安装pytorch教程
  19. 魔兽世界怀旧服服务器显示离线上不去,魔兽世界怀旧服服务器断开连接怎么办-魔兽世界怀旧服怎么进不去_6137游戏网...
  20. @Validated与@Valid校验

热门文章

  1. screen投屏怎么用_Screen怎么投屏电脑?Screen投屏电脑的方法
  2. 软件采购必备:软件供应商评估表 之一(共七)
  3. JavaScript的发展史及其应用领域
  4. 哈希(散列):C语言实现 静态哈希表
  5. 2022璞跃中国第二期武汉创新加速营入营名单出炉!
  6. 同城CP群是怎么赚钱的?寂寞的人们来买单!
  7. acrobat 弹窗不停怎么办?
  8. 汇编语言复习题及详细答案1(老师给的题 自己写的答案)
  9. 【Java】轻松掌握队列操作
  10. 甲骨文公司,Sun公司