谈谈web上各类图片应用的优缺点

　　web中承载信息的主要方式就是图片与文字了，如下就是对一些web图片格式的优缺点进行概括。

　　一、GIF

　　GIF图是比较古老的web图片格式之一，能够追溯到1987，几乎全部的浏览器都支持这一种格式，老有老的好处嘛。GIF是一种索引色模式图片，因此GIF每帧图所表现的颜色最多为256种。GIF可以支持动画，也能支持背景透明，这点连古老的IE6都支持，因此在之前想要在项目中使用背景透明图片，有一些方案就是生成GIF图片。GIF与JPEG、PNG相比，在一般状况下确实体积比较小。不过里面若是放入了足够多帧的图片，那么可能就不是那种状况了。如今网络上的GIF能够说是爆炸式的再增加，显然更多的在与他的两个特色：支持动画与兼容性好。缺点就是：色彩表现度不够丰富。

　　二、JPEG、JPG

　　日常咱们大部分见到的静态图基本都是这种图片格式。这种格式的图片能比较好的表现各类色彩，主要在压缩的时候会有所失真（主要是压缩时，会在细节上把相邻的一些色彩给同化掉），也正由于如此，造就了这种图片格式体积的轻量。格式被各中老弱病残的浏览器兼容，不过不支持背景透明与动画。平时web上的广告图、相片、特大背景图、轮播图等等一些大图场景中，都适用这个。

　　三、PNG

　　PNG格式是有三种版本的，分别为PNG-8，PNG-24，PNG-32，全部这些版本都不支持动画的。PNG-8跟GIF相似的属性是类似的，都是索引色模式，并且都支持背景透明。相对比GIF格式好的特色在与背景透明时，图像边缘没有什么噪点，颜色表现更优秀。PNG-24其实就是无损压缩的JPEG。而PNG-32就是在PNG-24的基础上，增长了透明度的支持。PNG格式在老浏览器IE6以及如下，PNG-8透明度的支持度不是很好，PNG-32的透明度基本不支持。正由于如此，之前有一个js插件，专门应对IE6这种BUG，主要是用IE6里的滤镜来从新渲染图片达到透明.随着时代的发展，PNG也想进步，也想支持动画。因此，有人推出了APNG（Animated PNG）格式图片。从字面上理解，就是会动的PNG图片，不过这个技术实现上与PNG开发小组理念不合，没有获得有效推广。到如今，也就有Blink内核的浏览器（表明浏览器：火狐）有比较好的支持，其它的就无从谈起了。

　　四、webP

　　这个格式的图片的格式是财大气粗的Google在2010发布出来的，它拥有现有位图格式的全部优势，包括体积小、色彩表现足够、支持动画（一开始是不支持的）。固然，新东西的缺点就是兼容性不是很好，还有就是呈现这种图片格式计算量比日常的图片要大不少。因为出生好，东西自己也不错，愈来愈多的开发者与设计者开始关注它。国内某家公司也在使用这种格式图片制做表情。

　　五、SVG

　　SVG是一种矢量图，在如今来讲，获得的支持是很可观的。矢量图比位图一个天生的有点，就是它无论放多大都不会模糊。这种格式的图片，对一些简单的线条、 形状表现是很不错的，若是表达更复杂的图像（如照片），那这个就会变的太复杂。SVG可以支持动画（SVG的动画特性不能被IE浏览器很好的支持），之前的flash那样，还支持css样式的一些修改。咱们如今网页上的不少icon图标都是使用这个的，svg也可以把多个SVG组合起来。整体来讲，SVG仍是一个比较看好的技术。

　　浏览器中，对于图片的技术更新一直突破，其较于文字来讲惟一缺点就是体积太大，但图片的表现力是文字没法比拟的，也相信图片会愈来愈好吧。关于web上位图的技术还有一个是base64，这个是能够把的图片转化成为16位的代码直接插入web中。

 

	压缩方式	单张图能支持颜色种类	是否支持透明度	是否支持动画	兼容状况
GIF	无损压缩	256	是	是	基本通用
JPEG	有损压缩	1600万以上	否	否	基本通用
PNG	无损压缩	1600万以上	是	否	基本通用
APNG	无损压缩	1600万以上	是	是	Firefox51++ Chrom59++ iOS Sarfi9.3++
webP	有损压缩	1600万以上	是	是	Opera 44++ Chrom 45++
SVG	矢量图	1600万以上	是	是	除了IE8以及如下， 如今各主浏览器都支持