Souerce 之 图片格式

一、基本概念

1、矢量图与位图

1）矢量图-完美的几何图形

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

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

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

2）位图-神奇的拼图

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

　　位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会失真。

　　尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图，即他们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样，这就是涉及到有损压缩和无损压缩的区别。

二、有损压缩与无损压缩

1、有损压缩-你看到的不一定是真实的

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

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

2、无损压缩-最精确的拼图

　　无损压缩则会真实的记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。

　　PNG是我们最常见的一种采用无损压缩的图片格式。无损压缩在存储图像前会先判断图像上哪些地方是相同的哪些地方是不同的，为此需要对图像上所有出现的颜色进行索引，我们把称这些颜色称为索引色。索引色就好比绘制这幅图像的“调色版”，PNG在显示图像的时候则会用“调色版”上的这些颜色去填充相应的位置。

　　大家可能会疑惑既然PNG采用的是无损压缩为什么我们保存的PNG格式图片还会有失真呢？这是因为无损压缩只是说它的压缩方式会尽可能真实的还原图像，但从它的压缩原理我们可以知道它是通过索引图像上相同区域的颜色进行压缩和还原的，这就意味着只有在图像上出现的颜色数量小于我们可以保存的颜色数量时，我们才能真实的记录和还原图像，否则就会丢失一些图像信息（PNG8最多只能索引256种颜色，所以对于颜色较多的图像不能真实还原；PNG24则可以保存1600多万种颜色，基本能够真实还原我们人类肉眼所可以分别的所有颜色；PNG格式最多可以保存48位颜色通道）。而对于有损压缩来说，不管图像上的颜色多少，都会损失图像信息。

三、JPG和PNG

　　把JPG和PNG的一些特性进行一个简单对比：

格式	压缩模式	交错支持	透明支持	动画支持
JPG	有损压缩	支持	不支持	不支持
PNG	无损压缩	支持	支持	不支持

1、JPG的特性

1）支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。

2）有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。

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

2、PNG的特性

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

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

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

四、实际应用

　　在存储图像时采用JPG还是PNG主要依据图像上的色彩层次和颜色数量进行选择。一般层次丰富颜色较多的图像采用JPG存储，而颜色简单对比强烈的则需要采用PNG。但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含的颜色数量有限时，也可以尝试用PNG进行存储。而有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用JPG进行存储了。

　　另外还有一个原则就是用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储，这样才能更好的保证设计品质。而其他一些内容元素，如广告Banner、商品图片等对质量要求不是特别苛刻的，则可以用JPG去进行存储从而降低文件大小。

五、Sprite图片二次优化

　　页面切图和静态代码实现基本都是前端工程师去完成。为提高页面性能目前普遍采用的实现方式是将与页面结构相关的需要用到图片的视觉元素集中在一个PNG图片上，然后通过CSS样式将其应用到页面中，我们称这个图片为Sprite图片。由于这个图片上经常要集中较多的视觉元素，在用PNG格式存储时难免会产生失真而影响图片质量。这个时候就需要视觉设计师帮助前端开发工程师对Sprite图片进行优化，这样做的好处是不仅能提升图片质量，还能达到减小文件大小的效果，可谓一举两得。

　　Sprite图片的优化方式有很多种，比如通过索引色排序进行颜色的删减和替换，或是直接通过像素描绘进行优化。设计师可以根据具体的场景进行选择和处理。

图片格式	压缩模式	透明支持	动画支持	矢量支持	备注
JPG	有损压缩	不支持	不支持	非矢量	色彩复原度比力好，可以支持适当紧缩后连结比力好的色彩度
JPEG	有损压缩	不支持	不支持	非矢量	可用于间接打印和印刷（相对于jpg要好）
PNG	无损压缩	支持	不支持	非矢量	网页设想中为了使图片下面的布景色彩显现出来，我们经常会利用png24通明的图片， Png8是类似gif的通明度，有带半通明（alpha为50%）的地方的时辰以不通明处置。 　　Png图片假如色彩较多或复杂，则图片生成后是很大的，相比力jpg的大有5~6倍之多，所以没出格要求不能以png替换jpg的使用。Png图片多用于网页中的图标设想。 　　IE6不支持png透明特征，有png的地方会以灰色底显现，相当丢脸，不外ie6已经渐渐淡出了我们的视野，相信png的利用会获得更普遍。
Gif	有损压缩	不支持全透明 支持半透明	支持	非矢量	利用该格式的场景：网页布景、小图标、色彩度低的小切片、动绘图片；
Bmp	有损压缩	不支持	不支持	非矢量	Windows格式，windows操纵系统独有的图片，该图片保存了大量的图片数据，所以图片相对是比力大的，色彩度很实在，windows的桌面就是bmp格式的，经过设了桌面布景后，会在系统天生张bmp的图片用于保存该桌面壁纸，弱点：图片格式较大
Tiff	不支持压缩	不支持	不支持	非矢量	印刷格式，色彩实在，支持保存图层(像psd，但像途径、蒙版等不成保存)，凡是发给印刷公司的图片就是用这类格式的
Ai				矢量	ai格式是 Adobe公司旗下软件 Adobe Illustrator 天生的可再编辑矢量图片，与CDR可以通用，与PS可以通用，在ps里双击ai图片层会自动翻开ai软件编辑，在ai里按保存后切换ps后可以看到会实时变化，正由于编辑可以同步，ai现在用的越来越广；
Cdr				矢量	cdr格式是Corel公司旗下软件CorelDRAW天生的可再编辑矢量图片，该格式不能间接与ai通用，需要导出ai格式再切换。目前大多广告公司用的广告产物排版软件就是这个；
eps				矢量	Eps是Encapsulated PostScript的缩写，是跨平台的标准格式，首要用于矢量图像和光栅图像的存储。 eps格式采用 PostScript说话停止描写，而且可以保存其他一些范例信息，例如多色彩曲线、Alpha通道、分色、剪辑途径、挂网信息和色彩曲线等，是以EPS格式常用于印刷或打印输出。

　　总结:  
　　1、在凡是情况下面 jpg与jpeg是一样的，只是里面保存的数据纷歧样，但我们大都利用的是jpg（后缀是小写，大写的有些是没法读写）,在图片色彩丰富的地方利用该格式保存，像拍摄的相片，ps分解的图片，经常保存图片时我会紧缩20% 保存80%，看上去没有变化，但文件巨细小了很多;
　　2、png是用于全通明（保存png24）图片，该格式是大都用于小型格式的图片，否则文件会很大;
　　3、gif是用于收集图片，可以建形成带有帧的动绘图片，图片文件比力小，同时色彩也不是很丰富，不倡议用于带简洁的图片，除了色彩很浅很简单的切片；
　　4、bmp通常为windows保存的高保真图片，图片很大；
　　5、tiff一般用于印刷图片，平面设想可以保存格式并发送给建造部分建造实物，图片也一般较大；
　　6、ai、cdr、eps是矢量图形，按照自己的利用习惯，可以调剂，并没有特此外界限；