Web 开发及技术设计10-1

Web开发与技术设计

第十讲

Web上的图像济南大学网络中心孙润元nicstaff@网页中的插图处理这里的插图，是指除系统产生的字符和色彩以外的图形图像。包括广告、图画、照片、文字等等。网页中的插图是网站建设的主要内容之一，就信息发布的角度而言，插图可以起到文字说明不了的内容，同时插图也是网页装饰的主要手段。插图大体可分为两大类型：一是照片类；二是绘画类。

照片类插图

照片类插图是指由数码相机、扫描仪等扫描照片得到的图像，这类图像的特点在于它们能够真实地记录现实中事物的原貌，给人以真实可靠的印象。

从技术上讲，它们属于全色调图像，利用色调的明暗变化，全方位地表现事物的形态结构，空间体积，质感等视觉属性。最典型的就是新闻照片，是图形图像中最为客观真实的一种，。照片类图像是比较容易得到的，除了数码相机拍摄图片以外，普通照片扫描后即可使用。另外，一些图片社、广告公司也提供图片素材光盘，从中可以找到许多精美的图像资料。

照片类插图被广泛地运用于网页设计之中，如宣传产品、发布新闻信息、广告设计、页面装饰美化。

绘画类插图绘画类插图一般来自于手工绘画或软件制作，如常见的卡通图画、装饰图案、文字图形以及用图形图像软件处理加工过的照片等（当然它们也可以绘制出与照片效果类似的3D图像）。绘画类插图在网页设计中具有自己的优势，它可以根据作者的创意，按照网站的风格设计创作画面，使网站的效果统一，富于整体感；它可以随心所欲地创作图像或广告，具有传达信息的优势；另外，这类图像更易于制作成较小的图像文件，更便于网上的传输。一般来说，照片类插图与绘画类插图可以配合使用，这也是电子商务网站的客观需要，只是绘画类插图的创作需有专业人员才能完成。

图像的虚实效果

图像的虚实效果是人对图像的感觉，指的是图像的清晰强烈或模糊含蓄的程度，简单的虚实效果可以这样理解，实：图像清晰，线条分明；虚：图像模糊，色彩浅淡（灰暗）。

图像的虚实效果实的图像

一种是有规范的四边，像未经处理的照片类图像，一般都带有裁切后自然留下的边框，是四条清晰的线条，由于图像的色调、线条与背景色形成强烈的对比，给人以坚硬、实在的感觉，假如网页上的图像都是这种样式，就显得整齐规范，同时也显得死板、生硬；图像的虚实效果实的图像

另一种是不规范外轮廓，即轮廓清晰，其图像背景色与网页背景色一致（将图像背景色处理成透明色），许多卡通画插图都采用这种样式。

图像的虚实效果虚的图像

是指图的外轮廓与网页的背景色自然衔接过渡，给人以十分柔和含蓄的感觉，比较自然地与网页结合为一体。图像的虚实效果虚的图像

另外一种虚的图像，整个色调被极大地淡化处理，作为背景色的图案出现，衬托前景的文字。

图像的格式

计算机的数字图形图像的储存、交换技术上，图形图像的格式就显得十分重要了。没有统一的格式，图形图像就不能方便地在其他计算机上显示，网络上的图形图像更是受到网络传输速度的限制。如何使有限的带宽得到合理的利用，节省浏览者的等候时间，压缩图像文件是十分必要的。用数据压缩工具优化你的图像文件，不但节省有限的信道带宽，加快网上访问速度，同时，还可以节省可观的上网费用（无论是服务器端还是客户端），当然同样可以节省磁盘空间。在网页的制作过程中，首先要确定图像的格式，在HTML文件中使用*.jpg、*.gif、*.bmp等文件格式均可以显示出来，但是绝大多数网页只选择前面的两种，因为这两种文件格式能对图像进行很大程度的压缩，使得在产生相近视觉效果的前提下，图像文件的容量会小很多。

常见的图像文件格式

BMP格式

BMP是英文Bitmap（位图）的简写，它是Windows操作系统中的标准图像文件格式，能够被多种Windows应用程序所支持。随着Windows操作系统的流行与丰富的Windows应用程序的开发，BMP位图格式理所当然地被广泛应用。这种格式的特点是包含的图像信息较丰富，几乎不进行压缩，但由此导致了它与生俱生来的缺点--占用磁盘空间过大。所以，目前BMP在单机上比较流行。

