常用网页图像格式简述:png/svg

PNG 图像格式

PNG是一种可携式网络图像格式。PNG一开始便结合GIF及JPG两家之长,打算一举取代这两种格式。1996年10月1日由PNG向国际网络联盟提出并得到推荐认可标准,并且大部分绘图软件和浏览器开始支持PNG图像浏览,从此PNG图像格式生机焕发。

IE浏览器从4.0版本开始支持png图像浏览。

特点1:兼有gif和jpg的色彩模式。

我们知道gif格式图像采用了256色以下的index color色彩模式,jpg采用的是24位真彩模式。png不仅能储存256色以下的index color图像,还能储存24位真彩图像,甚至能最高可储存至48位超强色彩图像。

特点2:png能把图像文件压缩到极限以利于网络传输,但又能保留所有与图像品质有关的信息。

如果你的图像是以文字、形状及线条为主,png会用类似gif的压缩方法来得到较好的压缩率,而且不破坏原始图像的任何细节。据国际网络联盟测算,八位的png图像比同位的gif图像就小10%到30%。

而对于相片品质一类的压缩,png则采用类似jpg的压缩演算法。但是jpg压缩程度越大、影像的品质越差。因为它的压缩是采用的是破坏性压缩法、每次压缩的同时便多多少少漏掉一些像素。 png不同于jpg的地方在于:它处理相片类图像亦是采用非破坏性压缩,图像压缩后能保持与压缩前图像质量一样,没有一点失真。

特点3:更优化的传输显示。

熟悉gif格式的图像处理者知道,gif图像有两种模式——normal(普通)模式和interlaced(交错)模式。interlaced模式更适用于网络传输。在传送图像过程中,浏览者先看到图像一个大略的轮廓然后再慢慢清晰。png也采取了interlaced模式,使图像得以水平及垂直方式显像在萤幕上,加快了下载的速度。

特点4:支持图像透明显示。

gif格式虽然也支持透明显示,采用gif格式透明图像过于刻板,因为gif透明图像只有1与0的透明信息、只有透明或不透明两种选择,没有层次;而png提供了α频段0至255的透明信息,可以使图像的透明区域出现深度不同的层次。

png图像就可以让图像覆盖在任何背景上都看不到接缝,改善gif透明图像描边不佳的问题。

特点5:兼容性较好。

gif图像在不同系统上所显示的画面也会跟着不一样,但png却可以让你在Macintosh上制作的图像与在Windows上所显示的图像完全相同,反之亦然。

png被设计成可以通过网络传送到任何机种及作业系统上读取。

文字资料(如作者、出处)、储存遮罩(MASK)、伽玛值、色彩校正码等信息均可参杂在 png图像中一起传输。

几个发现:

   不透明和索引色透明的图片, png8比gif更加具有优势。

Alpha透明的图片,png8比gif显示效果好,但文件更大。

png24没有透明效果:包括索引色透明和Alpha透明。

不同的浏览器,显示效果不一样。

Firefox:支持png8的索引色透明度, png8 和png32的alpha透明度。

IE:支持png8的索引色透明度,但不支持png8和png32的alpha透明度。(可用Js+css滤镜解决)

网页中使用的照片类图片,jpg文件一般比png24要小很多。但不排除特殊情况。

SVG 图像格式

SVG是种一种可缩放的矢量图形。它是基于XML,由W3C联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。

用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来观看。

SVG提供了目前网络流行格式GIF和JPEG无法具备了优势:可以任意放大图形显示,但绝不会以牺牲图像质量为代价;

文字在SVG图像中保留可编辑和可搜寻的状态;平均来讲,SVG文件比JPG和GIF格式的文件要小很多,因而下载也很快。

时间: 2024-08-03 16:22:13

常用网页图像格式简述:png/svg的相关文章

常用网页图像格式简述:bmp/jpg/gif

