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. 【JAVA并发第一篇】Java的进程与线程

    1.进程与线程 1.1.进程 进程可以看作是程序的执行过程.一个程序的运行需要CPU时间.内存空间.文件以及I/O等资源.操作系统就是以进程为单位来分配这些资源的,所以说进程是分配资源的基本单位. ( ...

  2. web网络漏洞扫描器编写

    这两天看了很多web漏洞扫描器编写的文章,比如W12scan以及其前身W8scan,还有猪猪侠的自动化攻击背景下的过去.现在与未来,以及网上很多优秀的扫描器和博客,除了之前写了一部分的静湖ABC段扫描 ...

  3. go学习的第7天

    不容易啊,坚持7天了呢,今天开始看视频学习 https://www.bilibili.com/video/BV1pt41127FZ?from=search&seid=4441824587572 ...

  4. 剑指offer二刷——数组专题——数字在升序数组中出现的次数

    题目描述 统计一个数字在升序数组中出现的次数. 我的想法 完整的解法我只想到了遍历数组然后依次统计,但这是不聪明的解法,而且没有利用上"升序数组"的这个条件. 题目标签有提醒可以用 ...

  5. AcWing 329. 围栏障碍训练场

    大型补档计划 题目链接 考虑模拟这个过程. \(f[i][0 / 1]\) 表示从第 \(i\) 个围栏的 左/右端点开始往下走,走到原点的最小花费. 转移很容易想到,就是考虑找到一个往下走第一个碰到 ...

  6. MarkDown的练习_Java开发学习路径

    MarkDown的练习 语言学习 C/C++语言 Java语言 基础四大件 数据结构与算法 操作系统 计算机网络 设计模式 数据库/SQL 私人令牌:42bb654f53941d5692e98b35f ...

  7. 深入理解Java虚拟机(六)——JVM调优分析与实战

    大内存硬件上的程序部署策略 单个虚拟机管理大内存 出现问题 如果JVM中的堆内存太小,就会频繁地出发GC,而每次GC会将用户线程暂停,所以,频繁地GC会导致长时间的停顿.如果扩大计算的内存的大小,就能 ...

  8. 关于Android手机CPU不同架构的问题

    1.共有7种架构 armeabiv-v7a: 第7代及以上的 ARM 处理器.2011年15月以后的生产的大部分Android设备都使用它. arm64-v8a: 第8代.64位ARM处理器,很少设备 ...

  9. Goldengate搭建

    OGG进程 捕获进程(源端):捕获online redo log或者archived log中增量事务日志 传输进程(源端):把目标端落地的trail文件通过配置的路由信息传输到目标端 网络传输:tc ...

  10. 第一篇:docker 简单入门(一)

    本篇目录 写在最前面的话 docker概念介绍 镜像的概念.容器的概念 docker的安装介绍 写在最前面的话 由于此类文章博客园鉴定为简单文章,所以已经移到csdn[https://blog.csd ...