最近有很多朋友在开发过程中有时候会遇到图片加载不清晰,透明度失真,或者对图片进行操作之后造成图片损耗的现象,在这里给大家简单介绍一下常用的几种图片格式之间的区别

Gif格式特点:
  1.透明性,Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha透明)。
  2.动画,Gif这种格式支持动画。
  3.无损耗性,Gif是一种无损耗的图像格式,这也意味着你可以对gif图片做任何操作也不会使得图像质量产生损耗。
  4.水平扫描,Gif是使用了一种叫作LZW的算法进行压缩的,当压缩gif的过程中,像素是由上到下水平压缩的,这也意味着同等条件下,横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小
  5.间隔渐进显示,Gif支持可选择性的间隔渐进显示
  由以上特点看出只有256种颜色的gif图片不适合照片,但它适合对颜色要求不高的图形(比如说图标,图表等),它并不是最优的选择,我们会在后面中看到png是最优的选择。
  Jpeg格式特点:
  1.透明性,它并不支持透明。
  2.动画,它也不支持动画。
  3.损耗性,除了一些比如说旋转(仅仅是90、180、270度旋转),裁切,从标准类型到先进类型,编辑图片的原数据之外,所有其它操作对jpeg图像的处理都会使得它的质量损失。所以我们在编辑过程一般用png作为过渡格式。
  4.隔行渐进显示,它支持隔行渐进显示(但是ie浏览器并不支持这个属性,但是ie会在整个图像信息完全到达的时候显示)。
  由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。
  Png格式特点:
  1.类型,Png这种图片格式包括了许多子类,但是在实践中大致可以分为256色的png和全色的png,你完成可以用256色的png代替gif,用全色的png代替jpeg
  2.透明性,Png是完全支持alpha透明的(透明,半透明,不透明),尽管有两个怪异的现象在ie6(下面详细讨论)
  3.动画,它不支持动画
  PNG图片格式现在包含三种类型:
  1.PNG8256色PNG的别名
  2.PNG24全色PNG的别名
  3.PNG32全色PNG的别名
  基本上PNG32就是PNG24,但是附带了全alpha通道。就是说每个像素上不仅存储了24位真色彩信息还存储了8位的alpha通道信息,就如同GIF能存储透明和不透明信息一样。当我们把图片放到不太搭配的背景上的时候,透明PNG图片的边缘会显示得更加平滑。
  虽然Photoshop也能生成带透明通道的PNG图片,但是它只是表面上这么说是PNG24,让我也产生困惑了。
  我使用PNG32支持附带alpha通道的真色彩图片。不管怎样,如果你习惯使用Photoshop,你就应该知道,Photoshop在“存储为WEB格式”中只提供PNG8和PNG24两种PNG格式。
  
  对png8的误解
  Png8的在ie中的怪异表现:
  半透明的png8在ie6以下的浏览器显示为全透明。
  Alpha透明的全色PNG(png32)在ie6中会出现背景颜色(通常是灰色)。
  由上面可以总结:
  (a)全透明的png8可以在任一浏览器正常显示(就像gif一样)。半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明,其它浏览器都能正常显示半透明。这个bug并不需要特殊对待,因为在不支持半透明的浏览器下只是显示为全透明,对用户体验影响不大,它反而是透明gif的加强版。
  (b)第二个bug没有什么好的方法解决,只能通过影响性能的方法AlphaImageLoader与需要加特殊标签(VML)。
  因此得出结论就是:请使用PNG8。
  Png8的软件问题:
  Photoshop只能导出布尔透明的PNG8。
  Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8.
 