常见的图像文件格式

GIF格式

GIF是英文GraphicsInterchangeFormat（图形交换格式）的缩写。

GIF格式的特点是压缩比高，磁盘空间占用较少，所以这种图像格式迅速得到了广泛的应用。最初的GIF只是简单地用来存储单幅静止图像（称为GIF87a），后来随着技术发展，可以同时存储若干幅静止图象进而形成连续的动画，使之成为当时支持2D动画为数不多的格式之一（称为GIF89a），而在GIF89a图像中可指定透明区域，使图像具有非同一般的显示效果，这更使GIF风光十足。常见的图像文件格式

JPEG格式

JPEG也是常见的一种图像格式，它由联合照片专家组（JointPhotographicExpertsGroup）开发并以命名为"ISO10918-1"，JPEG仅仅是一种俗称而已。JPEG文件的扩展名为.jpg或.jpeg，其压缩技术十分先进，它用有损压缩方式去除冗余的图像和彩色数据，获取得极高的压缩率的同时能展现十分丰富生动的图像，换句话说，就是可以用最少的磁盘空间得到较好的图像质量。

常见的图像文件格式

JPEG2000格式

JPEG2000同样是由JPEG组织负责制定的，它有一个正式名称叫做“ISO15444”，与JPEG相比，它具备更高压缩率以及更多新功能的新一代静态影像压缩技术。

JPEG2000作为JPEG的升级版，其压缩率比JPEG高约30%左右。与JPEG不同的是，JPEG2000同时支持有损和无损压缩，而JPEG只能支持有损压缩。

JPEG2000的一个极其重要的特征在于它能实现渐进传输，这一点与GIF的“渐显”有异曲同工之妙。常见的图像文件格式

TIFF格式

TIFF（TagImageFileFormat）是Mac中广泛使用的图像格式，它由Aldus和微软联合开发，最初是出于跨平台存储扫描图像的需要而设计的。它的特点是图像格式复杂、存贮信息多。正因为它存储的图像细微层次的信息非常多，图像的质量也得以提高，故而非常有利于原稿的复制。该格式有压缩和非压缩二种形式，其中压缩可采用LZW无损压缩方案存储。常见的图像文件格式

PSD格式

这是著名的Adobe公司的图像处理软件Photoshop的专用格式PhotoshopDocument（PSD）。PSD其实是Photoshop进行平面设计的一张"草稿图"，它里面包含有各种图层、通道、遮罩等多种设计的样稿，以便于下次打开文件时可以修改上一次的设计。在Photoshop所支持的各种图像格式中，PSD的存取速度比其它格式快很多，功能也很强大。常见的图像文件格式

PNG格式

PNG（PortableNetworkGraphics）是一种新兴的网络图像格式。PNG是目前保证最不失真的格式，它汲取了GIF和JPG二者的优点，存贮形式丰富，兼有GIF和JPG的色彩模式；它的另一个特点能把图像文件压缩到极限以利于网络传输，但又能保留所有与图像品质有关的信息，因为PNG是采用无损压缩方式来减少文件的大小，这一点与牺牲图像品质以换取高压缩率的JPG有所不同；它的第三个特点是显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像；第四，PNG同样支持透明图像的制作，透明图像在制作网页图像的时候很有用，我们可以把图象背景设为透明，用网页本身的颜色信息来代替设为透明的色彩，这样可让图像和网页背景很和谐地融合在一起。

常见的图像文件格式

SWF格式

利用Flash我们可以制作出一种后缀名为SWF（ShockwaveFormat）的动画，这种格式的动画图像能够用比较小的体积来表现丰富的多媒体形式。在图像的传输方面，不必等到文件全部下载才能观看，而是可以边下载边看，因此特别适合网络传输，特别是在传输速率不佳的情况下，也能取得较好的效果。事实也证明了这一点，SWF如今已被大量应用于WEB网页进行多媒体演示与交互性设计。此外，SWF动画是其于矢量技术制作的，因此不管将画面放大多少倍，画面不会因此而有任何损害。综上，SWF格式作品以其高清晰度的画质和小巧的体积，受到了越来越多网页设计者的青睐，也越来越成为网页动画和网页图片设计制作的主流，目前已成为网上动画的事实标准。常见的图像文件格式

