網(wǎng)頁設(shè)計(jì)中如何選擇正確的圖片格式

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

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

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

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

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

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

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

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

　　當(dāng)圖片擁有豐富的色彩時，并且沒有明顯銳利反差的邊緣線條時，選擇 JPEG 可以得到最好的輸出結(jié)果。

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

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

　　雖然 PNG 不支持動畫，但是 PNG-24 支持了Alpha 透明效果，這可以說是 PNG-24 最令人眼睛一亮的地方了。也就是說使用 PNG 輸出圖檔時，可以有效的支持不同的透明度效果了。

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

　　網(wǎng)站設(shè)計(jì)中會運(yùn)用到圖片設(shè)計(jì)，很多圖片的格式處理是非常需要注意的，圖片格式關(guān)系到圖片的大小，而圖片大小占網(wǎng)頁大小非常大的一部分，所以網(wǎng)頁設(shè)計(jì)中的圖片大小關(guān)系到網(wǎng)站的打開速度。在制作網(wǎng)頁的過程是需要嚴(yán)格注重的。

　　1、PDF格式，是Photoshop圖像處理軟件的專用文件格式，文件擴(kuò)展名是.psd，也是Photoshop中新建圖像的默認(rèn)格式。它是唯一支持所有可用圖像模式(位圖、灰度、雙色調(diào)、索引顏色、RGB、CMYK、Lab和多通道)參考線、Alpha通道、專色通道和圖層(包括調(diào)整圖層、文字圖層、圖層效果和圖層蒙板)的格式，是一種非壓縮的原始文件保存格式。網(wǎng)站設(shè)計(jì)中PSD文件有時容量會很大，但由于可以保留所有原始信息，在圖像處理中對于尚未制作完成的圖像，選用PSD格式保存是最佳的選擇。

　　當(dāng)對一張照片處理完成后，保存時選擇Pdf格式，能夠保存各個圖層，通道，蒙版等的所有信息，當(dāng)再次打開時想要修改某個細(xì)節(jié)如：刪除某個圖層樣式，修改某個調(diào)整圖層或?qū)⒛硞€Alpha通道作為選區(qū)載入等，都是很方便的。但是一般psd格式圖像文件較大，不便于傳輸，所以一般采用這種格式保存作為作品的備份。

　　2、GIF圖片格式，GIF是一種調(diào)色板型(palette type)(或者說是索引型)的圖片。它含有多達(dá)256種的顏色。每一個象素點(diǎn)都有一個對應(yīng)的顏色值。因?yàn)檫@種格式不再存在專利權(quán)的問題

　　GIF是一種無損壓縮的格式，這意味著當(dāng)你修改并且保存了圖片的時候,它的質(zhì)量不會有任何損耗。

　　GIF格式也支持動畫.在黑暗的web1.0時代，它導(dǎo)致了大量多余的曇花一現(xiàn)的“新”圖片(blinking “new” images)，循環(huán)的@符號(rotating @ signs)，birds dropping，a email以及其他一些讓人厭煩的東西的出現(xiàn)。在更加文明的web2.0時代，在等待一個更新頁面的ajax請求的時候，我們?nèi)匀粫吹? “loading”動畫，網(wǎng)站建設(shè)但是也有一些比較討人喜歡的東西,人們喜歡把它們放在自己的網(wǎng)絡(luò)上。不管怎么說，如果你有需要，就可以使用動畫支持。

　　GIF也支持透明度，透明度的值是一種布爾類型數(shù)據(jù)。GIF圖片里的一個象素要么完全透明,要么完全不透明。

　　3、 PNG圖片格式，PNG的圖片又分為 PNG-8 、 PNG-24 兩種，其中，PNG-8 與 GIF 類似，支持 256 色調(diào)色板 ，而 PNG-24 只支持 48 位真彩色，凡是 GIF 擁有的優(yōu)勢 PNG-8 都擁有，GIF 所沒有的優(yōu)勢 PNG-8 也有，同樣的文件，PNG-8 格式比 GIF 要小， PNG-8 的特點(diǎn)使得它在網(wǎng)站設(shè)計(jì)切圖環(huán)節(jié)深受網(wǎng)站設(shè)計(jì)師的喜愛。PNG 可以以任何顏色深度存儲圖像，也支持高級別的無損耗壓縮、支持伽瑪校正，支持交錯，受最新 Web 瀏覽器的支持，能夠提供長度比 GIF 小30%的無損壓縮圖像文件，最高支持 48 位真彩色圖像以及 16 位灰度圖像，漸近顯示和流式讀寫，深圳網(wǎng)站設(shè)計(jì)不足的是較舊的瀏覽器和程序可能不支持 PNG 文件。

　　4、JPEG圖片格式，是目前網(wǎng)絡(luò)上最流行的圖像格式，是可以把文件壓縮到最小的格式，在 Photoshop軟件中以JPEG格式儲存時，提供11級壓縮級別，以0—10級表示。其中0級壓縮比最高，圖像品質(zhì)最差。即使采用細(xì)節(jié)幾乎無損的10 級質(zhì)量保存時，壓縮比也可達(dá) 5：1。以BMP格式保存時得到4.28MB圖像文件，在采用JPG格式保存時，其文件僅為178KB，壓縮比達(dá)到24：1。經(jīng)過多次比較，采用第8級壓縮為存儲空間與圖像質(zhì)量兼得的最佳比例。JPEG格式的應(yīng)用非常廣泛，特別是在網(wǎng)絡(luò)和光盤讀物上，都能找到它的身影。目前各類瀏覽器均支持JPEG這種圖像格式，因?yàn)镴PEG格式的文件尺寸較小，下載速度快。

　　5、BMP圖片格式，BMP是英文Bitmap(位圖)的簡寫，它是Windows操作系統(tǒng)中的標(biāo)準(zhǔn)圖像文件格式，在Windows環(huán)境下運(yùn)行的所有圖象處理軟件都支持BMP圖象文件格式。Windows系統(tǒng)內(nèi)部各圖像繪制操作都是以BMP為基礎(chǔ)的。隨著Windows操作系統(tǒng)的流行與豐富的Windows應(yīng)用程序的開發(fā)，BMP位圖格式理所當(dāng)然地被廣泛應(yīng)用。這種格式的特點(diǎn)是包含的圖像信息較豐富，深圳網(wǎng)站設(shè)計(jì)幾乎不進(jìn)行壓縮，但由此導(dǎo)致了它與生俱生來的缺點(diǎn)--占用磁盤空間過大。所以，目前BMP在單機(jī)上比較流行。BMP位圖文件默認(rèn)的文件擴(kuò)展名是BMP或者bmp(有時它也會以.DIB或.RLE作擴(kuò)展名)。

　　6、TGA圖片格式: TGA的結(jié)構(gòu)比較簡單，屬于一種圖形、圖像數(shù)據(jù)的通用格式，在多媒體領(lǐng)域有著很大影響，在做影視編輯時經(jīng)常使用,例如3DS MAX輸出TGA圖片序列導(dǎo)入到AE里面進(jìn)行后期編輯。

　　其他還有些網(wǎng)頁設(shè)計(jì)中比較冷門點(diǎn)的格式，如TIF、PCX等格式，一般就用的非常少，這里就不做一一介紹了。合理的運(yùn)用好格式可以很好的控制好網(wǎng)頁布局。