選擇適當的網頁圖片格式

By

December 13, 2012 視覺設計 Comments

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

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

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

 

1. JPEG

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

就如這些使用 JPEG 的設備一樣,JPEG 非常適合作為儲存像素色彩豐富的圖片、例如照片等等,這些圖片即使有些微的失真也不容易輕易的察覺:而反過來說 JPEG 並不適合用來儲存線條圖、圖示或文字等等有清晰邊緣的圖片

多次重複進行 JPEG 的圖檔的儲存將會重複永久性地破壞圖檔中的細節

 

2. 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%、最佳化輸出)

 

3. 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 格式。

 

參考資料

wiki – JPEG

wiki – GIF

wiki – PNG

 

延伸閱讀

為你的臉書打造高畫質的專頁封面

 

Image via Jer Thorp, CC license.

 

1998 年,心理學家 Daniel Simons 和 Daniel Levin 做了一個有趣的實驗,先由一個人帶著地圖在路上找一個路人問路,就在路人回答問題的...
把能夠讓使用者快速完成任務的任務導覽放在頁首,瞭解網站架構的分類放在頁尾,完美的利用螢幕上的所有像素。使用者能使用的螢幕就這麼大,螢幕上的每一個像素對網站設計師...
白蟻是一種很特殊的生物,他們彼此之間不能像人類一樣說話溝通,卻能夠建造出比他們身體還要大數百倍且具有通風能力的白蟻要塞。生物學家研究白蟻建築白蟻窩時發現,關鍵竟...
一般人常常在聽到「駭客 (Hacker)」這個詞彙的時候,第一個反應便是負面印象,並且和入侵網站、盜用帳號、盜刷信用卡或盜取個人資料等等犯罪行為連結。但其實 H...
一個理想的使用性測試(Usability Test),除了事前做好全盤規劃、測試當天順利進行以及蒐集到豐富資料,還要能讓每一位使用性測試參與者(Particip...
Audi 汽車的網站上曾經做過一個有趣的服務,他們讓使用者可以選擇自己的配備,像是座椅、皮套、方向盤、烤漆等等,然後看看這台車將會變成什麼樣子。使用者必須一組一...
© 2013 Desiring Clicks. All Rights Reserved.
Top