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. (简单) POJ 2502 Subway,Dijkstra。

    Description You have just moved from a quiet Waterloo neighbourhood to a big, noisy city. Instead of ...

  2. jquery.mustache.js使用

    作者:zccst jquery.mustache是用jQuery做了一层封装,提供了以下几个方法,让模板使用更便捷. 1,添加模板,使用异步的方式 var viewData = { name: 'Jo ...

  3. ARM裸机开发中内存管理库RT_HEAP的使用

    在使用arm芯片进行裸机开发的时候,很多时候都需要内存管理的功能,我们可以使用自己写的内存管理程序,也可以直接使用标准库,不过我一般比较喜欢标准库,速度快,今天就来说说在C语言环境下怎么样进行内存的动 ...

  4. Codeforces#360Div2

    A题 题意:给定d个操作,每个操作当中只包含1和0,若存在0,则表示操作者获胜,求最大的连续获胜个数 分析:直接统计之后用一个数组纪录下来即可 #include <iostream> #i ...

  5. ubuntu apache2 ssl配置

    Ubuntu下HTTPS配置非常简单,对大部分用户而言,使用普通的自签名证书,只需按照步骤进行就可以了,无需了解密钥.证书的更多知识,更深的背景 知识还有RSA算法.DES算法.X509规范.CA机构 ...

  6. 如何使用UDP进行跨网段广播(转)

    源:如何使用UDP进行跨网段广播 广播域首先我们来了解一下广播域的概念.广播域是网络中能接收任一台主机发出的广播帧的所有主机集合.也就是说,如果广播域内的其中一台主机发出一个广播帧,同一广播域内所有的 ...

  7. FZU 2101 大三的美好时光

    DP+离散化. 首先需要把时间离散化,剩下的就是简单DP. 还要判断哪些选修课与必修课时间有重合,我用了前缀和来处理. 注意:这题时间端点也不能重合. #include<cstdio> # ...

  8. Mac iTerm2使用rz、sz从远程上传下载文件

    使用 brew install lrzsz .如果安装遇到错误的话,使用以下方法: 在mac终端下运行: brew install lrzsz (安装教程:http://brew.sh/index_z ...

  9. iOS中UITextField 使用全面解析 分类: ios技术 2015-04-10 14:37 153人阅读 评论(0) 收藏

    //初始化textfield并设置位置及大小   UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 13 ...

  10. 《剑指Offer》笔记(更新中)

    这几天为了找工作开始看<剑指offer>,到现在也大概浏览一遍了,前两天看作者博客中提到九度OJ,就去看了一下,发现上面有书上的题目,就想可以自己写代码练习一下,而不仅仅是看解题思路,毕竟 ...