Web 開發(fā)及技術設計10-1

Web開發(fā)與技術設計

第十講

Web上的圖像濟南大學網(wǎng)絡中心孫潤元nicstaff@網(wǎng)頁中的插圖處理這里的插圖，是指除系統(tǒng)產(chǎn)生的字符和色彩以外的圖形圖像。包括廣告、圖畫、照片、文字等等。網(wǎng)頁中的插圖是網(wǎng)站建設的主要內(nèi)容之一，就信息發(fā)布的角度而言，插圖可以起到文字說明不了的內(nèi)容，同時插圖也是網(wǎng)頁裝飾的主要手段。插圖大體可分為兩大類型：一是照片類；二是繪畫類。

照片類插圖

照片類插圖是指由數(shù)碼相機、掃描儀等掃描照片得到的圖像，這類圖像的特點在于它們能夠真實地記錄現(xiàn)實中事物的原貌，給人以真實可靠的印象。

從技術上講，它們屬于全色調(diào)圖像，利用色調(diào)的明暗變化，全方位地表現(xiàn)事物的形態(tài)結構，空間體積，質(zhì)感等視覺屬性。最典型的就是新聞照片，是圖形圖像中最為客觀真實的一種，。照片類圖像是比較容易得到的，除了數(shù)碼相機拍攝圖片以外，普通照片掃描后即可使用。另外，一些圖片社、廣告公司也提供圖片素材光盤，從中可以找到許多精美的圖像資料。

照片類插圖被廣泛地運用于網(wǎng)頁設計之中，如宣傳產(chǎn)品、發(fā)布新聞信息、廣告設計、頁面裝飾美化。

繪畫類插圖繪畫類插圖一般來自于手工繪畫或軟件制作，如常見的卡通圖畫、裝飾圖案、文字圖形以及用圖形圖像軟件處理加工過的照片等（當然它們也可以繪制出與照片效果類似的3D圖像）。繪畫類插圖在網(wǎng)頁設計中具有自己的優(yōu)勢，它可以根據(jù)作者的創(chuàng)意，按照網(wǎng)站的風格設計創(chuàng)作畫面，使網(wǎng)站的效果統(tǒng)一，富于整體感；它可以隨心所欲地創(chuàng)作圖像或廣告，具有傳達信息的優(yōu)勢；另外，這類圖像更易于制作成較小的圖像文件，更便于網(wǎng)上的傳輸。一般來說，照片類插圖與繪畫類插圖可以配合使用，這也是電子商務網(wǎng)站的客觀需要，只是繪畫類插圖的創(chuàng)作需有專業(yè)人員才能完成。

圖像的虛實效果

圖像的虛實效果是人對圖像的感覺，指的是圖像的清晰強烈或模糊含蓄的程度，簡單的虛實效果可以這樣理解，實：圖像清晰，線條分明；虛：圖像模糊，色彩淺淡（灰暗）。

圖像的虛實效果實的圖像

一種是有規(guī)范的四邊，像未經(jīng)處理的照片類圖像，一般都帶有裁切后自然留下的邊框，是四條清晰的線條，由于圖像的色調(diào)、線條與背景色形成強烈的對比，給人以堅硬、實在的感覺，假如網(wǎng)頁上的圖像都是這種樣式，就顯得整齊規(guī)范，同時也顯得死板、生硬；圖像的虛實效果實的圖像

另一種是不規(guī)范外輪廓，即輪廓清晰，其圖像背景色與網(wǎng)頁背景色一致（將圖像背景色處理成透明色），許多卡通畫插圖都采用這種樣式。

圖像的虛實效果虛的圖像

是指圖的外輪廓與網(wǎng)頁的背景色自然銜接過渡，給人以十分柔和含蓄的感覺，比較自然地與網(wǎng)頁結合為一體。圖像的虛實效果虛的圖像

另外一種虛的圖像，整個色調(diào)被極大地淡化處理，作為背景色的圖案出現(xiàn)，襯托前景的文字。

圖像的格式

