網頁設計時圖片格式的選擇

在網頁設計中，切圖導出是指設計師將剛繪製完成的原始圖稿轉換成用於網頁的圖片格式、然後交由網頁製作人員進行排版的重要步驟。適合的圖片格式不但可以將讓設計得到具體的顯示效果、甚至還可以有效的控制圖片的檔案大小，節省網站的下載時間。

以設計師最常用的Adobe Photoshop為例，都提供了「儲存為網頁與裝置用(D)…」的功能。它與默認的存盤模式不同，在這個模式中，軟件提供了仿真圖文件輸出的質量調整、檔案大小控制等針對網頁圖文件需求的選項。

網頁設計中最常用的格式不外乎 JPG、GIF、PNG 等格式，但並非所有的人都知道他們之前的實際差別跟到底何時該選擇何種格式。經常發生的情況是，選擇 GIF 後的輸出結果看起來變得很糟糕，於是 PNG （24）似乎突然間風行了起來，不論圖檔尺寸是不是因此多了好幾倍。

下面我們就來分辨這三種圖片格式之間的差別:

JPEG格式
由於舊型計算機系統以及文件系統的限制，計算機檔案文件名與擴展名被規定為 8.3 的格式，因此 JPEG 的附檔名被縮寫為 .JPG。JPEG可以說是人們最熟悉的圖檔格式了，相信在數字相機普及的現在，幾乎每台數字相機、照相手機都可以（甚至只能）輸出 JPEG 格式的圖檔。JPEG是一種很典型的使用破壞性壓縮（lossy compression）的圖檔格式，也就是說使用者每次進行 JPEG 的存檔動作後，圖檔的內容都會遭到破壞，這個特性在肉眼辨識下並不明顯，但卻可以有效的降低圖檔的檔案大小。

就如這些使用 JPEG 的設備一樣，JPEG 非常適合作為儲存像素色彩豐富的圖片、例如照片等等，這些圖片即使有些微的失真也不容易輕易的察覺：而反過來說 JPEG 並不適合用來儲存線條圖、圖標或文字等等有清晰邊緣的圖片多次重複進行 JPEG 的圖檔的儲存將會永久性地破壞圖片中的細節。

GIF格式
Gif 在許多特性與表現上都與 JPEG 有著相對的特性。GIF 使用無損壓縮格式（Lossless Compression），但卻限制了色彩表現能力、能夠有效地節省檔案尺寸。GIF 只擁有 8 位的顏色深度信息，所謂的 8 位是指 2 的 8 次方也就是 256 色，當你的圖片中出現的色彩在 256 色以內時，使用 GIF 可以得到相當好的輸出質量、同時兼顧了檔案大小。因此 GIF 非常適合用來表現圖標、 UI接口、線條插畫、文字等部分的輸出。

另外 GIF 同時還支持透明背景、以及動畫圖檔格式，並且幾乎不用擔心支持性的問題：幾乎 100％ 的瀏覽器都支持它。由於 JPEG 與 GIF 有著如此不同的特性，因此我們可以很輕易的選擇何時該用哪一種格式來輸出我們需要的圖檔。當圖片擁有豐富的色彩時，並且沒有明顯銳利反差的邊緣線條時，選 擇 JPEG 可以得到最好的輸出結果，像是照片就是最好的例子：

（左圖：Photoshop 輸出 JPEG 默認值：品質：高，壓縮質量 60％、優化輸出。右圖：Photoshop 輸出 GIF 默認值：256色、擴散性混色）
當圖片是擁有明確邊緣的線條圖、沒有使用太多色彩、甚至可能需要透明背景時，GIF 是很完美的選擇，檔案小、畫質又精美。

（上圖：Photoshop 輸出 GIF：64色、擴散性混色。下圖：Photoshop 輸出 JPEG 默認值：品質：高，壓縮質量 60％、優化輸出）

PNG格式
PNG 最初的開發目的是為了作為 GIF 的替代方案的，作為做新開發的影像傳輸文件格式，PNG 同樣使用了無損壓縮格式，事實上 PNG 的開發就是因為 GIF 所使用的無損壓縮格式專利問題而誕生的。

PNG 分為 PNG-8 以及 PNG-24 兩種格式，PNG-8 的特性很接近 GIF ，支持 256 色以及透明背景的特性。而 PNG-24 則支持了多達 160 萬個色彩。
雖然 PNG 不支持動畫，但是 PNG-24 支持了Alpha 透明效果，這可以說是 PNG-24 最令人眼睛一亮的地方了。也就是說使用 PNG 輸出圖檔時，可以有效的支持不同的透明度效果了。這對網頁設計師來說無疑是一個好消息，像這張圖片其實是使用了三張 PNG-24 的圖片在網頁中排版出來的效果：

在大部分的情況下，設計師必須根據圖片需 求來選擇不同的圖檔格式，並且對其做適當的調整。雖然 PNG-24 看起來很完美，但是相應的當然就是檔案大小的增加。另外還有就是瀏覽器支持度的問題，雖然現在幾乎大部分的瀏覽器都支持了 PNG-24 格式，但不幸的是 IE6 是不支持透明 PNG 圖檔的，現在依然有相當的使用者在使用 IE6 或更早的版本，雖然比例會越來越少，但是設計師多少必須將其考慮其內，是否考慮使用 GIF 替代，或是在程序端透過 script 的方式來支持透明 PNG 格式。