SVG格式

SVG的英文全称为ScalableVectorGraphics，意思为可缩放的矢量图形。它是基于XML（ExtensibleMarkupLanguage），由WorldWideWebConsortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有互交功能，并可以随时插入到HTML中通过浏览器来观看。优势：可以任意放大图形显示，但绝不会以牺牲图像质量为代价；字在SVG图像中保留可编辑和可搜寻的状态；平均来讲，SVG文件比JPEG和GIF格式的文件要小很多，因而下载也很快。

其它非主流图像格式

PCX格式

PCX格式是ZSOFT公司在开发图像处理软件Paintbrush时开发的一种格式，这是一种经过压缩的格式，占用磁盘空间较少。由于该格式出现的时间较长，并且具有压缩及全彩色的能力，所以现在仍比较流行。

DXF格式

DXF（AutodeskDrawingExchangeFormat）是AutoCAD中的矢量文件格式，它以ASCII码方式存储文件，在表现图形的大小方面十分精确。许多软件都支持DXF格式的输入与输出。其它非主流图像格式

WMF格式

WMF（WindowsMetafileFormat）是Windows中常见的一种图元文件格式，属于矢量文件格式。它具有文件短小、图案造型化的特点，整个图形常由各个独立的组成部分拼接而成，其图形往往较粗糙。

EMF格式

EMF（EnhancedMetafile）是微软公司为了弥补使用WMF的不足而开发的一种Windows32位扩展图元文件格式，也属于矢量文件格式，其目的是欲使图元文件更加容易接受其它非主流图像格式

LIC（FLI/FLC）格式

Flic格式由Autodesk公司研制而成，FLIC是FLC和FLI的统称：FLI是最初的基于320×200分辨率的动画文件格式，而FLC则采用了更高效的数据压缩技术，所以具有比FLI更高的压缩比，其分辨率也有了不少提高。

EPS格式

EPS（EncapsulatedPostScript）是PC机用户较少见的一种格式，而苹果Mac机的用户则用得较多。它是用PostScript语言描述的一种ASCII码文件格式，主要用于排版、打印等输出工作。

其它非主流图像格式

TGA格式

TGA（TaggedGraphics）文件是由美国Truevision公司为其显示卡开发的一种图像文件格式，已被国际上的图形、图像工业所接受。TGA的结构比较简单，属于一种图形、图像数据的通用格式，在多媒体领域有着很大影响，是计算机生成图像向电视转换的一种首选格式。

GIF格式

GIF（图形交换格式，

GraphicInterchangeFormat）是早期Web浏览器可显示的第一种图形文件格式。任何图像类型都可以存为GIF文件，但是GIF的卓越之处在于压缩具有单一颜色区的图形。GIF格式是完全与平台无关的，这意味着在任何平台上生成的GIF文件都可以在其他平台上浏览和编辑。它最初是CompuServe公司为在其网络上的不同平台发布图像而开发的，正因为这样，GIF格式有时也被称为“CompuServeGIF”格式。GIF还是所有图形浏览器（无论何种版本）都支持的唯一一种图形文件。GIF格式—GIF87a和GIF89a从技术上分有两种类型的GIF文件：

GIF87a和更新更完善的GIF89a。它们都可以完全被大多数测览器所支持，并且它们的文件名后缀都是．gif。GIF87a是索引色图像的原始格式。它使用LZW压缩并可以选择使用隔行扫描。GIF89a也是一样，只不过它引入了透明度和动画的能力。如果你要为图形添加这些功能，那么，就要使用支持GIF89a格式的工具来制作。今天，在Web设计者之中这些特性已经相当流行，并且这些特性已经成为Web上的实际标准。

GIF格式—8位索引色

GIF文件是索引色图形，即最多可以包含8位颜色信息（也可以被存储为更低的比特率）。这意味着它们最多可以包含256种颜色。更低的位深度将得到更少的颜色，同时文件体积也会更小。

“索引色”

