WebP是什么图片格式？你了解PNG、JPG、WebP和GIF的区别吗？

png、jpg、webp和gif是市面上最常使用的三种图片格式。在介绍它们的区别之前，先让我来简单介绍下图片的基础知识。图片是由很多像素点组成的，每个像素点只能保存一种颜色。如果说一个图片格式是8位的，就说明这个像素点可以表示2的8次方种颜色，即256种颜色。所以图片格式的位数越多，一个像素点能表示的颜色数越多，图片就越丰富。

Alpha透明通道：一个8位的灰度通道，该通道用256级灰度来记录图像中的透明度信息，定义透明、不透明和半透明区域，其中黑表示透明，白表示不透明，灰表示半透明。

下面，我分别对png、jpg、webp和gif图片从像素点位数、是否支持透明通道、是有损压缩还是无损压缩、知否支持动态图四个维度进行说明。

PNG

png有PNG8、PNG24、PNG32三种格式。PNG8表示图片的每个像素点是8位。PNG24表示图片的每个像素点是24位。PNG32表示图片的每个像素点是32位。所以，PNG32比PNG8能表示的颜色数量更多。

png支持透明通道。

PNG8有1位的布尔透明通道（要么完全透明，要么完全不透明）。PNG24用的就是Alpha透明通道,就是有8位（256阶）的布尔透明通道（所谓半透明），它有1600万种颜色。

png是无损压缩。Android之所以用png格式图片，就是为了不同手机的适配，如果用jpg的话，对于高分辨率手机，可能图片会虚。

虽然png是无损压缩。但是也有一些网站可以对png图片进行有损压缩，比如tinypng网站。正如tinypng官网上介绍的：

When you upload a PNG (Portable Network Graphics) file, similar colors in your image are combined. This technique is called “quantization”. By reducing the number of colors, 24-bit PNG files can be converted to much smaller 8-bit indexed color images. All unnecessary metadata is stripped too. The result: better PNG files with 100% support for transparency.

它的原理是把相似像素的24bit位用8bit位来表示，并且移除了不必要的元数据，是有损压缩，不过肉眼很难看出来。

png不支持动态图。

JPG

jpg又叫jpeg，两者是完全相同的压缩算法。之所以有两个名字，是因为很久之前的Windows系统仅支持扩展名为三位的文件，所以将jpeg格式简写成jpg来供Windows系统识别。当然，现在的Windows系统已经可以支持扩展名为多位数的文件了，但是由于历史原因导致的jpg就延续到至今了。

jpg是24位的。

jpg不支持透明通道。

jpg是有损压缩。每次保存都会有数据损失, 所以尽量不要多次保存。不然图像会失真。

jpg不支持动态图。

WebP

WebP是Google发明的一种图片格式。在达到图片同样效果的情况下，WebP格式的图片体积更小。

WebP刚出现时是不支持透明通道的，后来Google让WebP支持了透明通道。

WebP有无损压缩和有损压缩两种，压缩比例大。

WebP支持动态图。

GIF

gif是8位的。

gif支持透明度。

gif是有损压缩，反复保存gif，图片质量会逐渐变低。

gif可以保存多个图层，所以支持动态图。