多媒体教程 - GIF 图

GIF 是在 Web 上使用的主要图像格式之一。

本文详细讲解了 GIF 图像的特性和使用技巧。

理解图像格式

无论是 HTML 还是 XHTML 都没有规定图像的官方格式。然而,流行的浏览器却专门规定了一定的图像格式:通常情况下是 GIF 和 JPEG。其他多媒体格式大多需要特殊的辅助应用程序,每个浏览器的使用者都要去获得、安装并正确地操作这些应用程序,这样才能看到或听到这些特殊的文件。所以,GIF 和 JPEG 成为在 Web 上的实际标准也就不令人觉得奇怪了。

在 Web 出现以前,这两种图像格式已经得到了广泛使用,所以有大量支持软件可以帮助我们以这两种格式创建图像。然而,这两种格式各自有其优缺点,有些浏览器会利用其特性来实现特殊的显示效果。

GIF

GIF 格式指的是图像交换格式(Graphics Interchange Format,GIF),该格式最初是 CompuServe 为其在线服务用户传输图像而开发的。

GIF 格式的特性

GIF 格式有很多特性,因此在 HTML/XHTML 中十分普及。

首先,它的编码技术在许多平台上都可以使用。所以,通过适当地 GIF 解码软件(大多数浏览器都含有这种软件),在 Macintosh 上创建并组成 GIF 文件的图像,在基于 Windows 的 PC 上也可以毫不费力地加载、解码并查看。

GIF 格式的第二个特性是,它采用了一种特殊的压缩技术,可以显著减小图像文件的大小,从而得以在网络上更快地进行传输。而 GIF 压缩是“无损”压缩,也就是说,图像中原来的数据都不会发生改变或丢失,所以解压缩并解码后的图像与原来的图像完全一样。

此外,GIF 图像还非常容易实现动画效果。

GIF 格式的版本和颜色

尽管 GIF 图像文件都用 .gif (或者 .GIF)作为文件名后缀,实际上却有两个 GIF 版本:原始的 GIF87 和 GIF89a,后者支持很多新特性,包括透明背景、交叉存储和动画等,这些特性在 Web 创作者中的使用十分普及。

现在流行的浏览器都支持这两种 GIF 格式,它们都是通过同一种方案来把 8 位的像素值映射到一个颜色表当中,这样每个图像最多可以有 256 种颜色。

大多数 GIF 图像实际颜色的数目更少,有些特殊工具(比如 Macromedia 的 Fireworks)可以在更为精细的图像中简化这些颜色。通过简化颜色,可以创建更小的颜色映像并且强化像素冗余,来使文件压缩得更多,从而使下载速度更快。

然而,由于颜色数目有限,用 GIF 编码的图像并不是任何时候都适用,尤其是对那些具有照片一样逼真效果的图片来说。GIF 可以用来创建非常好看的图标和颜色不多的图像及图画。

即使是非常挑剔的创作者也会选择 GIF

因为大多数图形浏览器都明确地支持 GIF 格式,因此它现在是 Web 上接受面最广泛的图像编码格式。内联图像和外部链接图像都可以使用这种格式。如果你在选择图像格式方面犹豫不决,使用 GIF 肯定没错。它几乎在所有情况下都可以正常使用。

GIF 图像的技巧

GIF 图像有三种特殊的技巧:隔行扫描(interlacing)、透明性(transparency)和动画(animation)。

隔行扫描

通过隔行扫描,GIF 图像可以在屏幕上一下子显现出来,而不是从上到下逐步地显示。一般情况下,用 GIF 编码的图像是像素数据从图像的顶部到底部顺次、逐行排列的一个序列。所以,普通的 GIF 图像在屏幕上显示时,就好像一下子拉开窗帘,而具有隔行扫描的 GIF 在显示时,则像卷起百叶窗一样。这是因为像素数据的序列是每隔 4 行就交错一次。用户只需要用下载并显示一整幅图像的四分之一时间,就可以看到一个从上到下非常完整的图像,虽然它很模糊。这个只完成了四分之一的图像通常已经足够清楚了,这样那些网络连接速度较慢的用户就能够判断出,是否有必要花时间下载图像其余的部分。