（IndexedColor）指图形中的一套颜色，即图形的调色板，它们被存储于一个颜色表中。图像中的每一个像素都包含对与其对应的颜色的表格单元的参考（或“索引”）当你把一个24位（含有上万种颜色）图形转换为GIF格式时，就有必要先把它转换为索引色模式

（IndexedColorMode），同时在这个过程中，把颜色数目减小至256色或者更少。图形编辑工具会尽可能地使用最恰当的颜色（匹配调色板）接近图形，以近似整个颜色范围。GIF格式—GIF压缩

第一，它是“无损”的压缩，即在压缩过程中不会丢失图形信息，并且所解压的图像和原图是一样的。（注意：在RGB转换为GIF格式的过程中可能会丢失某些信息，但是一旦转换后，它本身的压缩是无损的。）第二，GIF使用LZW（Lempel－Zev－Welch）压缩，LZW利用了数据流循环。用图像术语解释，即LZW压缩对于同一颜色的隔行像素十分有效。举一个简单的例子，当压缩进程“击中”一行中15个相同的蓝色像素时，它将信息存储为句“15blue”，但是当在一行中遇到从蓝色向黑色渐变时，就需要存储对每一个像素的说明，因此这时也要求更多的数据。这正是GIF可以有效存储简单图像的原因，LZW压缩对于单一的颜色区很有优势。

GIF格式—何时使用GIF格式

适合于任何具有单一颜色区的图形，如标志、艺术线条、图标和卡通图像等。它可以无误、高效地压缩这些图形。要使图像的一部分透明，那么，你就需要使用GIF格式，因为它是唯一的浏览器永久支持的格式。GIF也是为你的网页添加动画的一个较好的选择，它无需依赖于插入技术、Java编程或者服务器区分的方法。对于摄影图像来说，GIF格式并不特别地好用。受8位的限制，在缩减为256种颜色时，图形的真彩色信息将会被丢失，色调的细微渐变也将失常，图形的品质会大大降低。而且，GIF也不能对相片的内容进行有效的压缩。对于非常小的图像，GIF对于任何图形类型都十分有效，但若你把摄影图像或者连续色调的图像存为JPEG格式，则可能会得到更好的图形品质及更小的文件体积。GIF格式—交错存储

普通的GIF图像显示时，或者是由上至下，一个时刻显示一行像素，或者是等下载完整个文件后才显示图像。在慢的连接上，这就意味着浏览者要等待很长的时间，而屏幕上只有空白或者生成的图像图标。

交错存储的图形交换格式（interlacedGIF）通过4个阶段显示，首先在文件下载到1／8（12．5％）后结出一个图像即将出现的提示，显示的第一阶段是模糊的镶嵌图，随着更多数据的流入，模糊区逐渐为真实的信息所填充，同时图像也越来越清晰。接下来的3个连续阶段分别显示25％、50％、100％的图像信息。

支持

GIF格式的图像程序会在

Saveas和

Export对话框中提供一个交错存储的选项（常用复选框）。在存储时只需关闭或打开交错选项即可。

GIF格式—交错存储优点可以迅速给浏览者有关即将到来的图形一些概念。这一瞥足以让他做出某些重要的决定。例如，如果图像是浏览者熟悉的映射图，那么他可以在整个图像下载以前，利用链接先浏览其他页面的内容。在某些场合，部分下载的图像已经足以让浏览者决定，是否要等待其余的部分。

缺点把图像进行交错存储的主要代价是增加了所得图像的文件体积。同时，涉及每个人的品味，还要做审美考虑。有些浏览者宁愿什么都没有也不愿看到交错的GIF造成的暂时的视觉混乱。为此，可以选择有限的交错（如大型的映射图），而不是对网页上的每一个小图像使用。

GIF格式—透明度

GIF89a具有可以使部分图像透明的能力。透明区后的任何东西（最常见的为背景颜色和图案）都可以显示出来。具有透明度的图像可以不再仅仅为矩形！

在Photoshop5.0下做透明图：首先打开图像，选择Image菜单下mode下的indexedcolor...转换图像格式；选择File菜单下的Export的第一项：GIF89aExport,跳出一个Options窗口，用吸管在背景上点一下（或者在调色板上选取需要的一种颜色，在图像背景上点一下），选OK，储存既可。GIF格式—最小化文件体积

