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

2016-02-19 17:30 8 1 收藏

有了下面这个常用Web图像格式简述:png/svg教程,不懂常用Web图像格式简述:png/svg的也能装懂了,赶紧get起来装逼一下吧!

【 tulaoshi.com - Web开发 】

  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:支持图像透明显示。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

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

  特点5:兼容性较好。

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  文字资料(如作者、出处)、储存遮罩(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格式的文件要小很多,因而下载也很快。

来源:http://www.tulaoshi.com/n/20160219/1615378.html

延伸阅读
标签: CorelDRAW
    色彩配对与 Gamma 值校正 我们在处理RGB的图像时经常遭遇到一个非常令人讨厌的问题,那就是色彩的准确度问题。RGB 的图像往往会因为搭配的硬件有所不同而出现不一致的结果。所以经常出现的问题就是--在某一操作平台所制作的图像到了另外一台机器上看就不是那么回事了。例如,一张在 PC 上制作出的杰作移到了MAC上浏览就...
标签: PS PS教程
    Adobe公司在Photoshop 5.5中集成了ImageReady 2.0软件,提供了强大的网络图像处理功能,可以让你设计引人注目的网络图片。利用Adobe ImageReady 2.0可以处理图像优化、切割、动画、JavaScript变动效果以及其他进阶工作,下面我们主要对用ImageReady进行Web图像优化作一讲述。 为什么要优化图像 我们知...
用Authorware开发多媒体作品,自然不能少了图片的显示。通常我们是用框架图标,把要显示的图片依次导入。这样做非常麻烦,每一幅图片要依次导入,逐个设置显示方式,这且不说,万一下次要显示不同的图片时,还得重新导入、设置,非常烦琐。那么,能不能让Authorware显示指定文件夹里的图片呢?这样,就用不着每次都要导入了,只要指定图片所在...
标签: Web开发
HTML定义了一些文本格式的Tag,比如利用Tag,可以将字体变成粗体或者斜体。从下面的示例,你可以了解各种文本格式Tag如何改变HTML文本的显示。 常用文本格式Tag Tag Tag说明 b 粗体bold i 斜体italic del 文字当中划线表示删除 ins 文字下划线表示插入 sub 下标 sup 上标 blockquote  缩进表示引用 pre 保留空格和换行 code 表...
;   假设我们写了一首新的乐曲,要把它交给唱片公司,可以通过两种方式: 1:把这首乐曲弹奏出来并录制在磁带上。 2:把这首乐曲的乐谱写下来。 这两种方式的最大区别在于记录的形式。 前者是记述性的。包含乐曲的音频信息。其中的所有信息都是固定的,如演奏速度、乐器音色等。如果你想把笛子换...

经验教程

878

收藏

100
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部