gif、jpg、png格式的图片在网站制作中的区别

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图片的边缘会显示得更加平滑。

对png8的误解

Png8的在ie中的怪异表现

半透明的png8在ie6以下的浏览器显示为全透明。

alpha透明的全色PNG(png32)在ie6中会出现背景颜色(通常是灰色)

由上面可以总结:

(a)全透明的png8可以在任一浏览器正常显示(就像gif一样)。半透明的png8在除了ie6及其一下的浏览器下错误的显示成全透明,其它的浏览器都能正常显示半透明。这个bug并不需要特殊对待,因为在不支持半透明的浏览器下只能显示为全透明,对用户体验影响不大,它反而是透明gif的加强版。

(b)第二个bug没有什么好的方法解决,只有通过影响性能的方法AlpaImageLoder与需要加特殊标签(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. 简述UDF/UDAF/UDTF是什么,各自解决问题及应用场景

    UDF User-Defined-Function 自定义函数 .一进一出: 背景 系统内置函数无法解决实际的业务问题,需要开发者自己编写函数实现自身的业务实现诉求. 应用场景非常多,面临的业务不同导 ...

  9. Python 经典面试题汇总之网络篇

    网络篇 1.简述 OSI 七层协议 物理层:定义物理设备标准,如网线的接口类型.光纤的接口类型.各种传输介质. 数据链路层:定义如何传输格式化数据,以及如何访问物理介质. 网络层:定义逻辑网络地址. ...

  10. 315道python面试题(参考答案)

    第一部分 Python基础篇 1:为什么学习Python 家里有在这个IT圈子里面,也想让我接触这个圈子,然后给我建议学的Python, 然后自己通过百度和向有学过Python的同学了解了Python ...

随机推荐

  1. nginx keepalived 主从切换

    注:  LVS + Keepalived  不知道为什么出现一个很郁闷的问题....... ------------------------------------------------------ ...

  2. sort用法

    一.sort用法sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出.vim 1.txt 1:datadir=/aaa/zzz:2: ...

  3. print打印网页相关

    作者:zccst 1,CSS <link href="/style/print.css" rel="stylesheet" type="text ...

  4. CastleWindsor 使用说明

    1.引用DLL Castle.Core.dll  和Castle.Windsor.dll 2. 引用命名空间 using Castle.MicroKernel.Resolvers.Specialize ...

  5. PHP利用数组构造JSON

    问题起因 以往都是直接用构造数组的形式构造json 例子: $arr = array("A"=>"1","B"=>"2 ...

  6. SQL数据库修复/数据库置疑修复

    SQL数据库修复的三大核心技术: 1.磁盘阵列分析重组技术: 2.数据库恢复与修复技术: 3.SCSI盘物理故障开盘技术. 至今已经成功恢复数百台服务器的SQL数据库,用户覆盖全国. 导致SQL数据库 ...

  7. ECshop中的session机制理解

    ECshop中的session机制理解     在网上找了发现都是来之一人之手,也没有用自己的话去解释,这里我就抛砖引玉,发表一下自己的意见,还希望能得到各界人士的指导批评! 此session机制不需 ...

  8. python 日期格式化常用标记

    符号   说明             例子    %a  英文星期的简写 Mon  %A  英文星期的完整编写 Monday  %b  英文月份的简写 Jun  %B  英文月份的完整编写 June ...

  9. Quartz2D 之 简单使用

    1. 获取Graphics Context CGContextRef ctx = UIGraphicsGetCurrentContext(); 2. 最后的渲染接口 CGContextStrokePa ...

  10. jQuery插件开发详解

    我们该如何扩展jQuery呢?主要可以通过下面2个来扩展:$.extend 和 $.fn $.extend如果把jQuery当成一个类,$.extend相当于为该类添加了静态方法extend. < ...