限制大小

很明显，控制文件大小最为简单的办法是限制你的图像的大小。这个限制没有数字指标，只要不把图形做成比它们实际所需的大即可。缩小大型的图像。剪切图形重要区域附近多余的空间。如果没有必要尽量避免采用大型的图形。

GIF格式—最小化文件体积用单一的颜色设计采用有利于GIF压缩文件的设计决定。如果从一开始就用单一的颜色设计图形，那么基本上就已经给出了LZW压缩所喜欢的文件类型（具有重复颜色像素行）了。用一致的颜色而非梯度色（从一种颜色到另一种颜色渐变）填充图形区。在GIF格式文件中限制摄影材料的数量（对于摄影图形使用JPEG格式）。如果可能，尽量多采用水平颜色区域，例如，水平条纹比竖直条纹更容易压缩。不必要的时候取消抗锯齿。用于产生光滑轮廓的模糊（非阶梯）也会增加图形中的颜色数目。

GIF格式—最小化文件体积减少位深和颜色数目

尽管GIF可以支持最多256色的8位颜色信息，但你也没有必要使用所有的颜色。实际上，你可以用更低的位深度（对应于更少的颜色，见右表）保存图像，这样可以大大减小文件大小。我们的目标是找到能够保持图形全面的特性及其整体性的最小位深。你会惊奇地发现，在位深减到5位（只有32色）时，仍然有很多图像可以幸免于图形特性的缺失。位深度

颜色数目

12（黑白）

243841653266471288256GIF格式—最小化文件体积减少位深和颜色数目

减少颜色数目实际上有两方面的效果。首先，把突然成为相同颜色的类似像素集合在一起，同时产生更多的LZW压缩可以起作用的色块。为此，更少的颜色数目可以更好地利用GIF压缩方案，从而获得更小的文件。另外，较低的位深在描述图形中颜色时要求较少的实际数据。即使没有像素改变颜色，5位的图像文件也比这个图形的8位图像文件更小一些。GIF格式—最小化文件体积限制抖动当真彩色图形缩减至只有256色的调色板时，常常会出现抖动。抖动是在图形颜色由有限的调色板内混合可得的相似颜色时产生的随机点模式。抖动与GIF文件大小相关，因为它破坏了单一颜色的整洁区域，而单一颜色区是有助于LZW压缩的，这样所得的文件就比它实际所需的大了。但是，我们应该记住，抖动也有助于在低位深度下保持图形品质和特性，在这一方面，它可以认为是一种有效的优化工具。通常，位深度越低，所得的文件也越小。

GIF格式—最小化文件体积优化GIF图形的工具

AdobePhotoshop

在匹配调色板中降低位深度（颜色数目），需要经过3个步骤用Web调色板把文件转换为索引色（IndexedColor）把图形转换为RGB格式。再次把图形转换为索引色，只有在这个时候，你才能选择一个恰当的调色板，这个调色板把颜色表中的颜色数目从216色减少为实际使用的颜色数目。这样就可以显著地减少文件（依赖于图形）的大小了。GIF格式—最小化文件体积优化GIF图形的工具

MacromediaFireworks

在Fireworks中，优化控制通过ExportPreview对话框（File～Export）获得,它提供可供选择的一系列调色板选项，并且，一旦在一个给定调色板内，颜色的实际数目可能会被减少以减小文件大小。它同时还提供对抖动数目进行精确控制的计算尺。百分率越高则允许越多的抖动。当你减少抖动数量时，将会简化图形区，并且LZW可以更为有效地工作，结果将得到更小的文件。

ExportPreview（输出预览）可以使你同时测览4个不同的版本及其相应的文件大小和典型的下载时间，这样，你可以立即获得你所设置的反馈并选择最好的配置。

JPEG格式

JPEG（JointPictureExpertGroup，联合图像专家组，这是创建此算法的一个标准组织）是指JFIF格式文件所使用的压缩算法，通常，它亦被称为“JPEG文件”。和任何在Web上广泛使用的图像文件格式一样，JPEG格式也是与平台无关的。而且，在2．0版本或者更高版本的

NetscapeNavigator及

