Contribute 文章
轉換出優良的 Web 圖像
儘管在網頁中添加文字非常簡單—使用某個產品（如 Macromedia Contribute）鍵入即可, 但用戶也希望加入照片、圖表或標誌。這就不是那麼單純了。本文將提供一些有用的提示, 可幫助您在網站上添加圖像, 而不會影響觀看結果。
行為科學的理論是「一張圖勝過千言萬語」, 不過在 web 上, 圖像確實比文字需要更多的下載時間。一張 6K 的小圖檔相當於一千個英文字, 因此網站製作人應盡量少用圖像, 否則就會招致惹惱和被讀者疏遠的風險, 因為他們要等待這些圖像下載。
幸運的是, 我們可採用許多方法讓 web 圖檔的大小縮減到最小。就像扁平包裝的家俱或濃縮湯罐一樣, 圖像也能被「壓縮」, 在傳送時變小, 而在瀏覽器中顯示時可「解壓縮」到原始狀態（或非常接近原始狀態）。
要壓縮圖檔, 只需用適當的檔案格式儲存它即可, 剩下的工作可交給瀏覽器來做。有兩種主要的檔案格式可執行此功能, 特別是對 web 圖形, 至於選擇哪一種格式則取決於圖像。
但是, 在壓縮圖像之前, 您應首先在影像編輯軟體中調整它的大小, 讓它和將要在網頁上顯示的大小一樣。讓瀏覽器自行縮放圖像不是一個好主意, 因為這會影響檔案的大小, 減慢頁面的顯示速度。原始圖像在縮小之前, 應始終大於所需的尺寸。放大一個過小的圖像絕不會產生良好的效果, 因為清晰度無從開始, 也無法產生。
使用 JPEG 格式處理照片
將照片放在網頁上需要先從影像圖庫找到適合的東西。否則, 您將需要掃描現有的正片或相紙或用數位相機拍攝照片。原始圖像可以使用各種的檔案格式（TIFF、PNG、PSD）儲存, 具體情況取決於您的照相機和軟體。在網路上呈現照片的最佳檔案格式是 JPEG（發音："jay peg"）, 此圖檔的副檔名為 .jpg。JPEG 格式壓縮檔案的方法非常複雜, 但是您需要擔心的是較小的檔案大小會犧牲圖像品質。JPEG 格式是一種「有損耗的」格式, 這意味著在壓縮圖檔大小的過程中, 它將犧牲某些圖像的品質。
高畫質的 JPEG 圖像檔案較大, 低畫質 JPEG 的檔案較小。這兩種極端之間的某一處就是看起來幾乎與原始圖像不分彼此的最佳檔案大小。您必須用肉眼來判斷這個最佳點。您通常會在影像編輯軟體中預覽圖像的品質, 並運用滑鈕進行調整。隨著檔案大小和品質的下降, 淺色區域和物件邊緣周遭就會出現難看的污點（我們稱之為「壓縮產物」）。當圖像開始出現這些污點時, 您可減小壓縮比率。當壓縮產物的痕跡很小或沒有痕跡時, 您就達到了不影響視覺品質的壓縮極限。
以下是我所討論的問題的一些範例︰
來自 Photo-CD 的這個檔案最初大約為 62K。透過適度壓縮, 我將它減小為更加可用的 15K。畫質損失極其細微, 不易覺察。
這個版本壓縮比更高, 大小為 6.5K, 但是畫質損失非常明顯, 特別是雲層的邊緣周遭。
在最大壓縮比下, 檔案大小大約為 5K, 但是畫質很差。假定它的大小只有大約 1.5K, 比前一個圖像還小, 您就會明白如何適當地平衡檔案大小和畫質。
在找到理想的照片壓縮比率之後, 一定要用編輯軟體的原始檔案格式儲存原始未壓縮檔案的副本。如果您曾經調整或重新儲存過某個 JPEG 檔案, 每次都會增加更多「損耗」, 這不僅讓圖像效果更差, 而且也可能增加檔案大小。
使用 GIF 格式處理單色系（flat-color）的圖像
對於標誌或其它單色系、沒有漸層（比如無陰影）的圖像, 最好使用 GIF (.gif) 格式。（有些人將 GIF 拼讀為"jiff", 實際上它是 Graphic Image Format〈圖形圖像格式〉的首字母縮寫, 因此應拼讀為 G。）GIF 格式不適合具有許多顏色混合的照片或插畫。事實上, 圖像中的顏色越少, GIF 檔案就會越小。
我給大家示範一下。當由GIF 格式轉以最佳 JPEG 圖像可相比的檔案大小儲存時, 這個畫面會顯示圖像如何"分色"為多個單一色系區域, 微妙的漸層將完全不見︰
大幅減少這種狀況, 您就必須用更高的顏色深度儲存檔案, 不然就開啟「抖色（dithering）」選項, 這代表用已經存在的色點來模擬漸層色。這個圖像不僅比其 JPEG 對等的檔案更大, 而且效果更差。
GIF 的運作原理如下：GIF 格式只會簡單地計算任意一行中, 相同顏色的像點數, 而不是記住圖像中每個像素的顏色。打個比方, 在真實世界中, 說「這個文具盒中有 12 支紅鉛筆、5 支藍鉛筆和 1 支黃鉛筆」遠比說「這是一支紅鉛筆, 這是一支紅鉛筆, 這是一支紅鉛筆……」更為有效。基本上, GIF 只計算單一顏色的像點數, 而不是各個像素值的總數。這比 JPEG 壓縮更加有效, 更為緊湊。
您需要做出的 GIF 決定如下︰「我能使用多少顏色？」如果您在白色背景上掃描一個藍色標誌, 並調整其大小, 以合適地放在網頁的可用空間中, 則必須為圖像選擇一種顏色深度（或位元深度）。這決定要使用多少顏色來顯示圖片。最小的顏色深度是兩種顏色（一個前景色和一個背景色）, 但是這會加深標誌像素, 使其邊緣變得粗糙、參差不齊。運用四種顏色, 邊緣效果會有改善, 但是圖像將有點粗糙。使用八種顏色會讓它們看起來非常平滑。替單色標誌使用八種以上顏色不可能在視覺上改進圖像的畫質, 只會不必要地增加檔案大小。
此時, 圖像將利用多種藍色系的半色調平順地從藍色前景混合到白色背景。8 個色階通常已經足夠, 但是如果標誌不只包含一種顏色, 最好也使用其它顏色的相同色階數。一個 GIF 圖像能夠處理的最大顏色數是 256, 但是 256 色圖像的檔案大小比只有 8 色的圖像更大。
接下來介紹另一個範例。下面的 Jasmine 標誌範例顯示了減少圖像中顏色數量的效果。儘管文字只是邊緣平滑的單一顏色, 但標誌包含一個具有細微漸層色的彩色鸚鵡。我們必須再現單一色系的文字, 保留鸚鵡身上的細微顏色︰
這個 256 色 GIF 良好地再現了圖像, 但檔案大小為 4.4K。
調降至 128 色時, 幾乎不會產生視覺差異, 但檔案更小 (3.62K)。
縮減至 64 色, 圖像品質仍然可以被接受, 而且檔案大小縮減小至 2.87K。這可能是我們能對這個標誌所做的最佳工作。
減少至 32 色（檔案大小為 2.37K）, 上面翅膀中的細微顏色混合部分, 被分成三個不同的區域。
進一步減至 16 色, 會進一步減少細微顏色。如果您發現這種色調可以接受, 則這仍可能是可以接受的標誌, 而且現在檔案大小只有 1.94K。
即使只有八種顏色 (1.5K), 也可以辨別出鸚鵡。另請注意的是, 文字根本不受影響。有足夠的顏色來提供平滑的邊緣。
減至只有四種顏色, 檔案大小僅有 1.14K, 但是鸚鵡只有一個基本輪廓, 而且文字外觀變得粗糙, 因為沒有足夠的顏色將它平順地混合到背景中。注意, 圖像已失去黃色。
顯然, 兩種顏色不足以重現該圖像, 而且 0.76K 的檔案大小有點滑稽。您只能對簡單的長方形使用兩種顏色。
該標誌儲存為大小類似於最佳 GIF (2.54K) 的 JPEG 檔案, 就會顯示出 JPEG 格式是多麼不適合這種圖像。JPEG 不能有效地處理單色系。
讓 GIF 的一個色彩變成透明
您可以運用 GIF（而不是 JPEG）將其中一種顏色指定為透明。透明色可讓背景具有透視效果。如果網頁具有材質或圖案背景, 這非常有用。但是, 這裡需要特別留意, 因為如果原始圖像位於白色背景中, 然後粘貼在具有藍色背景的網頁上, 效果就會失真。由於文字邊緣的半色調會逐漸變成白色, 而不是藍色, 因此文字周遭最終會出現白色暈圈。
為使之正確顯示, 應首先在影像編輯軟體中, 把該圖像放在您所需要的網頁背景色中, 然後讓該背景色變成透明*。如果背景是材質或圖案, 您可以指定一個主色或"平均"色。
我的觀點如下︰
讓標誌中的白色背景變成透明（左圖）, 然後將圖像放在藍色背景中是無法獲得正確的效果。隨著圖像的邊緣漸變成白色, 它們會在藍色背景中造成一個暈圈（右圖）。
在這裡, 原始圖像位於藍色背景中, 我在影像編輯軟體中讓它變成透明（左圖）, 即可提供正確的邊緣混合, 亦即"去鋸齒"（右圖）。
保持較小的檔案大小（和網頁大小）
首先應盡可能讓各個圖檔保持較小的大小, 接著, 在一個網頁上加入多少個圖像也是一個問題。如果將一張照片的檔案大小縮減至 10K, 然後在一個網頁上加入 10 張, 則該網頁的總大小將增大到 100K 以上, 這可能會帶來問題, 除非所有參觀您網站的用戶都使用寬頻連線。
在最佳情況下（實際上極少出現最佳情況）, 使用典型的 56 kbps 撥接數據機, 在瀏覽器中下載一個 100K 網頁大約需要 15-20 秒時間, 這實在太長了。當頁面下載時間超過 10 秒時, 人們就會很快失去興趣, 轉而觀看其它網站。最大的網頁大小（包括所有文字和圖像）應在 50K 範圍內（可以 56 kbps 速度在 7-10 秒內下載）。越小越好。
在您自己的電腦上或透過本地網路測試網頁的下載時間絕不會提供真實的結果。只有實際透過瀏覽 web 所體驗到的時間, 才是真實的時間。在發佈任何新網頁之前, 要從透過普通數據機連線到 web 的筆記型電腦或家用電腦上觀看它們。這樣, 您所見到的才是真正獲得的效果。
