最近在面试的时候被问到：平时在开发中都使用过哪些格式的图片，能否简单地介绍一下这些格式的特点以及适用场景？虽然常见的图片格式诸如JPG、PNG、GIF、WEBP都有使用过，但是遗憾的是，一直都没有深入了解过这些格式的区别和使用场景，所以导致面试过程一度陷入尴尬，面试结果也就可想而知了……吃一堑长一智，回到家还是老老实实把这些知识整理并记录下来，毕竟不能在一个地方跌倒两次。
废话不多说，开始进入正文吧！
一、基本概念
1. 有损压缩
有损压缩图像的特点：保持颜色的逐渐变化，删除图像中颜色的突然变化。
有损压缩的原理：删除景物边缘的某些颜色部分，当人们在屏幕上观看这个场景图片，大脑会利用在景物上看到的颜色填补所丢失的颜色部分。
例如蓝色天空背景上的一朵白云，有损压缩时会删除白云与蓝天交界的部分，即图中红线所在位置。
利用有损压缩技术，某些数据被有意地删除了，而被删除的数据也不会再恢复。
2. 无损压缩
无损压缩的特点：相同的颜色信息只需保存一次。
无损压缩的原理：首先辨别出相同颜色的区域，然后把这些相同的数据信息进行压缩记录，也就是记录它的颜色信息、起始和终止位置。
例如红框内的区域，我们可以把它看成由很多相同蓝色像素拼接而成，压缩保存图片时我们只需要记录蓝色和区域信息。
从本质上看，无损压缩的方法可以删除一些重复数据，减少要在磁盘上保存的图像尺寸。但是，无损压缩的方法并不能减少图像的内存占用量，这是因为，当从磁盘上读取图像时，软件又会把丢失的像素用适当的颜色信息填充进来。如果要减少图像占用内存的容量，就必须使用有损压缩方法。
3. 透明通道
透明通道(又称阿尔法通道-Alpha Channel)是指一张图片的透明和半透明度。
例如：一个使用16位存储的图片，可能5位表示红色，5位表示绿色，5位表示蓝色，1位是透明通道。在这种情况下，它要么表示透明要么不是；一个使用32位存储的图片，每8位表示红绿蓝，和阿尔法通道。在这种情况下，就不光可以表示透明还是不透明，还可以表示256级的半透明度。
4. 色彩深度
色彩深度指的是储存1像素的颜色所用的位数。如果色彩深度是n位，即有2的n次方种颜色选择。
例如，常见的PNG格式支持8位、24位、32位三种形式，其中8位PNG支持两种不同的透明形式（索引透明和alpha透明），24位PNG不支持透明，32位PNG在24位基础上增加了8位透明通道，因此可展现256级透明程度。
注：索引图片只能有完全透明和不透明两种，alpha通道图片可以是比如 50% 透明的红色之类,半透明效果。
5. 矢量图与位图
矢量图-完美的几何图形
矢量图是 通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半 径来描述，当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式。而电脑在显示的时候则通过这些数据去绘制出我们定义的图像。
矢量图的优点在于文件相对较小，并且放大缩小不会失真。缺点则是这些完美的几何图形很难表现自然度高的写实图像。
需要强调说明的是我们在web页面上所使用的图像都是位图，即便有些称为矢量图形（如矢量icon等）也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的（区别于像素绘制的图形）。
位图-神奇的拼图
位图又叫 像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像 素点，当我们把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像。所以当我们放大一幅像素图时，能看到这些拼片一样的像素点 （如下图）。
位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会失真。
尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图，即他们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样，这就是涉及到有损压缩和无损压缩的区别。
如果你理解了上面这些概念，我相信接下来学习图片格式的过程将会轻松很多。
二、常见的图片格式
1. JPG格式
特性：
- 采用有损压缩处理图像信息，压缩过程会有一定程度的数据丢失，即通常所讲的“失真”
- 可以自己控制压缩比例从而使图片达到最佳效果
- 不支持透明通道
适用场景：
适用于存储色彩丰富、层次分明的图片。
2. PNG格式
特点：
- 采用无损压缩处理图像信息，会在保证最不失真的情况下尽可能压缩图像文件的大小
- 支持透明通道
适用场景：
适用于存储颜色较少，并且主要以纯色或者平滑的渐变色进行填充的图片。
3. WEBP格式
特点：
- 支持有损压缩、无损压缩和透明通道，可以根据图片的实际情况选择压缩方式
- 在Android 4.0(API level 14)中支持有损的WebP图像，在Android 4.3(API level 18)和更高版本中支持无损和透明的WebP图像
- WebP 无损压缩的图片可以比同样大小的 PNG 小 26%；
- WebP 有损压缩的图片可以比同样大小的 JPEG 小 25-34%；
- WebP 支持无损的透明图层通道，代价只需增加 22% 的字节存储空间；
- WebP 有损透明图像可以比同样大小的 PNG 图像小3倍。
适用场景：
作为一个比较全能的图片格式，自然是适用于各种场景，可以根据实际情况选择。
三、真实场景下JPG&PNG对比
a. 色彩丰富图片
我们可以看到，JPG格式所占的存储空间为353K，而PNG格式所占的存储空间为1.61M,显示效果上也没有很大的差别。
b. 颜色种类比较单一并且颜色变化不明显的图片
我们可以看到，JPG格式所占的存储空间为1.58K，而PNG格式所占的存储空间仅为754B。
通过以上对比可以得出如下结论：单纯从图片所占存储空间的角度考虑，颜色种类单一、主要以纯色或者渐变色进行填充的图片适合使用PNG格式存储；颜色种类多样、且颜色变化明显的图片适合使用JPG格式存储。
四、总结
假如你耐心地读到了这里，那么我相信你现在最想知道的就是是在实际开发过程中到底该如何选择合适的格式存储图片呢？接下来我将结合我的个人经验和理解，总结一些常见场景下的选择方案。
1. App按照启动图标
我们知道大部分App的启动图标是比较简单的，因此它更适合使用PNG格式，并且通常放在项目的mipmap文件夹内。
2. 广告图片
对于广告图片来说，首先它需要在短时间内吸引用户的注意，因此色彩搭配可能会比较鲜艳；其次，广告图片通常是不固定的，图片内容可能会频繁更换，因此图片应该尽可能地被压缩从而达到节省用户流量的目的。综合以上两点，显然有损压缩最适合这个场景，我们可以选择WEBP或JPG格式。
3. 简单的按钮
android开发中最常见的一些Button一般都有背景图，例如登录、注册等等。这种情况应该优先考虑使用xml实现Button背景，然后再考虑使用PNG图片。详细介绍请点击这里
