关于常用JPEG、PNG、GIF、WEBP图片格局的理解

前言

在了解这三种图片格局之前，先来了解几个和图片格局相关的概念

有损/无损紧缩

图片文件格局有或许会对图片的文件巨细进行不同程度的紧缩，图片的紧缩分为有损紧缩和无损紧缩两种。

  • 有损紧缩

对图画自身的改变，在保存图画时保留了较多的亮度信息，而将色相和色纯度的信息和周围的像素进行兼并，兼并的比例不同，紧缩的比例也不同，因为信息量削减了，所以紧缩比能够很高，图画质量也会相应的下降。而且这种丢失是不可逆的，咱们不或许从有一个有损紧缩过的图片中康复出全来的图片。常见的有损紧缩手段，是依照必定的算法将接近的像素点进行兼并。
有损紧缩的原理：删去景象边际的某些颜色部分，当人们在屏幕上观看这个场景图片，大脑会运用在景象上看到的颜色填补所丢失的颜色部分。
有损紧缩的优缺陷：是坚持颜色的逐步改变，删去图画中颜色的突然改变。生物学中的许多实验证明，人类大脑会运用与邻近最接近的颜色来填补所丢失的颜色。例如，关于蓝色天空布景上的一朵白云，有损紧缩的办法就是删去图画中景象边际的某些颜色部分。当在屏幕上看这幅图时，大脑会运用在景象上看到的颜色填补所丢失的颜色部分。运用有损紧缩技能，某些数据被有意地删去了，而被撤销的数据也不再康复。 无可否认，运用有损紧缩技能能够大大地紧缩文件的数据，可是会影响图画质量。假如运用了有损紧缩的图画仅在屏幕上显现，或许对图画质量影响不太大，至少关于人类眼睛的识别程度来说差异不大。可是，假如要把一幅经过有损紧缩技能处理的图画用高分辩率打印机打印出来，那么图画质量就会有明显的受损痕迹。

例如蓝色天空布景上的一朵白云，有损紧缩时会删去白云与蓝天交界的部分，即图中红线所在位置。

关于JPEG、PNG、GIF、WEBP图片格式的理解与使用场景

  • 无损紧缩

无损紧缩的根本原理是相同的颜色信息只需保存一次。紧缩图画的软件首要会确定图画中哪些区域是相同的，哪些是不同的。包含了重复数据的图画(如蓝天) 就能够被紧缩，只要蓝天的起始点和终结点需要被记载下来。可是蓝色或许还会有不同的深浅，天空有时也或许被树木、山峰或其他的目标掩盖，这些就需要另外记载。从本质上看，无损紧缩的办法能够删去一些重复数据，大大削减要在磁盘上保存的图画尺度。可是，无损紧缩的办法并不能削减图画的内存占用量，这是因为，当从磁盘上读取图画时，软件又会把丢失的像素用恰当的颜色信息填充进来。假如要削减图画占用内存的容量，就必须运用有损紧缩办法。
无损紧缩的特色：相同的颜色信息只需保存一次。
无损紧缩的原理：首要辨别出相同颜色的区域，然后把这些相同的数据信息进行紧缩记载，也就是记载它的颜色信息、起始和停止位置。

例如红框内的区域，咱们能够把它当作由许多相同蓝色像素拼接而成，紧缩保存图片时咱们只需要记载蓝色和区域信息。

关于JPEG、PNG、GIF、WEBP图片格式的理解与使用场景

索引色/直接色

计算机在表明颜色的时分，有两种办法，一种称作索引颜色(Index Color)，一种称作直接颜色(Direct Color)。

  • 索引色。是一种以有限的办法办理数字图画颜色的技能，以节省计算机内存和文件存储，一起加速显现刷新和文件传输。即用一个数字来代表（索引）一种颜色，在存储图片的时分，存储一个数字的组合，一起存储数字到图片颜色的映射。这种办法只能存储有限种颜色，通常是256种颜色，对应到计算机体系中，运用一个字节的数字来索引一种颜色。
  • 直接色。运用四个数字来代表一种颜色，这四个数字别离代表这个颜色中红色、绿色、蓝色以及通明度（即rgba）。现在流行的显现设备能够在这四个维度别离支撑256种改变，所以直接色能够表明2的32次方种颜色。当然并非所有的直接色都支撑这么多种，为紧缩空间运用，有或许只要表达红、绿、蓝的三个数字，每个数字也或许不支撑256种改变之多

