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)学习随笔:布局控件layoutSpacing属性

    在Qt Designer中布局控件有4个,分别是Vertical Layout(垂直布局).Horizontal Layout(水平布局).Grid Layout(网格布局).Form Layout( ...

  2. 【Codeforces 715C】Digit Tree(点分治)

    Description 程序员 ZS 有一棵树,它可以表示为 \(n\) 个顶点的无向连通图,顶点编号从 \(0\) 到 \(n-1\),它们之间有 \(n-1\) 条边.每条边上都有一个非零的数字. ...

  3. AcWing 309. 装饰围栏

    题目链接 这道题与下一章的数位\(dp\)解题思路十分一致. 把寻找答案变成按位(并且是字典序从小到大)枚举当前这一位可以填的情况. 通过\(dp\)预处理的信息告诉我们可行性,就可以把答案紧逼到一个 ...

  4. 如何写好商用PPT,计算机行业PPT模板

    如何写好商用PPT,这个问题如果从0开始写那确实需要花费一番功夫,今天我不是来教你如何做PPT,而是教你如何从一个小白如何快速能套用模板,从而做出一个自己行业相关的模板,比如计算机行业PPT模板,奶茶 ...

  5. Durid的特点

    Durid的特点 1.为什么会有Durid? 创建Druid的最初意图主要是为了解决查询延迟问题,当时试图使用Hadoop来实现交互式查询分析,但是很难满足实时分析的需要.而Druid提供了以交互方式 ...

  6. 网站开发学习Python实现-Django项目部署-同步之前写的博客(6.2.2)

    @ 目录 1.说明 2.思路 3.代码 关于作者 1.说明 之前写的博客都在csdn和博客园中 要将博客同步到自己的博客网站中 因为都是使用markdown格式书写的,所以直接爬取上传就完事 2.思路 ...

  7. GitBook简单的使用

    GitBook 是一个基于 Node.js 的命令行工具,支持 Markdown 和 AsciiDoc 两种语法格式,可以输出 HTML.PDF.eBook 等格式的电子书. 使用 GitBook 管 ...

  8. Excel-RANK函数排名与拓展

    问题场景 需求不同根据总分出排名(从大到小100分.100分.99分.98分.97分),排名需求: 第一种排名:第1名,第2名,第3名,第4名,第5名: 第二种排名:第1名,第1名,第3名,第4名,第 ...

  9. 怎么同步fork原git项目

    如何实现 有时候,我们看到有价值的git项目,通常,我们会选择把原项目fork过来,然后自己去把玩研究.然而,原项目进行了更新,fork过来的代码却还是原来的版本,那有没有什么做法,能同时更新到我自己 ...

  10. 运行springboot项目报错 Error running 'ResourceApplication': Command line is too long. Shorten comma

    方法1 IDEA 运行报错:Error running '***': Command line is too long 技术标签: IDEA     Error running 'Test': Com ...