图片格式中的小较真

关于图片格式，大家或多或少都能说出一两种来，平时写代码的时候也不时会用到不同格式的图片。但是我们在具体使用过程中，为了达到最佳的用户体验，我们需要根据不同的环境来选择不同格式的图片。这篇文章将为大家介绍一下常见的图片格式的特点。

矢量图与位图

首先，我们先来说一说矢量图和位图。所有的图片都可以划分到这种类别中的一个去。

我们平时画图的时候可以通过点线面这些几何特征明显的要素画图，像这样的。

也可以用许多点来构成图画，类似这样。

而同样，我们的电脑在显示图片的时候也可以分为两种——矢量图和位图。

矢量图是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半径来描述，当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式。而电脑在显示的时候则通过这些数据去绘制出我们定义的图像。

矢量图的优点在于文件相对较小，并且放大缩小不会失真。缺点则是这些完美的几何图形很难表现自然度高的写实图像。

位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点，当我们把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像。所以当我们放大一幅像素图时，能看到这些拼片一样的像素点（如下图）。

位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图，即他们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样，这就是涉及到有损压缩和无损压缩的区别——是否失真。

我们在web页面上所使用的图像都是位图，即便有些称为矢量图形（如矢量icon等）也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的（区别于像素绘制的图形）。

有损压缩和无损压缩

接着，我们聊聊有损压缩和无损压缩。

有损压缩，在台湾、港澳又称作破坏性资料压缩，

有损数据压缩方法是经过压缩、解压的数据与原始数据不同但是非常接近的压缩方法。有损数据压缩又称破坏型压缩，即将次要的信息数据压缩掉，牺牲一些质量来减少数据量，使压缩比提高。通俗点说，有损压缩就是在存储图像的时候并不完全真实的记录图像上每个像素点的数据信息，它会根据人眼观察现实世界的特性（人眼对光线的敏感度比对颜色的敏感度要高，生物实验证明当颜色缺失时人脑会利用与附近最接近的颜色来自动填补缺失的颜色）对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量，又不会对图像的还原效果有较大影响。

相对有损压缩而言，无损压缩则会真实的记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。就像下图所示的一样，压缩软件将每一种颜色进行编号，然后对像素点的颜色进行归类，记录下哪种颜色出现在哪个像素点上，这样既压缩了存储空间，在还原图片时也不会影响图片质量。

Jpg（JPEG），GIF和png三种图片格式

我们平时接触和使用得最多的就是JPG、GIF和PNG这三种格式了。

JPG（JPEG）

联合照片专家组（外语简称JPEG外语全称：Joint Photographic ExpertGroup）JPEG也是最常见的一种图像格式，它是由联合照片专家组（外语全称：Joint Photographic Experts Group），文件后辍名为"．jpg"或"．jpeg"，是最常用的图像文件格式。

JPG（JPEG）是我们最常见的采用有损压缩对图像信息进行处理的图片格式。JPG在存储图像时会把图像分解成8*8像素的栅格（如下图），然后对每个栅格的数据进行压缩处理，当我们放大一幅图像的时候，就会发现这些8*8像素栅格中很多细节信息被去除，而通过一些特殊算法用附近的颜色进行填充（为了让大家看得更清楚我将图像的压缩比率调到很低）。这也是为什么我们用JPG存储图像有时会产生块状模糊的原因。

JPG（JPEG）格式的优缺点：

优点：

摄影作品或写实作品支持高级压缩。

利用可变的压缩比可以控制文件大小。

支持交错（对于渐近式JPG（JPEG）文件）。

JPG（JPEG） 广泛支持 Internet 标准。

缺点：

有损耗压缩会使原始图片数据质量下降。

当我们编辑和重新保存JPG（JPEG）文件时，JPG（JPEG）会混合原始图片数据的质量下降。这种下降是累积性的。

JPG（JPEG） 不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。

GIF

图形交换格式（外语简称：GIF、外语全称：Graphics Interchange Format），是CompuServe公司在 1987年开发的图像文件格式。GIF格式，是为使图片能够应用在在线应用程序上所特别开发的图片格式。Gif，有时也被称为为“Giff”，是一种无损，8位图片格式。“无损”是指100%的保持原始图片的像素数据信息。“8位”是指，所能表现的颜色深度——一个8位图像仅最多只能支持256种不同颜色（一个多余256种颜色的图片若用gif图片保存会出现失真）。

GIF格式有四大特性

透明特性：
GIF支持基本的透明特性，这意味着你能够使图片的某些像素“不可见”。在其被放置到网页中时，我们就可以看到通过这些不可见区域看到此图片后面的背景颜色（图片）。此特性非常有用：如果你需要将某个gif图片的内容置于所有图片的上层，你可以将其设置为透明。
压缩特性：
GIF格式采用LZW算法进行压缩，此算法是Unisys申请的一项专利。在很久很久之前，如果你想使用GIF格式，那么就意味着你需要向Unisys付费申请专利许可。不过值得高兴的是，此项专利技术已于2003年6月20日过期，我们现在使用GIF是完全免费的。
快速加载：
GIF同时也支持隔行扫描。隔行扫描能够令图片在浏览器中更快的加载和显示。此特性对于那些慢网速的浏览者来说尤其实用。
动画GIF：
一个动态的GIF文件，是由若干帧图片所联结而成的动态图片。在显示时，这些动态帧被反复的绘制读取出来从而形成了简单的动画效果。

PNG

前面说过，以前使用GIF格式是要收钱的，那不想给钱怎么办？于是用来代替GIF格式的便携式网络图形（外语简称PNG、外语全称：Portable Network Graphics）就应运而生了。PNG格式，初始时被作为GIF的免费替代格式所开发，采用公共专利压缩算法。PNG目前有PNG8和PNG24两种格式，不过PNG最多可以支持48位通道。PNG8最多只能索引256种颜色，所以对于颜色较多的图像不能真实还原；PNG24则可以保存1600多万种颜色，基本能够真实还原我们人类肉眼所可以分别的所有颜色.。

1、能在保证最不失真的情况下尽可能压缩图像文件的大小。

2、PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩×××像时，彩×××像的深度可多到48位，并且还可存储多到16位的α通道数据。

3、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

JPG、PNG、GIF使用对比

这里只是介绍了一些常见的图片格式的情况，在维基百科里有详细的图片格式的介绍，有兴趣可以去看看。

https://zh.wikipedia.org/wiki/%E5%9B%BE%E5%BD%A2%E6%96%87%E4%BB%B6%E6%A0%BC%E5%BC%8F%E6%AF%94%E8%BE%83

如果大家还想继续深入地了解一下图片格式的一些具体的算法实现，可以去看看

《bmp/gif/jpg图象最底层原理分析》

http://www.cnblogs.com/glaivelee/archive/2011/10/10/2205151.html