計算機的數(shù)字圖形圖像的儲存、交換技術上，圖形圖像的格式就顯得十分重要了。沒有統(tǒng)一的格式，圖形圖像就不能方便地在其他計算機上顯示，網(wǎng)絡上的圖形圖像更是受到網(wǎng)絡傳輸速度的限制。如何使有限的帶寬得到合理的利用，節(jié)省瀏覽者的等候時間，壓縮圖像文件是十分必要的。用數(shù)據(jù)壓縮工具優(yōu)化你的圖像文件，不但節(jié)省有限的信道帶寬，加快網(wǎng)上訪問速度，同時，還可以節(jié)省可觀的上網(wǎng)費用（無論是服務器端還是客戶端），當然同樣可以節(jié)省磁盤空間。在網(wǎng)頁的制作過程中，首先要確定圖像的格式，在HTML文件中使用*.jpg、*.gif、*.bmp等文件格式均可以顯示出來，但是絕大多數(shù)網(wǎng)頁只選擇前面的兩種，因為這兩種文件格式能對圖像進行很大程度的壓縮，使得在產(chǎn)生相近視覺效果的前提下，圖像文件的容量會小很多。

常見的圖像文件格式

BMP格式

BMP是英文Bitmap（位圖）的簡寫，它是Windows操作系統(tǒng)中的標準圖像文件格式，能夠被多種Windows應用程序所支持。隨著Windows操作系統(tǒng)的流行與豐富的Windows應用程序的開發(fā)，BMP位圖格式理所當然地被廣泛應用。這種格式的特點是包含的圖像信息較豐富，幾乎不進行壓縮，但由此導致了它與生俱生來的缺點--占用磁盤空間過大。所以，目前BMP在單機上比較流行。

常見的圖像文件格式

GIF格式

GIF是英文GraphicsInterchangeFormat（圖形交換格式）的縮寫。

GIF格式的特點是壓縮比高，磁盤空間占用較少，所以這種圖像格式迅速得到了廣泛的應用。最初的GIF只是簡單地用來存儲單幅靜止圖像（稱為GIF87a），后來隨著技術發(fā)展，可以同時存儲若干幅靜止圖象進而形成連續(xù)的動畫，使之成為當時支持2D動畫為數(shù)不多的格式之一（稱為GIF89a），而在GIF89a圖像中可指定透明區(qū)域，使圖像具有非同一般的顯示效果，這更使GIF風光十足。常見的圖像文件格式

JPEG格式

JPEG也是常見的一種圖像格式，它由聯(lián)合照片專家組（JointPhotographicExpertsGroup）開發(fā)并以命名為"ISO10918-1"，JPEG僅僅是一種俗稱而已。JPEG文件的擴展名為.jpg或.jpeg，其壓縮技術十分先進，它用有損壓縮方式去除冗余的圖像和彩色數(shù)據(jù)，獲取得極高的壓縮率的同時能展現(xiàn)十分豐富生動的圖像，換句話說，就是可以用最少的磁盤空間得到較好的圖像質(zhì)量。

常見的圖像文件格式

JPEG2000格式

JPEG2000同樣是由JPEG組織負責制定的，它有一個正式名稱叫做“ISO15444”，與JPEG相比，它具備更高壓縮率以及更多新功能的新一代靜態(tài)影像壓縮技術。

JPEG2000作為JPEG的升級版，其壓縮率比JPEG高約30%左右。與JPEG不同的是，JPEG2000同時支持有損和無損壓縮，而JPEG只能支持有損壓縮。

JPEG2000的一個極其重要的特征在于它能實現(xiàn)漸進傳輸，這一點與GIF的“漸顯”有異曲同工之妙。常見的圖像文件格式

TIFF格式

TIFF（TagImageFileFormat）是Mac中廣泛使用的圖像格式，它由Aldus和微軟聯(lián)合開發(fā)，最初是出于跨平臺存儲掃描圖像的需要而設計的。它的特點是圖像格式復雜、存貯信息多。正因為它存儲的圖像細微層次的信息非常多，圖像的質(zhì)量也得以提高，故而非常有利于原稿的復制。該格式有壓縮和非壓縮二種形式，其中壓縮可采用LZW無損壓縮方案存儲。常見的圖像文件格式

PSD格式

這是著名的Adobe公司的圖像處理軟件Photoshop的專用格式PhotoshopDocument（PSD）。PSD其實是Photoshop進行平面設計的一張"草稿圖"，它里面包含有各種圖層、通道、遮罩等多種設計的樣稿，以便于下次打開文件時可以修改上一次的設計。在Photoshop所支持的各種圖像格式中，PSD的存取速度比其它格式快很多，功能也很強大。常見的圖像文件格式

PNG格式

