性能优化系列:『图片优化怎样让图片加载得更快』
一、压缩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、官网
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 后缀加不同参数改变。
可以通过改变其中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^)\\\~~~
谢谢各位读者们啦(^_^)∠※
!!!
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhieckia
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22