简述.jpg .Gif .png-8 .png-24的区别的更多相关文章

  1. 简述jpg。Gif。png-8.png-24的区别,分别使用场景

    gif.jpg.png格式的图片在网站制作中的区别 一.Gif格式特点: 1.透明性,Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha透明). 2.动画,G ...

  2. php时间12小时和24小时区别

    date('Y-m-d H:i:s',$row1['time']) 大写H为24小时制 小写h为12小时制

  3. 简述C#中关键字var和dynamic的区别

    C#中关键字var和dynamic的区别如下: 1.var申明的变量必须初始化,dynamic申明的变量无需初始化. 2.var关键字只能在方法内部申明局部变量,dynamic关键字可用于局部变量,字 ...

  4. 简述sprintf、fprintf和printf函数的区别

    都是把格式好的字符串输出,只是输出的目标不一样:1 printf,是把格式字符串输出到标准输出(一般是屏幕,可以重定向).2 sprintf,是把格式字符串输出到指定字符串中,所以参数比printf多 ...

  5. [转] 简述js中 for in 与 for of 区别

    for in是ES5标准,遍历key. for of是ES6标准,遍历value. for (var key in arr){ console.log(arr[key]); } for (var va ...

  6. 简述var、let、const三者的区别

    前二者为定义变量,const一般用来定义常量. 1.var声明变量可以重复声明,而let不可以重复声明 var name = 'xiaohuang'; var name = 'xiaolan'; co ...

  7. 简述Python中的break和continue的区别

    众所周知在Python中,break是结束整个循环体,而continue则是结束本次循环再继续循环. 但是作为一个新手的你,还是不明白它们的区别,这里用一个生动的例子说明它们的区别,如下: 1.con ...

  8. Unity3D面试题汇总

    1.请描述游戏动画有哪几种,以及其原理. 2.alpha blend 工作原理 3.写光照计算中的diffuse的计算公式 4.lod是什么,优缺点是什么 5.两种阴影判断的方法工作原理 6.MipM ...

  9. 去蓝港在线面试Unity3D的笔试题。难吗?知道答案的在评论里写出来分享

    前一阵子去蓝港面试unity3d程序,在前台登记以后被领到一个吧台前面填2张个人信息表,之后有人送来笔试题,做了1个小时,感觉挺难的.之后被带到下面面试,面试的是一个年龄稍大的(可能是项目经理或者技术 ...

  10. 前端面试题总结:HTML5,JS,CSS3,兼容性。

    1. 请写出至少20个HTML5标签 <article><aside> <audio><video> <canvas><datalis ...

随机推荐

  1. problem 202,263、232、21、231

    [263]Ugly Number Write a program to check whether a given number is an ugly number. Ugly numbers are ...

  2. onethink的熟悉

    2014.07.14 下载后,并安装成功! 发现一个安装的问题.安装时,无法直接成功. 修改Url 直接跳到最后一步,实现了安装.去官网查询,发现是程序的问题. 尝试构建企业官网. 首先 实现一个企业 ...

  3. Mybatis oracle多表联合查询分页数据重复的问题

    Mybatis oracle多表联合查询分页数据重复的问题 多表联合查询分页获取数据时出现一个诡异的现象:数据总条数正确,但有些记录多了,有些记录却又少了甚至没了.针对这个问题找了好久,最后发现是由于 ...

  4. Java解析JSON文件的方法(一)

    一.首先需要在Eclipse工程中导入相关的jar包,jar包参见链接:http://yunpan.alibaba-inc.com/share/link/NdA5b6IFK 二.提供一份待解析的jso ...

  5. spring3.1........jar包下载

    1.common-dbcp-1.4.jar 下载地址:http://commons.apache.org/dbcp/ 2.common-pool-1.6.jar 下载地址:http://commons ...

  6. iOS 之 数组指针

    int a[5]={1,2,3,4,5}; int *p=(int*)(&a+1); //p 相当于int (*p) [5] = &a; // &a+1 p相当于,p移动了a本 ...

  7. C#的显式接口和隐式接口(转载)

    接口的实现分为:隐式实现和显式实现.如果类或者结构要实现的是单个接口,可以使用隐式实现,如果类或者结构继承了多个接口那么接口中相同名称成员就要显式实现.显示实现是通过使用接口的完全限定名来实现接口成员 ...

  8. 如何使用php session

    学会php session可以在很多地方使用,比如做一个后台登录的功能,要让程序记住用户的session,其实很简单,看了下面的文章你就明白了.   PHP session用法其实很简单它可以把用户提 ...

  9. js原生设计模式——2面向对象编程之闭包1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  10. HDU-1233-还是畅通工程(并查集)

    题目链接http://acm.hdu.edu.cn/showproblem.php?pid=1233题目很简单(最小生成树) #include<cstdio> #include<io ...