jpg 图像格式

高压缩的,除了文字,线条外,用jpg 处理

GIF 图像格式

高压缩的,动图

 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格式的文件要小很多,因而下载也很快。

图像处理 jpg png gif svg的更多相关文章

  1. SVG开发包, 20 个有用的 SVG 工具,提供更好的图像处理

    20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web ...

  2. HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  3. 深度掌握SVG路径path的贝塞尔曲线指令

    一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完 ...

  4. canvas绘图、WebGL、SVG

    目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...

  5. HTML5 学习笔记(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  6. svg技术(可缩放矢量图形)介绍

    公司里面的产品用图表的地方也比较多,作为平台维护的我,收到几次需求提的建议中包括图表美化的功能,要炫,要3d,立体感,功能要强大等到:平台现有控件都是用的一个开源flash,我对flash虽然会一点但 ...

  7. GML、SVG、VML的比较

    转自:http://www.cnblogs.com/3echo/archive/2009/02/19/1394399.html GML.SVG和VML都是基于XML的可用来描述矢量图形的标记语言,都是 ...

  8. 8个实用的SVG工具,20 个有用的 SVG 工具,五款超实用的开源SVG工具

    8个实用的SVG工具 [导读] 你还在为没有好用的SVG工具而发愁吗?开发人员的福音来啦!小编为大家收集罗列了8款实用的SVG工具,让我们一起来看看吧! SVG可缩放矢量图形(Scalable Vec ...

  9. HTML学习总结(四)【canvas绘图、WebGL、SVG】

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

随机推荐

  1. PyQt(Python+Qt)学习随笔:Qt Designer中部件的windowTitle和windowOpacity属性

    windowOpacity 这个属性仅对window对象生效. windowOpacity为浮点数,表示透明度,为1完全不透明,为0完全透明,缺省是1. 可以通过windowOpacity().set ...

  2. Error.name 六种值对应的信息

    1 EvalErroe:eval()  的使用与定义不一致 2 RangrError: 数值越界 3 ReferenceError:非法或不能识别的引用数值 4 SyntaxError:发生语法解析错 ...

  3. 精品软件-OfficeBox办公神器

    办公文档office处理套件,非常齐全,小巧! 官方地址:http://www.wofficebox.com/

  4. Javascript的解码/编码api

    1.fromCharCode() 接受一个指定的 Unicode 值,然后返回一个字符串. 语法:String.fromCharCode(numX,numX,...,numX) 详细了解:http:/ ...

  5. 访问控制列表ACL应用

    ACL的应用的场景 应用在三层接口 • Nat地址转换 Nat(network address translation,地址转换)是将数据报报头中的ip地址转换为另一个ip地址的过程,主要用于实现内部 ...

  6. 啊!Java虚方法

     什么是Java的虚方法呢,我们首先看看什么是虚函数 虚函数 百度百科的解释为: 在某基类中声明为 virtual 并在一个或多个派生类中被重新定义的[成员函数],用法格式为:virtual 函数返回 ...

  7. 多任务-python实现-生成器相关(2.1.13)

    @ 目录 1.概念 2.创建方法 3.通过send方式来启动 1.概念 通过列表生成式,我们可以直接创建一个列表,但是,受到内存限制,列表容量肯定是有限的,而且创建一个包含100万个元素的列表,不仅占 ...

  8. 工具-chrome相关-安装crx包及错误解决(99.3.1)

    @ 目录 1.安装教程 2.程序包无效:"CRX_HEADER_INVALID" 1.安装教程 在浏览器上输入 chrome://extensions 并且选择开发者模式 将.cr ...

  9. 初接触matplotlib

    1,绘制简单的折线图. 1 import matplotlib.pyplot as plt 2 3 square = [1,4,9,16,25] 4 5 plt.plot(square) 6 plt. ...

  10. Linq基础知识

    开发人员不需要关心将要访问的是关系数据库还是XML数据,或是远程对象,它都采用同样的访问方式. Linq包含一系列的查询技术,其中Linq到对象是对内存进行操作,LINQ到SQL是对数据库的操作,LI ...