PNG（PortableNetworkGraphics）是一種新興的網(wǎng)絡圖像格式。PNG是目前保證最不失真的格式，它汲取了GIF和JPG二者的優(yōu)點，存貯形式豐富，兼有GIF和JPG的色彩模式；它的另一個特點能把圖像文件壓縮到極限以利于網(wǎng)絡傳輸，但又能保留所有與圖像品質(zhì)有關的信息，因為PNG是采用無損壓縮方式來減少文件的大小，這一點與犧牲圖像品質(zhì)以換取高壓縮率的JPG有所不同；它的第三個特點是顯示速度很快，只需下載1/64的圖像信息就可以顯示出低分辨率的預覽圖像；第四，PNG同樣支持透明圖像的制作，透明圖像在制作網(wǎng)頁圖像的時候很有用，我們可以把圖象背景設為透明，用網(wǎng)頁本身的顏色信息來代替設為透明的色彩，這樣可讓圖像和網(wǎng)頁背景很和諧地融合在一起。

常見的圖像文件格式

SWF格式

利用Flash我們可以制作出一種后綴名為SWF（ShockwaveFormat）的動畫，這種格式的動畫圖像能夠用比較小的體積來表現(xiàn)豐富的多媒體形式。在圖像的傳輸方面，不必等到文件全部下載才能觀看，而是可以邊下載邊看，因此特別適合網(wǎng)絡傳輸，特別是在傳輸速率不佳的情況下，也能取得較好的效果。事實也證明了這一點，SWF如今已被大量應用于WEB網(wǎng)頁進行多媒體演示與交互性設計。此外，SWF動畫是其于矢量技術制作的，因此不管將畫面放大多少倍，畫面不會因此而有任何損害。綜上，SWF格式作品以其高清晰度的畫質(zhì)和小巧的體積，受到了越來越多網(wǎng)頁設計者的青睞，也越來越成為網(wǎng)頁動畫和網(wǎng)頁圖片設計制作的主流，目前已成為網(wǎng)上動畫的事實標準。常見的圖像文件格式

SVG格式

SVG的英文全稱為ScalableVectorGraphics，意思為可縮放的矢量圖形。它是基于XML（ExtensibleMarkupLanguage），由WorldWideWebConsortium（W3C）聯(lián)盟進行開發(fā)的。嚴格來說應該是一種開放標準的矢量圖形語言，可讓你設計激動人心的、高分辨率的Web圖形頁面。用戶可以直接用代碼來描繪圖像，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有互交功能，并可以隨時插入到HTML中通過瀏覽器來觀看。優(yōu)勢：可以任意放大圖形顯示，但絕不會以犧牲圖像質(zhì)量為代價；字在SVG圖像中保留可編輯和可搜尋的狀態(tài)；平均來講，SVG文件比JPEG和GIF格式的文件要小很多，因而下載也很快。

其它非主流圖像格式

PCX格式

PCX格式是ZSOFT公司在開發(fā)圖像處理軟件Paintbrush時開發(fā)的一種格式，這是一種經(jīng)過壓縮的格式，占用磁盤空間較少。由于該格式出現(xiàn)的時間較長，并且具有壓縮及全彩色的能力，所以現(xiàn)在仍比較流行。

DXF格式

DXF（AutodeskDrawingExchangeFormat）是AutoCAD中的矢量文件格式，它以ASCII碼方式存儲文件，在表現(xiàn)圖形的大小方面十分精確。許多軟件都支持DXF格式的輸入與輸出。其它非主流圖像格式

WMF格式

WMF（WindowsMetafileFormat）是Windows中常見的一種圖元文件格式，屬于矢量文件格式。它具有文件短小、圖案造型化的特點，整個圖形常由各個獨立的組成部分拼接而成，其圖形往往較粗糙。

EMF格式

EMF（EnhancedMetafile）是微軟公司為了彌補使用WMF的不足而開發(fā)的一種Windows32位擴展圖元文件格式，也屬于矢量文件格式，其目的是欲使圖元文件更加容易接受其它非主流圖像格式

LIC（FLI/FLC）格式

Flic格式由Autodesk公司研制而成，F(xiàn)LIC是FLC和FLI的統(tǒng)稱：FLI是最初的基于320×200分辨率的動畫文件格式，而FLC則采用了更高效的數(shù)據(jù)壓縮技術，所以具有比FLI更高的壓縮比，其分辨率也有了不少提高。

EPS格式