一.BMP 图像文件 BMP图像文件最早应用于Windows操作系统,是Windows操作系统中的标准图像文件格式,是最简单的图像格式. BMP图像格式非常简单,仅具有最基本的图像数据存储功能,能存储每个像素1位.4位.8位和24位的位图.虽然它提供的信息过于简单,但是由于 Windows系统的普及以及BMP本身具有格式简单.标准.透明的特点,BMP图像文件格式得到了推广,它一般应用于Windows系统下的屏幕显示以及一些简单图像系统中. 这种格式的特点是包含的图像信息较丰富,几乎不压缩,但由此

Dreaweaver常用网页编辑技巧集锦

技巧|网页 在我们制作网页的时候会经常碰到一些需求,如果不知道方法,说不定会困扰我们半天.其实实现它们都很简单,下面我们就一起来看看这些常用的网页编辑方法. 取消文本居中 在编排网页文本时,你可能会遇到这样的问题:只想让一行字符居中,但其它行的字符却会跟着也变成居中了.其实,这是因为在Dreamweaver MX中进行居中.居右操作时,默认的区域是P.H1-H6.Div等格式标识符,如果你的语句没有用标识符隔开,Dreamweaver MX 2004就会将整段文字均作居中处理.解决方法就是将想要

HTML常用网页特效

常用HTML特效代码 1.忽视右键   <body oncontextmenu="return false">   或   <body style="overflow-y:hidden">  2.加入背景音乐   IE:<bgsound src="*.mid" loop=infinite>   NS:<embed src="*.mid" autostart=true hidden=tr

网页教学网推荐:常用网页设计效果代码十五例

设计|网页|网页设计 1.忽视右键 <body oncontextmenu="return false"> 或 <body style="overflow-y:hidden"> 2.加入背景音乐 IE:<bgsound src="*.mid" loop=infinite> NS:<embed src="*.mid" autostart=true hidden=true loop=tru

DIV+CSS常用网页制作布局技术技巧

 CSS布局常用的方法:float:none|left|right  取值: none: 默认值.对象不飘浮 left: 文本流向对象的右边 right: 文本流向对象的左边  它是怎样工作的,看个一行两列的例子  xhtml代码: 以下是引用片段: <div id="wrap">  <div id="column1">这里是第一列</div>  <div id="column2">这里是第二列&l

常用网页嵌入播放器代码精解收集

因为自己需要,所有,收集整理一下相关的资料 我们在网页上看到的播放器无外乎WMP/RealOne/Macromedia Flash Player,其他的无非是面板不同,或者添加了其他控件,对于计算机上安装的一些播放器也都是编码和解码器的整合,其最核心的编码和解码技术是相同的.例如:网络上最流行的windows media流(asf,wma,wmv格式...),Real流(rm,rmvb...),还有MPEG系列编码格式(MP4/MP3格式...) WMP控件加入了ActiveX解码器控件,不仅可

常用网页编辑器漏洞手册(全面版)fckeditor,ewebeditor_网页编辑器

FCKeditor FCKeditor编辑器页/查看编辑器版本/查看文件上传路径 FCKeditor编辑器页 FCKeditor/_samples/default.html 查看编辑器版本 FCKeditor/_whatsnew.html 查看文件上传路径 fckeditor/editor/filemanager/browser/default/connectors/asp/connector.asp?Command=GetFoldersAndFiles&Type=Image&Curren

30款jQuery常用网页焦点图banner图片切换 下载

1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动   查看演示   2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动   查看演示   3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片   查看演示   4.jQuery iNav插件图片分类导航选项卡切换图片滚动列表   查看演示   5.jQuery全屏图片幻灯片插件带小图预览提示幻灯片滚动切换   查看演示   6.锦云外贸管理网站jQuery全屏按钮控制图片上下滚动     查看演示   7.酷炫的jQue

网页:Meta标签详解

网页|详解 引言 您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中登录自己的个人网站 ● 在知名网站加入你个人网站的链接 ● 在论坛中发帖子宣传你的个人网站 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文