图片格式

GIF（Graphics Interchange Format）

Gif图像互换格式（GIF，Graphics Interchange Format）是一种位图图形文件格式，以8位色（即256种颜色）重现真彩色的图像。它实际上是一种压缩文档，采用LZW压缩算法进行编码，有效地减少了图像文件在网络上传输的时间

特性

1. 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。
2. 可插入多帧，从而实现动画效果。
3. 可设置透明色以产生对象浮现于背景之上的效果。
4. 由于采用了8位压缩，最多只能处理256种颜色，故不宜应用于真彩色图片。

其它

在早期，图像互换格式所用的LZW压缩算法是CompuServe所开发的一种免费算法。然而令很多软件开发商感到意外的是，图像互换格式文件所采用的压缩算法忽然成了Unisys公司的专利。据Unisys公司称，他们已注册了LZW算法中的W部分。如果要开发生成（或显示）图像互换格式文件的程序，则需向该公司支付版税。在专利失效前曾引起部分开放源代码社区发起“Burn all GIFs”的运动抵制使用图像互换格式格式。因此，人们开始寻求一种新技术，以减少开发成本。PNG（Portable Network Graphics，便携网络图形）标准就在这个背景下应运而生了。它一方面满足了市场对更少的法规限制的需要，另一方面也带来了更少的技术上的限制，如颜色的数量等。

在2003年6月20日，LZW算法在美国的专利权已到期而失效。在欧洲、日本及加拿大的专利权亦已分别在2004年的6月18日、6月20日和7月7日到期失效。尽管如此，PNG文件格式凭着其技术上的优势，已然跻身于网络上第三广泛应用格式。与图像互换格式相关的专利将很可能于2006年8月11日过期。[1]

PNG（Portable Network Graphics）

便携式网络图形（Portable Network Graphics，PNG）是一种无损压缩的位图图形格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。PNG的开发目标是改善并取代GIF作为适合网络传输的格式而不需专利许可，所以被广泛应用于互联网及其他方面上。

PNG 文件几乎都使用 PNG 或者 png 作为扩展名，其 MIME 类型为 image/png

特性

• 支持256色调色板技术以产生小体积文件

• 最高支持24位真彩色图像以及8位灰度图像。

• 支持Alpha通道的透明/半透明特性。

• 支持图像亮度的Gamma校准信息。

• 支持存储附加文本信息，以保留图像名称、作者、版权、创作时间、注释等信息。

• 使用无损压缩。

• 渐近显示和流式读写，适合在网络传输中快速显示预览效果后再展示全貌。

• 使用CRC防止文件出错。

• 最新的PNG标准允许在一个文件内存储多幅图像。

PNG与其它格式比较

PNG vs GIF

• 一般情况下将静态GIF图像无损转换为PNG后可以压缩率会略为提高（前提是同样采用8位索引模式）。

• PNG可提供更大颜色深度的支持，包括24位（8位3通道）和48位（16位3通道）真彩色。加入α通道后可进一步支持每像素64位的表示。

• 超过8位色深的PNG图像转换为GIF时，图像质量会由于分色（颜色数减少）而下降。

• GIF原生支持动态图像，PNG只能通过非标准实现，在PNG的基础上另有发展出支持动画的APNG和MNG格式，但目前普及度不高。

PNG在IE6等旧浏览器上的支持较差。

PNG vs JPEG

JPEG可以对照片（或类似）图像生成更小的文件，这是由于JPEG采用了一种针对照片图像的特定有损编码方法，这种编码适用于低对比，图像颜色过渡平滑，噪声多，且结构不规则的情况下。如果在这种情况下用PNG代替JPEG，文件尺寸增大很多，而图像质量的提高有限。相应的，如果保存文本，线条或类似的边缘清晰，有大块相同颜色区域的图像，PNG格式的压缩效果就要比JPEG好很多，并且不会出现JPEG那样的高对比度区域的图像有损。如果图像既有清晰边缘，又有照片图像的特点，就需要在这两种格式之间权衡一下了。JPEG不支持透明度。

