網(wǎng)頁(yè)美工設(shè)計(jì)

網(wǎng)頁(yè)設(shè)計(jì)中圖片格式的選擇技巧

編輯：時(shí)間：2015-09-01 15:04:25

　　網(wǎng)頁(yè)設(shè)計(jì)中，切圖輸出是指設(shè)計(jì)師將手邊繪制完成的原始圖稿轉(zhuǎn)換成網(wǎng)頁(yè)用的圖片格式、并交由下一位人員網(wǎng)頁(yè)排版的重要步驟。選擇適合的圖片格式不但可以將讓設(shè)計(jì)得到合理的顯示效果、甚至還可以有效的控制圖檔的檔案大小，節(jié)省下載時(shí)間、有效的減少服務(wù)器的負(fù)擔(dān)。

　　以設(shè)計(jì)師最常用的Photoshop以及Illustrator為例，都提供了「儲(chǔ)存為網(wǎng)頁(yè)用…」的功能。與默認(rèn)的存盤模式不同，在這個(gè)模式中，軟件提供了仿真圖文件輸出的質(zhì)量調(diào)整、檔案大小控制等針對(duì)網(wǎng)頁(yè)圖文件需求的選項(xiàng)：

　　相信許多人都知道網(wǎng)頁(yè)設(shè)計(jì)中最常用的格式不外乎JPG、GIF、PNG等格式，但并非所有的人都知道他們之前的實(shí)際差別跟到底何時(shí)該選擇何種格式。經(jīng)常發(fā)生的情況是，選擇GIF后的輸出結(jié)果看起來(lái)變得很糟，于是PNG（24）似乎突然間風(fēng)行了起來(lái)，不論圖檔尺寸是不是因此多了好幾倍。

　　JPEG

　　由于舊型計(jì)算機(jī)系統(tǒng)以及文件系統(tǒng)的限制，計(jì)算機(jī)檔案文件名與擴(kuò)展名被規(guī)定為8.3的格式，因此JPEG的附檔名被縮寫為.JPG。JPEG可以說(shuō)是人們最熟悉的圖檔格式了，相信在數(shù)字相機(jī)普及的現(xiàn)在，幾乎每臺(tái)數(shù)字相機(jī)、照相手機(jī)都可以（甚至只能）輸出JPEG格式的圖檔。JPEG是一種很典型的使用破壞性壓縮（lossycompression）的圖檔格式，也就是說(shuō)使用者每次進(jìn)行JPEG的存檔動(dòng)作后，圖檔的內(nèi)容都會(huì)遭到破壞，這個(gè)特性在肉眼辨識(shí)下并不明顯，但卻可以有效的降低圖檔的檔案大小。

　　就如這些使用JPEG的設(shè)備一樣，JPEG非常適合作為儲(chǔ)存像素色彩豐富的圖片、例如照片等等，這些圖片即使有些微的失真也不容易輕易的察覺(jué)：而反過(guò)來(lái)說(shuō)JPEG并不適合用來(lái)儲(chǔ)存線條圖、圖標(biāo)或文字等等有清晰邊緣的圖片

　　多次重復(fù)進(jìn)行JPEG的圖檔的儲(chǔ)存將會(huì)永久性地破壞圖片中的細(xì)節(jié)。

　　GIF

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

　　另外GIF同時(shí)還支持透明背景、以及動(dòng)畫圖檔格式，并且?guī)缀醪挥脫?dān)心支持性的問(wèn)題：幾乎100％的瀏覽器都支持它。

　　由于JPEG與GIF有著如此不同的特性，因此我們可以很輕易的選擇何時(shí)該用哪一種格式來(lái)輸出我們需要的圖檔。

　　當(dāng)圖片是擁有明確邊緣的線條圖、沒(méi)有使用太多色彩、甚至可能需要透明背景時(shí)，GIF是很完美的選擇，檔案小、畫質(zhì)又精美。

　　PNG

　　PNG最初的開(kāi)發(fā)目的是為了作為GIF的替代方案的，作為做新開(kāi)發(fā)的影像傳輸文件格式，PNG同樣使用了無(wú)損壓縮格式，事實(shí)上PNG的開(kāi)發(fā)就是因?yàn)镚IF所使用的無(wú)損壓縮格式專利問(wèn)題而誕生的。

　　PNG分為PNG-8以及PNG-24兩種格式，PNG-8的特性很接近GIF，支持256色以及透明背景的特性。而PNG-24則支持了多達(dá)160萬(wàn)個(gè)色彩。

　　雖然PNG不支持動(dòng)畫，但是PNG-24支持了Alpha透明效果，這可以說(shuō)是PNG-24最令人眼睛一亮的地方了。也就是說(shuō)使用PNG輸出圖檔時(shí)，可以有效的支持不同的透明度效果了。這對(duì)網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)無(wú)疑是一個(gè)好消息，像這張圖片其實(shí)是使用了三張PNG-24的圖片在網(wǎng)頁(yè)中排版出來(lái)的效果：

　　在大部分的情況下，設(shè)計(jì)師必須根據(jù)圖片需求來(lái)選擇不同的圖檔格式，并且對(duì)其做適當(dāng)?shù)恼{(diào)整。雖然PNG-24看起來(lái)很完美，但是相應(yīng)的當(dāng)然就是檔案大小的增加。另外還有就是瀏覽器支持度的問(wèn)題，雖然現(xiàn)在幾乎大部分的瀏覽器都支持了PNG-24格式，但不幸的是IE6是不支持透明PNG圖檔的，現(xiàn)在依然有相當(dāng)?shù)氖褂谜咴谑褂肐E6或更早的版本，雖然比例會(huì)越來(lái)越少，但是設(shè)計(jì)師多少必須將其考慮其內(nèi)，是否考慮使用GIF替代，或是在程序端透過(guò)script的方式來(lái)支持透明PNG格式。

<< 上一篇：如何制作網(wǎng)頁(yè)設(shè)計(jì)中的滾動(dòng)字條？

>> 下一篇：網(wǎng)頁(yè)設(shè)計(jì)中的人文情懷有哪些？

推薦資訊