尽管所有的图形浏览器都能够显示隔行扫描 GIF,但并不是所有浏览器都可以显示出隔行扫描那种逐渐清晰的效果。即使是那些可以实现这种效果的浏览器,用户还可以通过选择在图像完全下载并解码后再显示,来抑制这种效果。老式浏览器总是当图像完全下载并解码后才会显示,所以根本不支持这种效果。

透明性

GIF 图像(实际上是 GIF89a 格式的图像)另外一种常见的效果,是它可以让图像的一部分变成透明效果,这样图像下面的内容(通常是浏览器的窗口背景)就可以透过透明部分显示出来。透明的 GIF 图像在它的颜色映射里专门用一种颜色作为背景颜色,从而让显示窗口的背景透过来。通过仔细地剪切图像的大小和选择一种接近纯色的背景颜色,透明图像可以制作成看上去好像完全镶嵌在网页中,或者是浮动在上面的效果。

透明 GIF 图像适合于任何希望融入文档当中但又不希望看上去是个方块的图形。透明的 GIF 徽标十分常见,如透明图标或者印刷符号等 - 任何具有任意的自然形状的图像都可以使用这种效果。还可以在传统文本中插入透明的内联图像,以便在其中显示特殊的字符符号。

GIF 图像的透明效果有一个不好的地方,就是如果把它包含在超链接锚(<a>)标签里面而没有去掉它的边框,或者用框架专门将它括起来时,它看上去会十分糟糕。而且其他内容会围绕图像的矩形边框显示,而不是靠近图像的不透明边框。这样的结果就是不必要地把图像隔离出来,或者使网页看上去非常古怪。

动画

GIF89a 格式图像的第三个独特之处是,它可以实现简单的逐帧动画。通过使用特殊的 GIF 动画工具软件,就可以把一系列 GIF 图像放在一个单独的 GIF89a 文件中。浏览器会相继显示文件中的每个图像,就像我们小时候曾经玩过的(甚至画过的)那种通过快速翻页产生动画效果的小册子。在 GIF 文件中,每个图像之间都具有特殊的控制部分,可以用来设置浏览器从头到尾显示整个序列(循环)的次数,每两个图像之间停顿的时间,以及在浏览器显示后面一个图像之前是否从背景中抹去图像空间,等等。通过把这些特性与那些 GIF 通常具有的特性(包括单独的颜色表、透明性、隔行扫描等)结合起来,就可以创造出非常有吸引力而且非常精致的图像。

简单的 GIF 动画之所以具有强大的效果,还有另外一个重要的原因:不需要特地为 HTML 文档编写程序就可以获得动画效果。但它也有一个非常大的毛病,那就是它局限在一些象图标大小般很小的图形中,或者是只占据浏览器窗口中很窄一条的图形当中:即使你非常谨慎地没有在连续的动画单元中重复静态部分,GIF 动画也是非常容易变得很大。这样,如果文档中包含了多个动画,那么下载这些图像的拖延时间可能会令用户非常反感。如果说有什么特性值得我们非常小心仔细地对待而不至于滥用的话,那就是 GIF 动画。

总结

GIF 的所有技巧 - 隔行扫描、透明性和动画 - 都不是随随便便就可以获得的,它们都需要特殊的软件来准备这些 GIF 文件。现在很多图像软件都可以把用户创建的或者从外部获得的图像保存为 GIF 格式,而且大多数都支持透明效果,还可以实现 GIF 文件的隔行扫描效果。还有非常多专门为这些需要而设计的大量共享软件或免费软件,包括实现 GIF 动画的软件程序等。