由于JPEG是有损压缩，会产生迭代有损，在重复压缩和解码的过程中会不断丢失信息使图像质量下降。由于PNG是无损的，保存将要被编辑的图像来说更加合适。虽然PNG压缩照片图像也有效，但有专门针对照片图像设计的无损压缩格式，比如无损JPEG2000，Adobe DNG等。总的来说这些格式都不能做到适用所有图像。对于将要发布的图像可以保存成JPEG，用JPEG编码一次不会造成明显的图像有损。

JPEG

JPEG是一种针对照片视频而广泛使用的有损压缩标准方法。

JPEG本身只有描述如何将一个视频转换为字节的数据流（streaming），但并没有说明这些字节如何在任何特定的存储媒体上被封存起来。JPEG的压缩方式通常是破坏性数据压缩（lossy compression），意即在压缩过程中图像的品质会遭受到可见的破坏，有一种以JPEG为基础的标准Lossless JPEG是采用无损的压缩方式，但Lossless JPEG并没有受到广泛的支持。

优点

JPEG/JFIF是最普遍在万维网（World Wide Web）上被用来储存和传输照片的格式。JPEG在色调及颜色平滑变化的相片或是写实绘画（painting）上可以达到它最佳的效果。在这种情况下,它通常比完全无失真方法作得更好,仍然可以产生非常好看的影像（事实上它会比其他一般的方法像是GIF产生更高品质的影像,因为GIF对于线条绘画（drawing）和图示的图形是无失真,但针对全彩影像则需要极困难的量化）。

缺点

它并不适合于线条绘图（drawing）和其他文字或图示（iconic）的图形,因为它的压缩方法用在这些图形的型态上,会得到不适当的结果；

给个活生生的例子：一张照片在Instagram反复上传下载90次之后....在最后jpg图片完全变样了;

WEBP

WebP是一种同时提供了有损压缩与无损压缩的图片文件格式，派生自图像编码格式VP8 。是由Google购买On2 Technologies后发展出来的格式，以BSD授权条款发布。

WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。

• PNG 转 WebP 的压缩率要高于 PNG 原图压缩率，同样支持有损与无损压缩
• 转换后的 WebP 体积大幅减少，图片质量也得到保障（同时肉眼几乎无法看出差异）
• 转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数，不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

WebP为网络图片提供了无损和有损压缩能力，同时在有损条件下支持透明通道。据官方实验显示：无损WebP相比PNG减少26%大小；有损WebP在相同的SSIM（Structural Similarity Index，结构相似性）下相比JPEG减少25%~34%的大小；有损WebP也支持透明通道，大小通常约为对应PNG的1/3。

WebP的优势在于它具有更优的图像数据压缩算法，在拥有肉眼无法识别差异的图像质量前提下，带来更小的图片体积，同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

Base64

base64是一种网络上常用的8bit字节代码的编码方式，base64可以用于http环境下传递较长的标识信息，同时可以放在url当中使用，因为base64不惧可读性，所以具有一定的加密功能。
将图片转换成base64代码可以减少http请求，因为图片可以以字符编码的形式直接传递到客户端，而文件形式都需要进行http请求。但是也会有一个小缺点，就是图片编码化base64的时候大小会变大，但是通过gzip优化以后基本差不多。所以在应用的过程当中较小的图片可以直接编码成base64，较大的图片则不建议如此使用。

http://www.ruanyifeng.com/blog/2008/06/base64.html
举一个具体的实例，演示英语单词Man如何转成Base64编码。
Text content M a n
ASCII 77 97 110
Bit pattern 0 1 0 0 1 1 0 1 0 1 1 0 0 0 0 1 0 1 1 0 1 1 1 0
Index 19 22 5 46
Base64-Encoded T W F u

第一步，"M"、"a"、"n"的ASCII值分别是77、97、110，对应的二进制值是01001101、01100001、01101110，将它们连成一个24位的二进制字符串010011010110000101101110。

第二步，将这个24位的二进制字符串分成4组，每组6个二进制位：010011、010110、000101、101110。

第三步，在每组前面加两个00，扩展成32个二进制位，即四个字节：00010011、00010110、00000101、00101110。它们的十进制值分别是19、22、5、46。

第四步，根据上表，得到每个值对应Base64编码，即T、W、F、u。

其它好文章

移动端图片格式调研

https://blog.ibireme.com/2015/11/02/mobile_image_benchmark/