位图/矢量图

  • 位图。位图也叫做点阵图，栅格图画，像素图。简略的说，就是最小单位由像素构成的图，缩放会失真。构成位图的最小单位是像素，位图就是由像素阵列的摆放来完成其显现作用的，每个像素有自己的颜色信息，在对位图图画进行修改操作的时分，可操作的目标是每个像素，咱们能够改变图画的色相、饱和度、明度，然后改变图画的显现作用。举个例子来说，位图图画就比方在巨大的沙盘上画好的画，当你从远处看的时分，画面细腻多彩，可是当你靠的十分近的时分，你就能看到组成画面的每粒沙子以及每个沙粒单纯的不可改变颜色。
  • 矢量图，也叫做向量图。矢量图并不纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你翻开一付矢量图的时分，软件对图形象对应的函数进行运算，将运算结果[图形的形状和颜色]显现给你看。无论显现画面是大仍是小，画面上的目标对应的算法是不变的，所以，即便对画面进行倍数相当大的缩放，其显现作用依然相同(不失真)。

三种图片格局

JPEG

JPEG是有损的、选用直接色的、位图。JPEG也是一种针对照片影像而广泛运用的有损紧缩标准办法。JPEG图片格局的规划目标，是在不影响人类可分辩的图片质量的前提下，尽或许的紧缩文件巨细。这意味着JPEG去掉了一部分图片的原始信息，也即是进行了有损紧缩。JPEG的图片的长处，是选用了直接色，得益于更丰厚的颜色，JPEG十分合适用来存储照片，用来表达更生动的图画作用，比方颜色突变。

  • 特性：适用于存储颜色丰厚、层次分明的图片，不合适于线条绘图（drawing）和其他文字或图标（iconic）的图形，因为它的紧缩办法用在这些类型的图形上，得到的结果并欠好(PNG和GIF通常是用来存储这类的图形)

PNG

便携式网络图形是一种无损紧缩的位图图形格局，支撑索引、灰度、RGB三种颜色计划以及Alpha通道等特性

  • 特性：假如保存文本，线条或相似的边际清晰，有大块相同颜色区域的图画，PNG格局的紧缩作用就要比JPEG好许多，而且不会出现JPEG那样的高对比度区域的图画有损。假如图画既有清晰边际，又有照片图画的特色，就需要在这两种格局之间权衡一下了。JPEG不支撑通明度。
    PNG格局有8位、24位、32位三种办法,其间8位PNG支撑两种不同 的通明办法（索引通明和alpha通明）,24位PNG不支撑通明,32位 PNG 在24位基础上增加了8位通明通道（32-24===8）,因而可展示256级通明程度。

PNG8

PNG8是无损的、运用索引色的、点阵图,支撑不通明、索引通明、Alpha通明，都最多只能展示256（2的8次方）种颜色，所以“PNG8”格局更合适那些颜色比较单一的图画，例如纯色、logo、图标等；因为颜色数量少，所以图片的体积也会更小；

  • PNG8(不通明),默认PNG8
  • PNG8(索引色通明),简略说能够理解为静态的GIF

指定一个像素点是不是通明
可是PNG因为算法的优势,体积比较少
所以,静态GIF彻底可用PNG8代替

  • PNG8(Alpha通明),牛逼在可指定像素点的通明度,例如50%通明度

这种长处在于比PNG24/32体积小,因为也只要256色嘛
缺陷在于IE6支撑欠好,会把半通明的像素点显现满足通明

PNG24