EPS（EncapsulatedPostScript）是PC機用戶較少見的一種格式，而蘋果Mac機的用戶則用得較多。它是用PostScript語言描述的一種ASCII碼文件格式，主要用于排版、打印等輸出工作。

其它非主流圖像格式

TGA格式

TGA（TaggedGraphics）文件是由美國Truevision公司為其顯示卡開發(fā)的一種圖像文件格式，已被國際上的圖形、圖像工業(yè)所接受。TGA的結構比較簡單，屬于一種圖形、圖像數(shù)據(jù)的通用格式，在多媒體領域有著很大影響，是計算機生成圖像向電視轉(zhuǎn)換的一種首選格式。

GIF格式

GIF（圖形交換格式，

GraphicInterchangeFormat）是早期Web瀏覽器可顯示的第一種圖形文件格式。任何圖像類型都可以存為GIF文件，但是GIF的卓越之處在于壓縮具有單一顏色區(qū)的圖形。GIF格式是完全與平臺無關的，這意味著在任何平臺上生成的GIF文件都可以在其他平臺上瀏覽和編輯。它最初是CompuServe公司為在其網(wǎng)絡上的不同平臺發(fā)布圖像而開發(fā)的，正因為這樣，GIF格式有時也被稱為“CompuServeGIF”格式。GIF還是所有圖形瀏覽器（無論何種版本）都支持的唯一一種圖形文件。GIF格式—GIF87a和GIF89a從技術上分有兩種類型的GIF文件：

GIF87a和更新更完善的GIF89a。它們都可以完全被大多數(shù)測覽器所支持，并且它們的文件名后綴都是．gif。GIF87a是索引色圖像的原始格式。它使用LZW壓縮并可以選擇使用隔行掃描。GIF89a也是一樣，只不過它引入了透明度和動畫的能力。如果你要為圖形添加這些功能，那么，就要使用支持GIF89a格式的工具來制作。今天，在Web設計者之中這些特性已經(jīng)相當流行，并且這些特性已經(jīng)成為Web上的實際標準。

GIF格式—8位索引色

GIF文件是索引色圖形，即最多可以包含8位顏色信息（也可以被存儲為更低的比特率）。這意味著它們最多可以包含256種顏色。更低的位深度將得到更少的顏色，同時文件體積也會更小。

“索引色”

（IndexedColor）指圖形中的一套顏色，即圖形的調(diào)色板，它們被存儲于一個顏色表中。圖像中的每一個像素都包含對與其對應的顏色的表格單元的參考（或“索引”）當你把一個24位（含有上萬種顏色）圖形轉(zhuǎn)換為GIF格式時，就有必要先把它轉(zhuǎn)換為索引色模式

