web上种图片应用的优缺点-创新互联

web中承载信息的主要方式就是图片与文字了,以下就是对一些web图片格式的优缺点进行归纳。

站在用户的角度思考问题,与客户深入沟通,找到武山网站设计与武山网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广、申请域名、网页空间、企业邮箱。业务覆盖武山地区。

1、GIF

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

2、JPEG、JPG

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

3、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内核的浏览器(代表浏览器:火狐)有比较好的支持,其它的就无从谈起了。

4、webP

这个格式的图片的格式是财大气粗的Google在2010发布出来的,它拥有现有位图格式的所有优点,包括体积小、色彩表现足够、支持动画(一开始是不支持的)。当然,新东西的缺点就是兼容性不是很好,还有就是呈现这种图片格式计算量比平常的图片要大很多。由于出生好,东西本身也不错,越来越多的开发者与设计者开始关注它。国内某家公司也在使用这种格式图片制作表情。

5、SVG

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

浏览器中,对于图片的技术更新一直突破,其较于文字来说唯一缺点就是体积太大,但图片的表现力是文字无法比拟的,也相信图片会越来越好吧。关于web上位图的技术还有一个是database64,这个是可以把的图片转化成为16位的代码直接插入web中。


压缩方式单张图能支持颜色种类是否支持透明度是否支持动画兼容情况
GIF无损压缩256基本通用
JPEG有损压缩 1600万以上基本通用
PNG无损压缩 1600万以上基本通用
APNG无损压缩 1600万以上

 Firefox51++

Chrom59++

iOS Sarfi9.3++

webP有损压缩 1600万以上 

Opera 44++

Chrom 45++

SVG矢量图 1600万以上

 除了IE8以及以下,

现在各主浏览器都支持

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前题目:web上种图片应用的优缺点-创新互联
文章地址:http://scyanting.com/article/dpghdg.html