是PNG的直接色版别。PNG24是无损的、运用直接色的、点阵图,支撑2的24次方种颜色，表现为不通明。用三个8bits别离去表明 R（红）、G（绿）、B（蓝）。R(0255),G(0255),B(0~255)，能够表达256乘以256乘以256=16777216种颜色的图片，这样PNG24就能比PNG8表明颜色更丰厚的图片,图片的清晰度也会更好，图片质量更高，当然图片的巨细也会相应增加，所以“PNG24”的图片比较合适像摄影作品之类颜色比较丰厚的图片
PNG24与JPG一样能表达丰厚的图片细节，但并不能代替JPG。图片存储为PNG24比存储为JPG，文件巨细至少是JPG的5倍，但在图片质量上的提高却微乎其微。所以除非对质量的要求极高，否则颜色丰厚的网络图片仍是引荐运用JPG

PNG32

支撑2的32次方种颜色，32位是咱们最常运用的格局，它是在PNG在24位的PNG基础上增加了8位的通明信息，支撑不同程度的半透作用

PNG8\PNG24\PNG32三者的差异在于：

PNG-32每个像素的深度为32bits，其间RGBA四个通道各占8bits。所谓的RGBA四个通道，就是红，绿，蓝，通明 这四种色值各自的巨细，都用8bits来表明（0～255）。
PNG-24的像素深度为24bits，其间RGB三个通道各占8bits。
PNG-8则是运用8位的索引色。

GIF

GIF是一种无损、运用于索引色的、位图。因为选用了无损紧缩，比较古老的bmp格局，尺度较小，而且支撑通明和动画。缺陷是因为gif只存储8位索引（也就是最多能表达2^8=256种颜色），颜色复杂、细节丰厚的图片不合适保存为gif格局。颜色简略的logo、icon、线框图合适选用gif格局。

静态GIF彻底可用PNG8代替

WEBP

WebP图片是一种一起提供了有损紧缩与无损紧缩、运用直接色的、位图，由Google开发。与png、jpg比较，相同的视觉体验下，WebP图画的尺度缩小了大约30％。另外，WebP图画格局还支撑有损紧缩、无损紧缩、通明和动画。理论上彻底能够代替png、jpg、gif等图片格局，当然目前webp的还没有得到全面的支撑。

WEBP与PNG紧缩对比

关于JPEG、PNG、GIF、WEBP图片格式的理解与使用场景

能够得出结论：

PNG 转 WebP 的紧缩率要高于 PNG 原图紧缩率，相同支撑有损与无损紧缩
转化后的 WebP 体积大幅削减，图片质量也得到保障（一起肉眼简直无法看出差异）
转化后的 WebP 支撑 Alpha 通明和 24-bit 颜色数，不存在 PNG8 颜色不行丰厚和在浏览器中或许会出现毛边的问题

下风在于现在各大浏览器对WebP的兼容性仍是有限制的，可是移动设备的发展迅猛，硬件升级快，目前兼容性及功能越来越高，在App中运用 WebP 根本没有技能阻碍。

总结

针对JPG和PNG

  • 1.单纯从图片所占存储空间的视点考虑，

颜色品种单一、主要以纯色或者突变色进行填充的图片合适运用PNG格局存储；颜色品种多样、且颜色改变明显的图片合适运用JPG格局存储。

  • 2.从移动开发视点考虑

LOGO、启动图标、按钮等合适用PNG，而布景图、广告等颜色改变多样的合适运用JPG

各种图片的运用场景及优缺陷

格局 长处 缺陷 适用场景
GIF 文件小，支撑动画、通明，无兼容性问题 只支撑256种颜色 颜色简略的logo、icon、动图
JPG 颜色丰厚，文件小 有损紧缩，重复保存图片质量下降明显 颜色丰厚的图片/突变图画
PNG 无损紧缩，支撑通明，简略图片尺度小 不支撑动画，颜色丰厚的图片尺度大 logo/icon/通明图
WEBP 文件小，支撑有损和无损紧缩，支撑动画、通明 浏览器兼容性欠好 支撑WEBP格局的app和webview

最终附上Google关于图片格局的选择指南：

关于JPEG、PNG、GIF、WEBP图片格式的理解与使用场景

参考文献：
www.cnblogs.com/Berly/artic…
https://blog.csdn.net/yuyangyg/article/details/77968494
juejin.im/post/5b32ea…
https://www.jianshu.com/p/004036b27cf5