（IndexedColorMode），同時在這個過程中，把顏色數(shù)目減小至256色或者更少。圖形編輯工具會盡可能地使用最恰當?shù)念伾ㄆヅ湔{(diào)色板）接近圖形，以近似整個顏色范圍。GIF格式—GIF壓縮

第一，它是“無損”的壓縮，即在壓縮過程中不會丟失圖形信息，并且所解壓的圖像和原圖是一樣的。（注意：在RGB轉(zhuǎn)換為GIF格式的過程中可能會丟失某些信息，但是一旦轉(zhuǎn)換后，它本身的壓縮是無損的。）第二，GIF使用LZW（Lempel－Zev－Welch）壓縮，LZW利用了數(shù)據(jù)流循環(huán)。用圖像術語解釋，即LZW壓縮對于同一顏色的隔行像素十分有效。舉一個簡單的例子，當壓縮進程“擊中”一行中15個相同的藍色像素時，它將信息存儲為句“15blue”，但是當在一行中遇到從藍色向黑色漸變時，就需要存儲對每一個像素的說明，因此這時也要求更多的數(shù)據(jù)。這正是GIF可以有效存儲簡單圖像的原因，LZW壓縮對于單一的顏色區(qū)很有優(yōu)勢。

GIF格式—何時使用GIF格式

適合于任何具有單一顏色區(qū)的圖形，如標志、藝術線條、圖標和卡通圖像等。它可以無誤、高效地壓縮這些圖形。要使圖像的一部分透明，那么，你就需要使用GIF格式，因為它是唯一的瀏覽器永久支持的格式。GIF也是為你的網(wǎng)頁添加動畫的一個較好的選擇，它無需依賴于插入技術、Java編程或者服務器區(qū)分的方法。對于攝影圖像來說，GIF格式并不特別地好用。受8位的限制，在縮減為256種顏色時，圖形的真彩色信息將會被丟失，色調(diào)的細微漸變也將失常，圖形的品質(zhì)會大大降低。而且，GIF也不能對相片的內(nèi)容進行有效的壓縮。對于非常小的圖像，GIF對于任何圖形類型都十分有效，但若你把攝影圖像或者連續(xù)色調(diào)的圖像存為JPEG格式，則可能會得到更好的圖形品質(zhì)及更小的文件體積。GIF格式—交錯存儲

普通的GIF圖像顯示時，或者是由上至下，一個時刻顯示一行像素，或者是等下載完整個文件后才顯示圖像。在慢的連接上，這就意味著瀏覽者要等待很長的時間，而屏幕上只有空白或者生成的圖像圖標。

交錯存儲的圖形交換格式（interlacedGIF）通過4個階段顯示，首先在文件下載到1／8（12．5％）后結出一個圖像即將出現(xiàn)的提示，顯示的第一階段是模糊的鑲嵌圖，隨著更多數(shù)據(jù)的流入，模糊區(qū)逐漸為真實的信息所填充，同時圖像也越來越清晰。接下來的3個連續(xù)階段分別顯示25％、50％、100％的圖像信息。

支持

GIF格式的圖像程序會在

Saveas和

Export對話框中提供一個交錯存儲的選項（常用復選框）。在存儲時只需關閉或打開交錯選項即可。

GIF格式—交錯存儲優(yōu)點可以迅速給瀏覽者有關即將到來的圖形一些概念。這一瞥足以讓他做出某些重要的決定。例如，如果圖像是瀏覽者熟悉的映射圖，那么他可以在整個圖像下載以前，利用鏈接先瀏覽其他頁面的內(nèi)容。在某些場合，部分下載的圖像已經(jīng)足以讓瀏覽者決定，是否要等待其余的部分。

缺點把圖像進行交錯存儲的主要代價是增加了所得圖像的文件體積。同時，涉及每個人的品味，還要做審美考慮。有些瀏覽者寧愿什么都沒有也不愿看到交錯的GIF造成的暫時的視覺混亂。為此，可以選擇有限的交錯（如大型的映射圖），而不是對網(wǎng)頁上的每一個小圖像使用。

GIF格式—透明度

GIF89a具有可以使部分圖像透明的能力。透明區(qū)后的任何東西（最常見的為背景顏色和圖案）都可以顯示出來。具有透明度的圖像可以不再僅僅為矩形！

在Photoshop5.0下做透明圖：首先打開圖像，選擇Image菜單下mode下的indexedcolor...轉(zhuǎn)換圖像格式；選擇File菜單下的Export的第一項：GIF89aExport,跳出一個Options窗口，用吸管在背景上點一下（或者在調(diào)色板上選取需要的一種顏色，在圖像背景上點一下），選OK，儲存既可。GIF格式—最小化文件體積

限制大小

很明顯，控制文件大小最為簡單的辦法是限制你的圖像的大小。這個限制沒有數(shù)字指標，只要不把圖形做成比它們實際所需的大即可。縮小大型的圖像。剪切圖形重要區(qū)域附近多余的空間。如果沒有必要盡量避免采用大型的圖形。

GIF格式—最小化文件體積用單一的顏色設計采用有利于GIF壓縮文件的設計決定。如果從一開始就用單一的顏色設計圖形，那么基本上就已經(jīng)給出了LZW壓縮所喜歡的文件類型（具有重復顏色像素行）了。用一致的顏色而非梯度色（從一種顏色到另一種顏色漸變）填充圖形區(qū)。在GIF格式文件中限制攝影材料的數(shù)量（對于攝影圖形使用JPEG格式）。如果可能，盡量多采用水平顏色區(qū)域，例如，水平條紋比豎直條紋更容易壓縮。不必要的時候取消抗鋸齒。用于產(chǎn)生光滑輪廓的模糊（非階梯）也會增加圖形中的顏色數(shù)目。

GIF格式—最小化文件體積減少位深和顏色數(shù)目

盡管GIF可以支持最多256色的8位顏色信息，但你也沒有必要使用所有的顏色。實際上，你可以用更低的位深度（對應于更少的顏色，見右表）保存圖像，這樣可以大大減小文件大小。我們的目標是找到能夠保持圖形全面的特性及其整體性的最小位深。你會驚奇地發(fā)現(xiàn)，在位深減到5位（只有32色）時，仍然有很多圖像可以幸免于圖形特性的缺失。位深度

顏色數(shù)目

12（黑白）

243841653266471288256GIF格式—最小化文件體積減少位深和顏色數(shù)目

減少顏色數(shù)目實際上有兩方面的效果。首先，把突然成為相同顏色的類似像素集合在一起，同時產(chǎn)生更多的LZW壓縮可以起作用的色塊。為此，更少的顏色數(shù)目可以更好地利用GIF壓縮方案，從而獲得更小的文件。另外，較低的位深在描述圖形中顏色時要求較少的實際數(shù)據(jù)。即使沒有像素改變顏色，5位的圖像文件也比這個圖形的8位圖像文件更小一些。GIF格式—最小化文件體積限制抖動當真彩色圖形縮減至只有256色的調(diào)色板時，常常會出現(xiàn)抖動。抖動是在圖形顏色由有限的調(diào)色板內(nèi)混合可得的相似顏色時產(chǎn)生的隨機點模式。抖動與GIF文件大小相關，因為它破壞了單一顏色的整潔區(qū)域，而單一顏色區(qū)是有助于LZW壓縮的，這樣所得的文件就比它實際所需的大了。但是，我們應該記住，抖動也有助于在低位深度下保持圖形品質(zhì)和特性，在這一方面，它可以認為是一種有效的優(yōu)化工具。通常，位深度越低，所得的文件也越小。

GIF格式—最小化文件體積優(yōu)化GIF圖形的工具

AdobePhotoshop

在匹配調(diào)色板中降低位深度（顏色數(shù)目），需要經(jīng)過3個步驟用Web調(diào)色板把文件轉(zhuǎn)換為索引色（IndexedColor）把圖形轉(zhuǎn)換為RGB格式。再次把圖形轉(zhuǎn)換為索引色，只有在這個時候，你才能選擇一個恰當?shù)恼{(diào)色板，這個調(diào)色板把顏色表中的顏色數(shù)目從216色減少為實際使用的顏色數(shù)目。這樣就可以顯著地減少文件（依賴于圖形）的大小了。GIF格式—最小化文件體積優(yōu)化GIF圖形的工具

MacromediaFireworks

在Fireworks中，優(yōu)化控制通過ExportPreview對話框（File～Export）獲得,它提供可供選擇的一系列調(diào)色板選項，并且，一旦在一個給定調(diào)色板內(nèi)，顏色的實際數(shù)目可能會被減少以減小文件大小。它同時還提供對抖動數(shù)目進行精確控制的計算尺。百分率越高則允許越多的抖動。當你減少抖動數(shù)量時，將會簡化圖形區(qū)，并且LZW可以更為有效地工作，結果將得到更小的文件。

ExportPreview（輸出預覽）可以使你同時測覽4個不同的版本及其相應的文件大小和典型的下載時間，這樣，你可以立即獲得你所設置的反饋并選擇最好的配置。

JPEG格式

JPEG（JointPictureExpertGroup，聯(lián)合圖像專家組，這是創(chuàng)建此算法的一個標準組織）是指JFIF格式文件所使用的壓縮算法，通常，它亦被稱為“JPEG文件”。和任何在Web上廣泛使用的圖像文件格式一樣，JPEG格式也是與平臺無關的。而且，在2．0版本或者更高版本的

NetscapeNavigator及

MicrosoftInternetExplorer瀏覽器以及其他大多數(shù)目前流行的瀏覽器上，JPEG格式文件可以完全被支持用作內(nèi)嵌圖形。

24位色

JPEG圖形包含24位RGB顏色信息，這意味著它們是由真彩色上萬種顏色空間的顏色組成的。JPEG文件還可以攜帶灰度級圖形。這樣最終可得到更高的圖形品質(zhì)及更為豐富、精細的色彩變化。和

GIF文件不同，

JPEG格式文件不使用調(diào)色板作參考顏色信息。但是，當JPEG圖像在僅支持8位顏色的系統(tǒng)中顯示時，瀏覽器將把圖形中的顏色縮減為Web調(diào)色板的顏色，此時，將會產(chǎn)生一些抖動。但通常情況下，抖動在攝影圖像中比在單一色圖形中更易發(fā)生。

JPEG壓縮

JPEG格式使用所謂的“有損”壓縮技術，即在壓縮過程中將有某些顏色信息會被舍棄。幸運的是，對于在大多數(shù)壓縮級別的攝影圖像，這種損耗是人眼辨別不出來的，特別是圖形在屏幕分辨率的顯示器上演示的時候更是如此（或者在更低的可把圖形存儲用于打印的分辨率之下）。JPEG壓縮

使用“有損”壓縮算法，JPEG格式可以達到10：1到20：1的數(shù)據(jù)壓縮率，而沒有明顯的品質(zhì)損失。當然，在任何給定壓縮過程中，所獲得的文件大小的節(jié)約取決于特定圖形的內(nèi)容，而且所得的結果也是不同的。如果并不優(yōu)先考慮維持高圖形品質(zhì)，那么，壓縮率還可以更高。

JPEG壓縮

JPEG壓縮率的效率是以圖形的空間頻率（spatialfrequency）或者對細節(jié)的關心程度為基礎的。低頻（平滑的漸變，如藍天）圖形區(qū)的壓縮程度比高頻區(qū)（有很多的細節(jié)，如草片）更深一些。即使是一條高色調(diào)的邊界，雖然沒有太多的細節(jié)，但是它也代表一個起伏的空間頻率，因此也會引起JPEG壓縮的問題。

JPEG壓縮

JPEG壓縮算法在一塊8X8線的正方形圖形區(qū)內(nèi)采樣顏色，接著把相對顏色和亮度信息轉(zhuǎn)換為數(shù)學公式。這些采樣正方形在圖形以最高壓縮率（最低品質(zhì)設置）壓縮時是可見的。JPEG和GIF對于攝影圖像的壓縮做一個對比：一個具有豐富細節(jié)的攝影圖像在GIF格式時占據(jù)85K的字節(jié)空間，而在JPEG格式時可能只要求35K的空間。壓縮率取決于特定的圖形，在通常情況下，JPEG壓縮的圖形要比GIF小2－3倍。然而，對于單色圖形，GIF的壓縮效率要比JPEG更高。

JPEG解壓

對于JPEG圖像，在它們顯示前要先進行解壓，因此，對一個JPEG圖像解碼和合成要比相同文件大小的GIF圖像占用瀏覽器更多的時間。請記住，通過用JPEG格式代替GIF格式所節(jié)約的一小部分下載時間又因為它給瀏覽器的附加時間而喪失了。

不同的壓縮水平

JPEG格式的一個優(yōu)點是可以控制圖像壓縮的程度。圖像品質(zhì)越高文件也越大。我們的目標是找到仍能維持圖像品質(zhì)可接受的最小的文件大小。JPEG圖像的品質(zhì)由它的“Q”設置表示，它的范圍通常是1到100。幾乎在所有的程序中，較低的數(shù)字都代表較低的圖形品質(zhì)，但也是較高的壓縮率（或更小的文件），而較高的數(shù)字得到的是更好的圖形品質(zhì)和更大的文件。

不同的壓縮水平在很大程度上，Q設置是沒有特定數(shù)學意義的任意數(shù)值。它只不過是一種指定你所要維持的圖形品質(zhì)水平的方法。當進行JPEG壓縮時，它將在維持目標Q設置的前提下盡量壓縮圖像。而實際的壓縮率則取決于各個圖像的內(nèi)容。

不同的壓縮水平在制作JPEG不同的工具中，指定Q設置（或Quality）的標尺是不一樣的。例如:

Photoshop的刻度范圍為0到12（0－4、5－7、8－9、10－12，與此對應的選項是“低（low）、中（medium）、高（high）、最高（maximum）”），但是必須注意的是，最高水平的壓縮（0）對應的Q系數(shù)在標準刻度范圍上約為30。

圖形損失

在壓縮過程中一旦損失了圖形品質(zhì)，將無法重新獲得。圖形品質(zhì)的損失還可以累加，即每次壓縮或者解壓圖像，都會損失更多的圖形信息。因此，每次編輯圖形或重新存儲——即使僅僅是剪切圖形——都會進一步降低圖形的品質(zhì)。不僅如此，由于對圖形引入了新的人工操作，這樣第二次壓縮就不能如上一次那么有效了，結果所得的文件也更大。解決方法：保留一個原數(shù)字圖像的副本。這樣，最終圖像將僅經(jīng)過一次壓縮過程。此外，為測試不同的壓縮水平，也應該從原圖像開始。

何時使用JPEG格式

JPEG格式具有24位顏色容量及專用的壓縮技術，它適用于攝影圖像及其他連續(xù)色調(diào)的圖像，如油畫、水彩插圖及具有256種灰度漸變的灰度級圖形。JPEG格式特別不善于壓縮具有單一顏色區(qū)的圖形，如標志、藝術線條、印刷字體及卡通插圖。JPEG的有損壓縮會使單一的顏色變得雜亂斑駁，結果得到在某些情形下所不能接受的圖形損耗。不僅如此，所得的文件通常也比相同圖像的GIF格式文件大很多。JPEG壓縮也不善于壓縮棱角邊緣或印刷圖形，因為它會去除使邊緣起“波紋”的人工修飾。

通常，我們最好用JPEG來處理攝影圖像，而把一般圖形留給GIF來處理。

制作JPEG圖像

因為JPEG是標準的文件格式，所以它可以被所有流行的圖像工具支持。AdobePhotoshop、JASCPaintShopPro、AdobeImageReady和

MacromediaFireworks等都提供類似的保存JPEG格式的選項。

制作JPEG圖像

雖然各種工具使用不同的數(shù)字系統(tǒng)，但是它們都提供控制品質(zhì)／壓縮率的滑塊。Adobe產(chǎn)品使用0－12的壓縮標度，最低設置大約對應于標準標度（1一100）內(nèi)的30左右。

PaintShopPro使用

l－100的標度，然而，它和標準的標度相反，即較低的數(shù)值對應于較高的圖形品質(zhì)和較低的壓縮率，F(xiàn)ireworks使用0％－100％的百分率數(shù)值。所有這些產(chǎn)品都可以通過復選框控制把圖形保存為JPEG格式。

制作JPEG圖像

無論使用那一種工具，以下原則都是適用的：確定文件處于RGB或者灰度級格式。在某些應用中，可以對CMYK(用于印刷的四分色(Cyan青,Magenta品紅,Yellow黃,blacK黑))文件進行JPEG壓縮，但是這些文件和Web瀏覽器是不兼容的。若在Photoshop中制作圖像，不管使用內(nèi)在工具還是嵌入工具，在把圖形保存為JPEG格式以前，都必須先將各層拼合。在文件名后加后綴．jpeg或者．jpg。為了讓瀏覽器可以把它識別為可讀的JPEG文件類型，這一步是必要的。

最小化JPEG文件

既然所有的文件都是用于Web傳送的，那么優(yōu)化JPEG圖像使它們盡可能的小就很重要。因為JPEG圖像在本質(zhì)上常常是24位的，所以減少位深度并不是一個實用的選擇。在大多數(shù)情形下，你所做的只是進行品質(zhì)設置而已，但是你還可能要準備一個用于壓縮的圖形。你可以選擇很多工具以使圖像盡可能的小，同時這些工具也可以讓你做出有關圖形品質(zhì)的決定。

最小化JPEG文件——過度壓縮率

如果圖形有很多連續(xù)色調(diào)或者漸變的顏色，那么可以進一步提高壓縮水平而無須考慮所得的JPEG圖像的品質(zhì)損失。即使處于某些最低的品質(zhì)設定，（在Photoshop中設為0或1，在標準標尺中設為20－30），圖形品質(zhì)仍然適合于在Web頁上瀏覽。

當然，這要視各個具體圖形而定。Photoshop的低品質(zhì)設置會引起單一顏色區(qū)的斑駁或污跡效應，這可能是不可接受的。因此，可能需要進行某些測試以決定什么壓縮水平是最為有效的。應該保證預留一份原圖像的副本，這樣每次測試時就可以進行新的壓縮了。最小化JPEG文件——過度壓縮率ImageReady、Fireworks、和

HVSJPEG都提供壓縮設置效果的預覽，包括圖形預覽和文件大小的預覽。這使得我們更易于在保存JPEG圖像以前進行壓縮率的測試。如果使用

Photoshop和

PaintShop，那么要在程序或者瀏覽器中再次打開文件，才能看到壓縮設置選擇后的效果。最小化JPEG文件——“最優(yōu)化”的JPEG圖像標準的JPEG格式使用一個用于壓縮圖形的預計算的通用目標壓縮表格（也稱為Huffman表）。許多工具提供為特定圖像定制“最優(yōu)化”壓縮表的功能，這樣所得圖形的色彩更為逼真，文件體積也更小。這種格式是目前的瀏覽器所支持的，但