Gif,png,jpg,webp几种图片格式整理

GIF 意为Graphics Interchange format（图形交换格式），GIF图片的扩展名是gif。如今全部的图形浏览器都支持GIF格式，并且有的图形浏览器只熟悉GIF格式。GIF是一种索引颜色格式，在颜色数不多的状况下，产生的文件极小，它的优势主要有：

1.GIF格式支持背景透明。GIF图片假如背景色设置为透明，它将与浏览器背景相结合，生成非矩形的图片。 
2.GIF格式支持动画。在Flash动画出现以前，GIF动画能够说是网页中惟一的动画形式。GIF格式能够将单帧的图象组合起来，而后轮流播放每一帧而成为动画。虽然并非全部的图形浏览器都支持GIF动画，可是最新的图形浏览器都已经支持GIF动画。 
3.GIF格式支持图形渐进。渐进是指图片渐渐显示在屏幕上，渐进图片将比非渐进图片更快地出如今屏幕上，可让访问者更快地知道图片的概貌。 
4.GIF格式支持无损压缩。无损压缩是不损失图片细节而压缩图片的有效方法，因为GIF格式采用无损压缩，因此它更适合于线条、图标和图纸。 

5.水平扫描
Gif是使用了一种叫做LZW的算法进行压缩的，当压缩gif的过程当中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小
GIF格式的缺点一样至关明显。索引颜色是历史遗留的产物，在DOS下的老游戏几乎无一例外的采用索引颜色，这种格式原本早就应该淘汰了。可是因为带宽的限制，GIF从DOS时代红到了Internet时代。GIF这种索引颜色格式最大的缺点就是它只有256种颜色，这对于照片质量的图片是显然不够的。

JPEG 表明Joint Photograhic Experts Group（联合图像专家组），这种格式常常写成JPG，JPG图片的扩展名为jpg。

JPG最主要的优势是能支持上百万种颜色，从而能够用来表现照片。此外，因为JPG图片使用更有效的有损压缩算法，从而使文件长度更小，下载时间更短。有损压缩会放弃图像中的某些细节，以减小文件长度。它的压缩比至关高，使用专门的JPG压缩工具其压缩比可达180：1，并且图像质量从浏览角度来说质量受损不会太大，这样就大大方便了网络传输和磁盘交换文件。JPG较GIF更适合于照片，由于在照片中损失一些细节不像对艺术线条那么明显。另外，JPG对照片的压缩比例更大，而最后的质量也更好。

可是从长远来看，JPG随着带宽的不断提升和存储介质的发展，它也应该是一种被淘汰的图片格式，由于有损压缩对图像会产生不可恢复的损失。因此通过压缩的JPG的图片通常不适合打印，在备份重要图片时也最好不要使用JPG。还有，JPG也不如GIF图像那么灵活，它不支持图形渐进、背景透明，更不支持动画。

PNG 是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增长一些GIF文件格式所不具有的特性。流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG's Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，而且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。

 

PNG意为可移植网络图形格式(Portable Network Graphic Format)

透明性
Png是彻底支持alpha透明的(透明，半透明，不透明)，尽管有两个怪异的现象在ie6(下面详细讨论)
动画
它不支持动画
无损耗性
png是一种无损耗的图像格式，这也意味着你能够对png图片作任何操做也不会使  得图像质量产生损耗。这也使得png能够做为jpeg编辑的过渡格式
水平扫描
像GIF同样，png也是水平扫描的，这样意味着水平重复颜色比垂直重复颜色的图片更小
间隔渐进显示
它支持间隔渐进显示，可是会形成图片大小变得更大

第一种PNG叫PNG8(布尔透明),简单说能够理解为静态的GIF
他们都只有256色,也支持索引透明,就是指定一个像素点是否是透明

第二种PNG也叫PNG8(Alpha透明)可指定像素点的透明度,例如50%透明度
这种优势在于比PNG24/32体积小,但效果同样
缺点在于IE6支持很差,会把半透明的像素点显示成全透明

第三种PNG叫PNG24

PNG24不透明,可是颜色数不少,不止256色
而Photoshop里导出的png24实际上是png32

第四种PNG叫PNG32
和photoshop的PSD同样,是Fireworks的默认源文件格式,包含图层和通道信息
和PNG24的区别在于多了透明信息
缺点在于IE6支持很差,会把透明区域显示成蓝灰底色 : 只能经过影响性能的方法AlphaImageLoader与须要加特殊标签（VML）。

 

PNG文件格式保留GIF文件格式的下列特性：

使用彩色查找表或者叫作调色板可支持256种颜色的彩色图像。 
流式读/写性能(streamability)：图像文件格式答应连续读出和写入图像数据 
这个特性很适合于在通讯过程当中生成和显示图像。 
逐次逼近显示(progressive display)：这种特性可以使在通讯链路上传输图像文件的同时就在终端上显示图像，把整个轮廓显示出来以后逐步显示图像的细节，也就是先用低分辨率显示图像，而后逐步提升它的分辨率。 
透明性(transparency)：这个性能可以使图像中某些部分不显示出来，用来建立一些有特点的图像。 
辅助信息(ancillary information)：这个特性可用来在图像文件中存储一些文本注释信息。
独立于计算机软硬件环境。 
使用无损压缩。 
PNG文件格式中要增长下列GIF文件格式所没有的特性：

每一个像素为48位的真彩色图像。 
每一个像素为16位的灰度图像。 
可为灰度图和真彩色图添加α通道。 
添加图像的γ信息。 
使用循环冗余码(cyclic redundancy code，CRC)检测损害的文件。 
加快图像显示的逐次逼近显示方式。 
标准的读/写工具包。 
可在一个文件中存储多幅图像。 
文件结构 
这三种格式各有优缺点，其中PNG优势多多。虽然普及得还很通常，可是其非凡的优越性已经让咱们对其产生很是大的爱好。至少我如今很喜欢这种格式。固然了对于制做页面的制做人员来讲，页面整体积的大小那就是竞争力。因此咱们仍是必须要注重这三种格式的混合使用。那以何时用GIF何时用PNG 何时用JPG呢？咱们下面一一来分析。

在实际的工做中，我发现通常的纯色的图形，好比一些小图标、平铺背景其中的色彩比较少，那么做为GIF格式虽然只有256种色彩，可是应对这种类型的图片那必定是很是的合适的。固然了，不排除有一些非凡的小图标色彩的丰富性，可是相信做为小图标其色彩有点损失也不会影响到总体的视觉效果，因此GIF 的适用范围是：小图标、平铺背景等色彩比较少的小型图片。

那么大图片又怎么选择呢，首先咱们先了解一下JPG，咱们使用Photoshop的朋友都知道，在最后导出图片时会有一个地方让咱们选择这个JPG 图片的图片品质，100%是表示无压缩，当咱们拿同一张图片导出不一样的品质图片对比时咱们发现品质低的很明显会比品质高的脏了不少，这样照片看起来就很很差，固然咱们也发现这种状况在偏大色块的图片中犹为突出。因此好比天空、人像。非凡人像面部就会出现很难看的黑斑。固然假如对于照片质量要求不严格可使用JPG而且下降品质。可是不适用于背景、小图标。

Webp格式：Google开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。固然其也是一种有损压缩，其主要目的就是加快网络图片的传输效率，让图片能更快的显示在用户的眼前。目前所知道的只有高版本的W3C浏览器才支持这种格式，好比chorme39+，safari7+等等。