png压缩工具开源代码

2019-12-06 09:22:41

参考地址 pngquant——一个好用的png压缩工具,这个工具已经有了npm包,自行搜索

一个可以进行有损图片压缩的命令行工具和代码库。


网址:https://pngquant.org/




1.为什么选择pngquant


传说中的神器——tinyPng

我们现在用的工具——ImageAlpha

其他

PhotoShop

Advpng

OptiPNG

Pngcrush

PngOptimizerCL

等13个PNG图片压缩优化工具




2.为什么选择pngquant


结合矢量化运算的高质量的调色板。

独特的自适应抖动算法。

跨平台:windows,Mac OS X,Linux。C语言实现,容易集成于脚本、GUI、服务器软件。

快速模式处理大量图像。

压缩率高达70%,失真率很低。



3.PNG是什么——特点



PNG,图像文件存储格式,其设计目的是试图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。

体积小

网络通讯中因受带宽制约,在保证图片清晰、逼真的前提下,网页中不可能大范围的使用文件较大的bmp、jpg格式文件。


无损压缩

PNG文件采用LZ77算法的派生算法进行压缩,其结果是获得高的压缩比,不损失数据。它利用特殊的编码方法标记重复出现的数据,因而对图像的颜色没有影响,也不可能产生颜色的损失,这样就可以重复保存而不降低图像质量。


索引彩色模式

PNG-8格式与GIF图像类似,同样采用8位调色板将RGB彩色图像转换为索引彩色图像。图像中保存的不再是各个像素的彩色信息,而是从图像中挑选出来的具有代表性的颜色编号,每一编号对应一种颜色,图像的数据量也因此减少,这对彩色图像的传播非常有利。


更优化的网络传输显示

PNG图像在浏览器上采用流式浏览,即使经过交错处理的图像会在完全下载之前提供浏览者一个基本的图像内容,然后再逐渐清晰起来。它允许连续读出和写入图像数据,这个特性很适合于在通信过程中显示和生成图像。


支持透明效果

PNG可以为原图像定义256个透明层次,使得彩色图像的边缘能与任何背景平滑地融合,从而彻底地消除锯齿边缘。这种功能是GIF和JPEG没有的。PNG同时还支持真彩和灰度级图像的Alpha通道透明度。




4.PNG是什么——文件结构



文件署名域

8字节的PNG文件署名域用来识别该文件是不是PNG文件。该域的值是:


十进制数137 80 78 71 13 10 26 10


十六进制数 89 50 4e 47 0d 0a 1a 0a


数据块(Chunk)



5.PNG是什么——数据块

PLTE

因此,调色板的长度应该是3的倍数,否则,这将是一个非法的调色板。对于索引图像,调色板信息是必须的,调色板的颜色索引从0开始编号,然后是1、2……,调色板的颜色数不能超过色深中规定的颜色数(如图像色深为4的时候,调色板中的颜色数不可以超过2^4=16),否则,这将导致PNG图像不合法。真彩色图像和带α通道数据的真彩色图像也可以有调色板数据块,目的是便于非真彩色显示程序用它来量化图像数据,从而显示该图像。

IDAT

图像数据块IDAT(image data chunk):它存储实际的数据,在数据流中可包含多个连续顺序的图像数据块。IDAT存放着图像真正的数据信息,因此,如果能够了解IDAT的结构,我们就可以很方便的生成PNG图像。

IHDR

 文件头数据块IHDR(header chunk):它包含有PNG文件中存储的图像数据的基本信息,并要作为第一个数据块出现在PNG数据流中,而且一个PNG数据流中只能有一个文件头数据块。

IEND

 图像结束数据IEND(image trailer chunk):它用来标记PNG文件或者数据流已经结束,并且必须要放在文件的尾部。如果我们仔细观察PNG文件,我们会发现,文件的结尾12个字符看起来总应该是这样的:00 00 00 00 49 45 4E 44 AE 42 60 82







6.参数分析

用法: pngquant [options] [ncolors] --pngfile


--help   帮助(简写-h)

--force  覆盖已存在的导出文件(-f)

--skip-if-larger当转换的文件比源文件更小时保存文件

--output 目标文件路径(-o),与--ext用法相似

--ext 为导出文件添加一个后缀名,例如--ext new.png

--quality min-max为图片转换加一个品质限制,如果转换后的图片比最低品质还低,就不保存,并返回错误码99.取值范围 0-100

--speed 转换速度与品质的比例。1(最佳品质),10(速度最快),默认是3

--verbose 打印出处理的状态


7.示例代码


  • 2019-12-04 10:46:26

    nuxt.js项目中全局捕获异常并生成错误日志全过程

     需求:客户在使用过程中页面报错时,可以生成错误记录传回服务器,以便改进。   步骤:     一.全局捕获异常,     二.发送到服务端,     三.生成错误日志。   一.全局捕获异常 如图,vue提供了errorHandle这个方法来处理全局异常,更多详细内容参见官网。

  • 2019-12-04 10:47:59

    nuxt.js项目中全局捕获异常并生成错误日志全过程

     需求:客户在使用过程中页面报错时,可以生成错误记录传回服务器,以便改进。   步骤:     一.全局捕获异常,     二.发送到服务端,     三.生成错误日志。   一.全局捕获异常 如图,vue提供了errorHandle这个方法来处理全局异常,更多详细内容参见官网。

  • 2019-12-04 10:48:18

    vue 项目资源文件 static 和 assets 不说区别直接使用?

    assets中资源会webpack构建压缩到你代码中,而static文件直接引用。 static 中长存放类包、插件等第三方的文件,assets里放属资源文件比如自己资源图片、css文件、js文件。 引入资源的方式static文件夹可以使用~/static/方式引入, assets文件夹可以使用 ~@/assets 方式引入

  • 2019-12-05 17:01:36

    Vue 结合 Axios 接口超时统一处理

    当网路慢的时候。又或者公司服务器不在内地的时候,接口数据请求不回来超时报错的情况相信大家肯定遇到过的,这里我把我公司项目请求超时的处理方法分享下,希望看过后有帮助。

  • 2019-12-05 17:13:40

    JS模板工具lodash.template的简单用法

    lodash是从underscore分支的一个项目,之前我写了一篇JS模板工具underscore.template的简单用法,lodash跟underscore很相似,这也简单介绍一下lodash的template方法。 先把underscore的文章中用过的代码贴过来,把underscore的js文件换成lodash的js,其他一字不改,然后我们试试: