几种常用图像格式的教学应用剖析

陆元明

（深圳大学师范学院，广东深圳 518060）

教学图像不仅是教学系统的最重要资源之一，也是教学系统最主要的人机交互元素之一，它对教学的重要性是不言而喻的，我们经常花很多功夫去研究教学系统里的声音、视频、动画，甚至网络流媒体等教学资源，而很少有专门针对教学图像格式的研究，这里所做的初步尝试性分析，希望起到抛砖引玉的作用。

一、教学图像的重要共性

1.图像格式

各种图像格式的不同之处在于表示图像数据的方式，并且它们支持不同的压缩方法和Photoshop 功能。图像的标准位深度是8 位/通道，除非是图像处理类课程的特例，教学图像通常不需要涉及更多的位深度。

适用于教学的图像格式，种类不少，但真正常用、兼容性又好的却并不多，在充分研究这些格式特性的基础上用好它们，是本文的初衷。

2.分辨率设置

在调整图像大小的时候，可以设置分辨率，因为绝大多数教学图像都是用于教学网站、网络课程、课堂教学用演示文稿或者教学软件等几个方面，极少有涉及高分辨率打印输出等情况，因此可将教学图像分辨率固定设置为72PPI 或者96PPI，而以96PPI 为更好（以适应高清显示器已经广泛应用这个现实），只有用GIF 格式制作教学动画时，可以选择72PPI，这是因为动画本身的尺寸比较小。

由于显示器物理分辨率是固定的，在教学图像中使用更高的分辨率，通常只是无谓增加了传输、解压和系统的负担，有害无益，这应当成为共识和常识。

3.存储为Web 所用格式

“存储为Web 所用格式”是Photoshop“文件”菜单下的选项，其键盘快捷键为Alt+Shift+Ctrl+S，这种存储方式往往不容易被人们注意到，但它却是生成教学图像的最佳方式，理由如下：

（1）三种最常用的教学图像格式，GIF、JPEG 和PNG 都可统一用这种方式生成；

（2）每种图像格式，都有针对Web 和电脑显示的完整优化选项，适应性极强；

（3）过去Photoshop 附带的Image Ready 位图编辑器已经被这个功能替代，即：“存储为Web 所用格式”是Photoshop 生成GIF 动画的唯一方法。

二、JPEG 格式图像及其教学应用

1.JPEG 格式图像概述

JPEG (联合图像专家组) 格式是在 World Wide Web 及其他联机服务上最常用的一种格式（如图1），用于显示超文本标记语言 (HTML) 文档中的照片和其他连续色调图像，它是大多数数码相机的默认记录格式。JPEG 格式支持 CMYK、RGB 和灰度颜色模式，但不支持透明度。与 GIF 格式不同，JPEG 保留 RGB 图像中的所有颜色信息，但通过有选择地扔掉数据来压缩文件大小。

JPEG 图像在打开时自动解压。压缩级别越高，得到的图像品质越低；压缩级别越低，得到的图像品质越高。在大多数情况下，“最佳”品质选项产生的结果与原图像几乎无分别。

JPEG 使用有损压缩，建议对连续色调图像（如照片）使用此压缩方法，若要指定图像的品质，当用Photoshop 保存时，请在“品质”文本框中输入 0 至12 之间的一个值。如果图像需要高分辨率打印输出，请选取最佳品质压缩。但对大多数教学应用，品质“高”（对应值8）已经足够。

2.JPEG 图像的教学应用及处理方法

（1）就教学而言，JPEG 格式通常用于教学网站上的照片展示、网页的背景图片、网络课程的“Banner”（横幅渐变图片）、教学示意图/原理图、幻灯片放映用图、课堂演示文稿的母版背景图、教学软件插图以及在其他在线服务中显示照片和其他连续色调图像；

（2）由于其压缩品质可选，所以适应范围很广，既可以是非常简洁的图符，也可以是用以研究图像处理效果的高清晰度大图；

（3）需要注意的是，由于JPEG 不支持透明度，所以作为背景类或者装饰性的图片使用时，通常要进行一些加工，在Photoshop 中，“以快速蒙板模式”编辑、使用自定形状工具和图层样式制作特别的边框、在蒙板上使用渐变填充、调整图层不透明度和图层混合模式、使用各种滤镜等，是常用的方法。

依据前文，“存储为Web 所用格式”是生成教学图像简便而又更加适当的方式，如图1 所示，“品质”可选0 至100，这里选了“非常高”（默认为80），默认勾选“连续”，这时网络图片将以多条路径下载，而“优化”用以创建更小但兼容性更低的文件，“图像大小”用于改变尺寸，如果是缩小，通常选择插值算法“两次立方（较锐利）”，其他选项较少用到，读者可自行参阅相关文献或Adobe 的帮助文件。

图1 存储为Web 所用格式：JPEG 选项

三、GIF 格式图像：图片动画的唯一选择

1.GIF 格式图像概述

图形交换格式 (GIF) 是在 World Wide Web 及其他联机服务上常用的一种文件格式(如图2)，用于显示超文本标记语言 (HTML) 文档中的索引颜色图像。GIF是一种用 LZW 压缩的格式，目的在于最小化文件大小和传输时间。GIF 格式保留索引颜色图像中的透明度，但不支持 Alpha 通道。

2.GIF 图像的教学应用价值

GIF 与JPEG 同为最早出现、最常用的图像格式，它有以下三大特点，注定了其广泛的教学应用价值：

（1）GIF 采用索引颜色模式，最多256 色，这个特性使得文件可以变得非常小，尤其适合教学插画、图符、教学示意图或原理图等类不需要太多颜色的教学应用；

（2）GIF 支持透明度，这样插入的图片可更好地与教学应用情景融为一体，而不需要专门设置，图2 所示的是一个256 色，抠为透明背景的教学插图，文件很小，可以方便自然地应用到教学网页、网络课程、演示文稿或者教学软件中，而无须额外处理；

（3）GIF 是唯一支持动画的图像格式，与FLASH 等需要插件或播放器的动画不同，GIF 动画天然被各种教学应用环境所支持，不需要任何设置！设计精巧的GIF动画可以给教学应用带来丰富的多媒体感受和教学交互性（例如设置形象生动的超级链接等）。

图2 存储为Web 所用格式：GIF 选项

四、PNG 格式图像：教学应用前途广阔

1.PNG 格式图像概述

便携网络图形 (PNG) 格式是上世纪90年代中期作为GIF 和TIFF 的无专利替代品开发的，同时增加了一些GIF 文件格式所不具备的特性，用于无损压缩和在Web 上显示图像。PNG 格式支持无Alpha 通道的RGB、索引颜色、灰度和位图模式的图像。

PNG 格式有PNG-8 和PNG-24 两种，都支持透明度，而前者跟GIF 类似，同样采用8 位调色板，将RGB 彩色图像转换为2 至256 种索引仿色，它很适合那些颜色比较单一的图像，例如Logo、图标等；PNG-24 与GIF 不同，它支持24 位真彩色和256 级透明度，使得彩色图像的边缘能与任何背景平滑地融合，从而彻底地消除锯齿边缘，这种功能是其他图像格式没有的；此外，PNG 具备流式读/写性能(stream ability)，即允许连续读出和写入图像数据，这个特性很适合在网络教学过程中生成和显示图像。

PNG 出现较晚，很多网络浏览器经过很长时间才开始完全支持PNG 格式，如微软的IE 浏览器一直到7.0版才支持PNG 格式中的半透明效果，但它后来居上，在许多教学情境下可以更好地替代JPEG 和GIF 格式。

2.PNG 图像的教学独特应用

（1）PNG-24 格式同时拥有256 级透明度和真彩色支持两大属性，这在图像格式中是独一无二的，可适用于制作教学图标、Logo、教学示意图、流程图、带透明渐变的背景图、各种材质的镂空文字、带自定形状边框的高清图片等等几乎所有教学环境；

（2）更优化的网络传输性能（流式特性）、更小的体积和能够无损压缩等优异特点，使其成为未来教学图像应用，特别是网络教学方面非常有前途的格式；

（3）在目前的智能移动设备上，PNG 已经成为最主流的图像格式之一，它在移动学习方面（例如以平板电脑为主的“电子书包”）的应用重要性，将是不可替代的。

图3 为“存储为Web 所用格式”，预设选“PNG-24”时的对话框，其中“交错”复选框用以让图片“以多条路径下载”。

图3 存储为Web 所用格式：PNG 选项