MicrosoftInternetExplorer浏览器以及其他大多数目前流行的浏览器上，JPEG格式文件可以完全被支持用作内嵌图形。

24位色

JPEG图形包含24位RGB颜色信息，这意味着它们是由真彩色上万种颜色空间的颜色组成的。JPEG文件还可以携带灰度级图形。这样最终可得到更高的图形品质及更为丰富、精细的色彩变化。和

GIF文件不同，

JPEG格式文件不使用调色板作参考颜色信息。但是，当JPEG图像在仅支持8位颜色的系统中显示时，浏览器将把图形中的颜色缩减为Web调色板的颜色，此时，将会产生一些抖动。但通常情况下，抖动在摄影图像中比在单一色图形中更易发生。

JPEG压缩

JPEG格式使用所谓的“有损”压缩技术，即在压缩过程中将有某些颜色信息会被舍弃。幸运的是，对于在大多数压缩级别的摄影图像，这种损耗是人眼辨别不出来的，特别是图形在屏幕分辨率的显示器上演示的时候更是如此（或者在更低的可把图形存储用于打印的分辨率之下）。JPEG压缩

使用“有损”压缩算法，JPEG格式可以达到10：1到20：1的数据压缩率，而没有明显的品质损失。当然，在任何给定压缩过程中，所获得的文件大小的节约取决于特定图形的内容，而且所得的结果也是不同的。如果并不优先考虑维持高图形品质，那么，压缩率还可以更高。

JPEG压缩

JPEG压缩率的效率是以图形的空间频率（spatialfrequency）或者对细节的关心程度为基础的。低频（平滑的渐变，如蓝天）图形区的压缩程度比高频区（有很多的细节，如草片）更深一些。即使是一条高色调的边界，虽然没有太多的细节，但是它也代表一个起伏的空间频率，因此也会引起JPEG压缩的问题。

JPEG压缩

JPEG压缩算法在一块8X8线的正方形图形区内采样颜色，接着把相对颜色和亮度信息转换为数学公式。这些采样正方形在图形以最高压缩率（最低品质设置）压缩时是可见的。JPEG和GIF对于摄影图像的压缩做一个对比：一个具有丰富细节的摄影图像在GIF格式时占据85K的字节空间，而在JPEG格式时可能只要求35K的空间。压缩率取决于特定的图形，在通常情况下，JPEG压缩的图形要比GIF小2－3倍。然而，对于单色图形，GIF的压缩效率要比JPEG更高。

JPEG解压

对于JPEG图像，在它们显示前要先进行解压，因此，对一个JPEG图像解码和合成要比相同文件大小的GIF图像占用浏览器更多的时间。请记住，通过用JPEG格式代替GIF格式所节约的一小部分下载时间又因为它给浏览器的附加时间而丧失了。

不同的压缩水平

JPEG格式的一个优点是可以控制图像压缩的程度。图像品质越高文件也越大。我们的目标是找到仍能维持图像品质可接受的最小的文件大小。JPEG图像的品质由它的“Q”设置表示，它的范围通常是1到100。几乎在所有的程序中，较低的数字都代表较低的图形品质，但也是较高的压缩率（或更小的文件），而较高的数字得到的是更好的图形品质和更大的文件。

不同的压缩水平在很大程度上，Q设置是没有特定数学意义的任意数值。它只不过是一种指定你所要维持的图形品质水平的方法。当进行JPEG压缩时，它将在维持目标Q设置的前提下尽量压缩图像。而实际的压缩率则取决于各个图像的内容。

不同的压缩水平在制作JPEG不同的工具中，指定Q设置（或Quality）的标尺是不一样的。例如:

Photoshop的刻度范围为0到12（0－4、5－7、8－9、10－12，与此对应的选项是“低（low）、中（medium）、高（high）、最高（maximum）”），但是必须注意的是，最高水平的压缩（0）对应的Q系数在标准刻度范围上约为30。

图形损失