gif图简介的更多相关文章

  1. 18、面向对象基本原则及UML类图简介

    18.1.面向对象基本原则 18.1.1.面向抽象原则 抽象类特点: a.抽象类中可以有abstract方法,也可以有非abstract方法. b.抽象类不能用new运算符创建对象. c.如果一个非抽 ...

  2. Uml学习-类图简介

    类图(Class Diagram)简介  类图是面向对象分析(OOA,Object-Oriented Analysis)和面向对象设计(OOP,Object-Oriented Deisgn)思想的重要 ...

  3. ENode 2.8 最新架构图简介

    ENode架构图 什么是ENode ENode是一个.NET平台下,纯C#开发的,基于DDD,CQRS,ES,EDA,In-Memory架构风格的,可以帮助开发者开发高并发.高吞吐.可伸缩.可扩展的应 ...

  4. UML用户指南--UML图简介

    本节和大家一起学习一下UML图,这里主要介绍UML结构图和UML行为图两部分,下面让我们一起看一下UML图的详细介绍吧. UML图 这里再次提到对软件体系结构进行可视化.详述.构造和文档化,有5种最重 ...

  5. UML类图简介

    概述 设计模式中常常使用UML来表示类与类,类与接口之间的关系,UML类图是设计模式入门必备的技能,感觉各种关系比较多,这里做一下总结. 类与接口的表示 类与接口通常是一个矩形框表示,一般分为3层,第 ...

  6. MSSQL-sql server-视图简介

    转自:http://www.maomao365.com/?p=4511 一.视图简介 视图在MSSQL中是一张虚拟表. 视图的数据由sql语句定义生成,视图中指定新生成数据的列名称和数据格式,视图中的 ...

  7. 用PNChart绘制饼状图简介

    写在前面 最近做的小Demo中有一个绘制饼状图的需求.在开始实现之前上网了解了一下现有的一些绘制图形的第三方库,相应的库还是有挺多的,PNChart便是其中一个.PNChart是一个90后的中国boy ...

  8. Spark学习之路 (二十七)图简介

    一.图 1.1 基本概念 图是由顶点集合(vertex)及顶点间的关系集合(边edge)组成的一种数据结构. 这里的图并非指代数中的图.图可以对事物以及事物之间的关系建模,图可以用来表示自然发生的连接 ...

  9. Pert图简介

    活动图,即工程网络技术,又称PERT(Project Evaluation and Review Technique,PERT)技术. 参考地址: http://www.cnblogs.com/jiq ...

随机推荐

  1. sql递归函数(自定义函数递归查找) 能返回递归的层次

    实现效果图如下: 创建表: create table t_tree ( id int IDENTITY(1,1), parentid int, name varchar(10) ) go 插入测试数据 ...

  2. MFC DialogBar 按钮灰色不响应

    在MFC单文档加添加DialogBar,然后在DialogBar上添加按钮,会出现如下情况,单击无响应. 解决方案: 在 CSideDialogBar头文件和CPP文件里添加如下函数 afx_msg ...

  3. C语言调用汇编实现字符串对换

    1. 前面配置arm交叉编译环境. 2. 配置好qemu-arm C语言代码string-switch.c: #include <stdio.h> #include <stdlib. ...

  4. 多IDC数据分布--MySQL多机房部署 - 学习笔记 - 51CTO技术博客

    多IDC数据分布--MySQL多机房部署 - 学习笔记 - 51CTO技术博客 多IDC数据分布--MySQL多机房部署

  5. Linux达人养成计划1(第2章 Linux系统安装)

    2.3 系统分区之分区与格式化 1. 分区类型 主分区:最多只能有四个. 扩展分区: 最多只能有1个. 主分区加扩展分区最多有4个. 不能写入数据,只能包含逻辑分区. 逻辑分区: 2. 格式化(高级格 ...

  6. 一次服务器CPU占用率高的定位分析

    现象: 当前项目启动一段时间,有一个服务导致CPU使用率持续超过30% 环境:Windows 7,  CPU: 8核, 内存: 8g内存 定位过程: 启动项目,查看Java进程ID 查看Event P ...

  7. MyEclipse中Web项目的发布和运行

    1.右键对应项目的名称:MyEclipse|Add and Remove Project Deployments... 2.点击Add按钮,选择Tomcat7.x,Deploy type选择Explo ...

  8. Android中shape属性详解

    一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标签怎么用. 1.新建shape文件 首先在res/drawable文件夹下,新建一个文件,命名为:shape_radius.x ...

  9. Android项目svn代码管理问题[转]

    用svn控制版本,svn本身是不会识别哪些该传,哪些不该传,这就导致有些关于路径的东西(比如拓展jar的路径)也被上传了,而当别人下载后,那个路径对于这个人可能完全不存在,项目编译就会出问题.用ecl ...

  10. Cocos2d-x3.0TestCpp文件夹笔记(二)

    3.Actions-Basic:此demo中体现ccp由Point取代 ①ActionManual:直接设置精灵的属性demo. const Color3B Color3B::RED    (255, ...