认识达内从这里开始

认真做教育专心促就业

运城web前端开发关于PNG图片的优化方法

发布：运城达内教育官网
来源：互联网
时间：2019-05-31 08:32

我们在学习web前端网页优化技术的时候曾经提到过关于图片的优化方法。而今天我们就通过案例分析来了解一下，PNG图片的优化都有哪些常见方法。

运城web前端开发关于PNG图片的优化方法

一、什么是PNG

PNG的全称叫便携式网络图型(Portable Network Graphics)是目前流行的网络传输和展示的图片格式，原因有如下几点：

无损压缩：PNG图片采取了基于LZ77派生算法对文件进行压缩，使得它压缩比率更高，生成的文件体积更小，并且不损失数据。

体积小：它利用特殊的编码方法标记重复出现的数据，使得同样格式的图片，PNG图片文件的体积更小。网络通讯中因受带宽制约，在保证图片清晰、逼真的前提下，优先选择PNG格式的图片。

支持透明效果：PNG支持对原图像定义256个透明层次，使得图像的边缘能与任何背景平滑融合，这种功能是GIF和JPEG没有的。

二、PNG类型

PNG图片主要有三个类型，分别为 PNG 8/ PNG 24 / PNG 32。

PNG 8：PNG 8中的8，其实指的是8bits，相当于用2^8(2的8次方)大小来存储一张图片的颜色种类，2^8等于256，也就是说PNG 8能存储256种颜色，一张图片如果颜色种类很少，将它设置成PNG 8得图片类型是非常适合的。

PNG 24：PNG 24中的24，相当于3乘以8 等于 24，就是用三个8bits分别去表示 R(红)、G(绿)、B(蓝)。R(0~255),G(0~255),B(0~255)，可以表达256乘以256乘以256=16777216种颜色的图片，这样PNG 24就能比PNG 8表示色彩更丰富的图片。但是所占用的空间相对就更大了。

PNG 32：PNG 32中的32，相当于PNG 24 加上 8bits的透明颜色通道，就相当于R(红)、G(绿)、B(蓝)、A(透明)。R(0~255),G(0~255),B(0~255),A(0~255)。比PNG 24多了一个A(透明)，也就是说PNG 32能表示跟PNG 24一样多的色彩，并且还支持256种透明的颜色，能表示更加丰富的图片颜色类型。

三、PNG的压缩

PNG图片的压缩，分两个阶段：

预解析(Prediction)：这个阶段就是对png图片进行一个预处理，处理后让它更方便后续的压缩。说白了，就是一个女神，在化妆前，会先打底，先涂乳液和精华，方便后续上妆、美白、眼影、打光等等。

压缩(Compression)：执行Deflate压缩，该算法结合了 LZ77 算法和 Huffman 算法对图片进行编码。

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!

< 上一篇：运城达内软件开发flutter编程开发都有哪些特点

下一篇：学习web前端开发技术的一些建议 >