示例图片使用了苹果自定形状做蒙版抠图，又用了“金子”图层样式做特色边框，再在图层蒙板中用黑白渐变工具示范了连续渐变半透明效果。

五、PDF 格式：理想的电子教材

便携文档格式 (PDF) 是一种灵活的、开放标准的、跨平台和跨应用程序的文件格式，2007年12月成为国际标准。

基于 PostScript 成像模型，PDF 文件精确地显示并保留字体、页面版式以及矢量和位图图形，无论在哪种打印机上都可保证忠实地再现原稿的每一个字符、颜色以及图像。另外，PDF 文件可以包含电子文档搜索和各种导航功能等。

PDF 包括Photoshop PDF 和通用PDF 两种类型，后者更多是图像和文本等的混合文件类型，这里将它作为常用图像格式来推介，是因为它具有以下两种特别的教学应用价值：

1.交互式多媒体电子书

PDF 电子书制作简单、排版美观、图文并茂、兼容性好，更重要的是具有很强的交互功能，如翻页、跳转、超级链接到网页或音视频等，还可随意放大缩小阅读、圈点标注等，是最常用的电子书格式。

通过新版本Adobe Acrobat 等软件制作的PDF 电子书，不仅可以通过链接、书签等方式激活多媒体，甚至可以在页面上直接播放包括各种格式的音频、视频和交互多媒体（如SWF）在内的各种多媒体文件。

另外，PDF 电子书通过安全性设置，可以有效地保护知识产权，例如限制电子书的阅读、打印、内容复制和编辑等。

2.高度精确的教材打印

笔者曾对我市中学教师开设《教学图像处理：应用与研究》继续教育课程，印刷自编教材时遭遇较严重的排版问题：在Word 中我已经对特别选择的美观中文字体做了“将字体嵌入文件”处理，并将无法嵌入的专利字体转换为PNG 图片了，但在其他电脑上依然会出现版式混乱等情况，反复折腾几次后，最终选择将文件另存为PDF 格式，打印时一切问题都不存在了，在Word 中的诸多设置变为多余！

注：Office2010 起已经整合另存为PDF 格式功能，老版本则需安装和使用“Microsoft 另存为PDF 或XPS加载项”。

PDF 的优点在于跨平台、能保留文件原有格式，字型嵌入系统是其特色技术之一，可使字型随文件一起传输。此外，Photoshop PDF 文件能在PDF 中保留Photoshop 数据，如图层、Alpha 通道、路径和专色等，并支持几乎所有颜色模式，而文件大小和兼容性都优于PSD 格式，可作为图像处理教学的一种可选存储格式。

六、结束语

本文介绍的四种图像格式，也是最常用的教学图像格式，在各教学领域中的应用价值很高，这方面的专门思考虽然不多，但不知不觉的应用已经在教学中不断开展。

表1 概括了四种图像格式的特点，根据教学应用的不同，我们应该有的放矢地选择不同图像格式，以达到优化教学资源的目的。

表1 四种常用图像格式的特点对比

总体来说，JPEG 适用于不需要透明度的连续色调教学场景，例如照片插图和背景图（有时需额外处理），它的特点是压缩程度灵活可调、兼容性好；GIF 是唯一支持教学动画的格式，有利于促进教学交互性，而它对透明度的有限支持，又可用于颜色不多的简洁图标或教学示意图等的创建；PNG 是最有教学应用前景的一种格式，除了不支持动画外，它几乎可以在所有方面替代前面两种格式；PDF 更多时候是一种混合媒体格式，它支持多媒体和交互性很强的电子书，同时可用于高保真的教学文档打印。

[1]Adobe帮助系统 [DB/OL].http://helpx.adobe.com/cn/photoshop,2014.

[2]维基百科：JPEG [DB/OL].http://en.wikipedia.org/wiki/JPEG,2014.

[3]维基百科：GIF [DB/OL].http://zh.wikipedia.org/zh-cn/GIF,2014.

[4]维基百科：PNG [DB/OL].http://zh.wikipedia.org/zh-cn/PNG,2014.

[5]PNG 功能规范白皮书（最新版）[DB/OL].http://www.w3.org/TR/PNG,2003.

[6]维基百科：PDF [DB/OL].http://zh.wikipedia.org/zh-cn/PDF,2014.