Blog

網頁設計中，切圖輸出是指設計師將手邊繪製完成的原始圖稿轉換成網頁用的圖片格式、並交由下一位人員網頁排版的重要步驟。選擇適合的圖片格式不但可以將讓設計得到合理的顯示效果、甚至還可以有效的控制圖檔的檔案大小，節省下載時間、有效的減少伺服器的負擔。

以設計師最常用的 Photoshop 以及 Illustrator 為例，都提供了「儲存為網頁用…」的功能。與預設的存檔模式不同，在這個模式中，軟體提供了模擬圖檔輸出的品質調整、檔案大小控制等針對網頁圖檔需求的選項：

相信許多人都知道網頁設計中最常用的格式不外乎 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 格式。

參考資料

1. wiki – JPEG
2. wiki – GIF
3. wiki – PNG
4. Image via Jer Thorp, CC license.