谈谈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上位图的技术还有一个是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以及以下，现在各主浏览器都支持

转载于:https://www.cnblogs.com/minij/p/6743705.html

谈谈web上各种图片应用的优缺点相关推荐

基于emoji 国际通用表情在web上的输入与显示的记录
定义: emoji 即国际通用表情场景: 1,ios,android,wp上emoji表情输入与显示 2,web也需作为支撑平台对emoji表情就行输入与显示(解析) 问题: 1,app端输入的表情 ...
php文件用户头像上传代码,网页web上传用户头像代码实现（美图秀秀开放）
网页web上传用户头像代码实现(美图秀秀开放) 在制作论坛或者一些门户社交网站的时候,经常要获取用户的头像.之前我们一般都是自己制作flash插件头像上传.或者用js来自己开发一个头像上传功能.比如有 ...
在word中的公式以代码形式体现在web上的方法
现在一般人的在web上显示公式的方式是图片,这种方法比较简单,容易实现,但是却占用了大量的web空间,也影响了web内容的加载速度.再次经过好几天的着实研究终于发现了一种以代码的方式在web端显示公式 ...
谈谈网站设计时图片的使用
谈谈网站设计时图片的使用本文主要分享笔者在开发云翔在线软件平台时合并图片的经验,在文章开始时,我们先看看Google首页的图片: 上面就是Google主页使用的图片,所有工具栏的图片都合并在一副 ...
精读《谈谈 Web Workers》
1 引言本周精读的文章是 speedy-introduction-to-web-workers,是一篇 Web Workers 快速入门的文章,借精读这篇文章的机会,谈谈对 Web Workers ...
在zabbix web上进行监控主机配置
前面的文档已经介绍过zabbix的理论知识.zabbix_server/zabbix_agent部署配置.zabbix_web的简单配置.Linux上的agent主机添加,这篇博客来介绍Wzabbix ...
[转]你会做Web上的用户登录功能吗？
Web上的用户登录功能应该是最基本的功能了,可是在我看过一些站点的用户登录功能后,我觉得很有必要写一篇文章教大家怎么来做用户登录功能.下面的文章告诉大家这个功能可能并没有你所想像的那么简单,这是一个关 ...
web响应式图片设计实现
随着移动开发热潮的兴起,已经有越来越多的公司将移动端的开发列为核心,其中不论是webapp还是手机页面都是如此,在开发的过程中就涉及到了一个web响应式图片的问题,这里我们就来探讨一下响应式图片的实现 ...
vue通过链接显示服务器上的图片_图片网站该如何做SEO优化？详细讲解图片优化技巧...
通常,在网站搜索引擎优化的过程中,很多站长和SEOer经常忽略图片的优化,但事实上,每个网站都有很多图片,所以优化网站图片就像优化其他内容一样,成为搜索引擎优化的一个重要工作内容. 如果你能成功地优化 ...
微信html 全屏显示,关于微信上网页图片点击全屏放大效果
实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. 调用微信图片浏览器的函数 functio ...

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

谈谈web上各种图片应用的优缺点相关推荐

最新文章

热门文章