在压缩过程中一旦损失了图形品质，将无法重新获得。图形品质的损失还可以累加，即每次压缩或者解压图像，都会损失更多的图形信息。因此，每次编辑图形或重新存储——即使仅仅是剪切图形——都会进一步降低图形的品质。不仅如此，由于对图形引入了新的人工操作，这样第二次压缩就不能如上一次那么有效了，结果所得的文件也更大。解决方法：保留一个原数字图像的副本。这样，最终图像将仅经过一次压缩过程。此外，为测试不同的压缩水平，也应该从原图像开始。

何时使用JPEG格式

JPEG格式具有24位颜色容量及专用的压缩技术，它适用于摄影图像及其他连续色调的图像，如油画、水彩插图及具有256种灰度渐变的灰度级图形。JPEG格式特别不善于压缩具有单一颜色区的图形，如标志、艺术线条、印刷字体及卡通插图。JPEG的有损压缩会使单一的颜色变得杂乱斑驳，结果得到在某些情形下所不能接受的图形损耗。不仅如此，所得的文件通常也比相同图像的GIF格式文件大很多。JPEG压缩也不善于压缩棱角边缘或印刷图形，因为它会去除使边缘起“波纹”的人工修饰。

通常，我们最好用JPEG来处理摄影图像，而把一般图形留给GIF来处理。

制作JPEG图像

因为JPEG是标准的文件格式，所以它可以被所有流行的图像工具支持。AdobePhotoshop、JASCPaintShopPro、AdobeImageReady和

MacromediaFireworks等都提供类似的保存JPEG格式的选项。

制作JPEG图像

虽然各种工具使用不同的数字系统，但是它们都提供控制品质／压缩率的滑块。Adobe产品使用0－12的压缩标度，最低设置大约对应于标准标度（1一100）内的30左右。

PaintShopPro使用

l－100的标度，然而，它和标准的标度相反，即较低的数值对应于较高的图形品质和较低的压缩率，Fireworks使用0％－100％的百分率数值。所有这些产品都可以通过复选框控制把图形保存为JPEG格式。

制作JPEG图像

无论使用那一种工具，以下原则都是适用的：确定文件处于RGB或者灰度级格式。在某些应用中，可以对CMYK(用于印刷的四分色(Cyan青,Magenta品红,Yellow黄,blacK黑))文件进行JPEG压缩，但是这些文件和Web浏览器是不兼容的。若在Photoshop中制作图像，不管使用内在工具还是嵌入工具，在把图形保存为JPEG格式以前，都必须先将各层拼合。在文件名后加后缀．jpeg或者．jpg。为了让浏览器可以把它识别为可读的JPEG文件类型，这一步是必要的。

最小化JPEG文件

既然所有的文件都是用于Web传送的，那么优化JPEG图像使它们尽可能的小就很重要。因为JPEG图像在本质上常常是24位的，所以减少位深度并不是一个实用的选择。在大多数情形下，你所做的只是进行品质设置而已，但是你还可能要准备一个用于压缩的图形。你可以选择很多工具以使图像尽可能的小，同时这些工具也可以让你做出有关图形品质的决定。

最小化JPEG文件——过度压缩率

如果图形有很多连续色调或者渐变的颜色，那么可以进一步提高压缩水平而无须考虑所得的JPEG图像的品质损失。即使处于某些最低的品质设定，（在Photoshop中设为0或1，在标准标尺中设为20－30），图形品质仍然适合于在Web页上浏览。

当然，这要视各个具体图形而定。Photoshop的低品质设置会引起单一颜色区的斑驳或污迹效应，这可能是不可接受的。因此，可能需要进行某些测试以决定什么压缩水平是最为有效的。应该保证预留一份原图像的副本，这样每次测试时就可以进行新的压缩了。最小化JPEG文件——过度压缩率ImageReady、Fireworks、和

HVSJPEG都提供压缩设置效果的预览，包括图形预览和文件大小的预览。这使得我们更易于在保存JPEG图像以前进行压缩率的测试。如果使用

Photoshop和

PaintShop，那么要在程序或者浏览器中再次打开文件，才能看到压缩设置选择后的效果。最小化JPEG文件——“最优化”的JPEG图像标准的JPEG格式使用一个用于压缩图形的预计算的通用目标压缩表格（也称为Huffman表）。许多工具提供为特定图像定制“最优化”压缩表的功能，这样所得图形的色彩更为逼真，文件体积也更小。这种格式是目前的浏览器所支持的，但