- 相關(guān)推薦
網(wǎng)頁設(shè)計(jì)中圖片格式的選擇技巧
相信許多人都知道網(wǎng)頁設(shè)計(jì)中最常用的格式不外乎 JPG、GIF、PNG 等格式，但并非所有的人都知道他們之前的實(shí)際差別跟到底何時(shí)該選擇何種格式。下面是網(wǎng)頁設(shè)計(jì)中圖片格式的選擇技巧，一起來學(xué)習(xí)下吧：
JPEG
由于舊型計(jì)算機(jī)系統(tǒng)以及文件系統(tǒng)的限制，計(jì)算機(jī)檔案文件名與擴(kuò)展名被規(guī)定為 8.3 的格式，因此 JPEG 的附檔名被縮寫為 .JPG。JPEG可以說是人們最熟悉的圖檔格式了，相信在數(shù)字相機(jī)普及的現(xiàn)在，幾乎每臺(tái)數(shù)字相機(jī)、照相手機(jī)都可以(甚至只能)輸出 JPEG 格式的圖檔。JPEG是一種很典型的使用破壞性壓縮(lossy compression)的圖檔格式，也就是說使用者每次進(jìn)行 JPEG 的存檔動(dòng)作后，圖檔的內(nèi)容都會(huì)遭到破壞，這個(gè)特性在肉眼辨識(shí)下并不明顯，但卻可以有效的降低圖檔的檔案大小。
就如這些使用 JPEG 的設(shè)備一樣，JPEG 非常適合作為儲(chǔ)存像素色彩豐富的圖片、例如照片等等，這些圖片即使有些微的失真也不容易輕易的察覺：而反過來說 JPEG 并不適合用來儲(chǔ)存線條圖、圖標(biāo)或文字等等有清晰邊緣的圖片
多次重復(fù)進(jìn)行 JPEG 的圖檔的儲(chǔ)存將會(huì)永久性地破壞圖片中的細(xì)節(jié)。
GIF
Gif 在許多特性與表現(xiàn)上都與 JPEG 有著相對(duì)的特性。GIF 使用無損壓縮格式(Lossless Compression)，但卻限制了色彩表現(xiàn)能力、能夠有效地節(jié)省檔案尺寸。GIF 只擁有 8 位的顏色深度信息，所謂的 8 位是指 2 的 8 次方也就是 256 色，當(dāng)你的圖片中出現(xiàn)的色彩在 256 色以內(nèi)時(shí)，使用 GIF 可以得到相當(dāng)好的輸出質(zhì)量、同時(shí)兼顧了檔案大小。因此 GIF 非常適合用來表現(xiàn)圖標(biāo)、 UI接口、線條插畫、文字等部分的輸出。
另外 GIF 同時(shí)還支持透明背景、以及動(dòng)畫圖檔格式，并且?guī)缀醪挥脫?dān)心支持性的問題：幾乎 100% 的瀏覽器都支持它。
由于 JPEG 與 GIF 有著如此不同的特性，因此我們可以很輕易的選擇何時(shí)該用哪一種格式來輸出我們需要的圖檔。
當(dāng)圖片擁有豐富的色彩時(shí)，并且沒有明顯銳利反差的邊緣線條時(shí)，選擇 JPEG 可以得到最好的輸出結(jié)果，像是照片就是最好的例子：
(左圖：Photoshop 輸出 JPEG 默認(rèn)值：品質(zhì)：高，壓縮質(zhì)量 60%、優(yōu)化輸出。右圖：Photoshop 輸出 GIF 默認(rèn)值：256色、擴(kuò)散性混色)
當(dāng)圖片是擁有明確邊緣的線條圖、沒有使用太多色彩、甚至可能需要透明背景時(shí)，GIF 是很完美的選擇，檔案小、畫質(zhì)又精美。
(上圖：Photoshop 輸出 GIF：64色、擴(kuò)散性混色。下圖：Photoshop 輸出 JPEG 默認(rèn)值：品質(zhì)：高，壓縮質(zhì)量 60%、優(yōu)化輸出)
PNG
PNG 最初的開發(fā)目的是為了作為 GIF 的替代方案的，作為做新開發(fā)的影像傳輸文件格式，PNG 同樣使用了無損壓縮格式，事實(shí)上 PNG 的開發(fā)就是因?yàn)?GIF 所使用的無損壓縮格式專利問題而誕生的。
PNG 分為 PNG-8 以及 PNG-24 兩種格式，PNG-8 的特性很接近 GIF ，支持 256 色以及透明背景的特性。而 PNG-24 則支持了多達(dá) 160 萬個(gè)色彩。
雖然 PNG 不支持動(dòng)畫，但是 PNG-24 支持了Alpha 透明效果，這可以說是 PNG-24 最令人眼睛一亮的地方了。也就是說使用 PNG 輸出圖檔時(shí)，可以有效的支持不同的透明度效果了。這對(duì)網(wǎng)頁設(shè)計(jì)師來說無疑是一個(gè)好消息，像這張圖片其實(shí)是使用了三張 PNG-24 的圖片在網(wǎng)頁中排版出來的效果：
在大部分的情況下，設(shè)計(jì)師必須根據(jù)圖片需求來選擇不同的圖檔格式，并且對(duì)其做適當(dāng)?shù)恼{(diào)整。雖然 PNG-24 看起來很完美，但是相應(yīng)的當(dāng)然就是檔案大小的增加。另外還有就是瀏覽器支持度的問題，雖然現(xiàn)在幾乎大部分的瀏覽器都支持了 PNG-24 格式，但不幸的是 IE6 是不支持透明 PNG 圖檔的，現(xiàn)在依然有相當(dāng)?shù)氖褂谜咴谑褂?IE6 或更早的版本，雖然比例會(huì)越來越少，但是設(shè)計(jì)師多少必須將其考慮其內(nèi)，是否考慮使用 GIF 替代，或是在程序端透過 script 的方式來支持透明 PNG 格式。
【網(wǎng)頁設(shè)計(jì)中圖片格式的選擇技巧】相關(guān)文章：
響應(yīng)式網(wǎng)頁中的圖片設(shè)計(jì)技巧03-16
網(wǎng)頁美工設(shè)計(jì)中色彩搭配技巧03-18
網(wǎng)頁設(shè)計(jì)色彩搭配技巧03-07
網(wǎng)頁設(shè)計(jì)的布局和用色技巧03-16