網頁設計中如何選擇正確的圖片格式

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

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

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

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

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

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

　　另外 GIF 同時還支持透明背景、以及動畫圖檔格式，并且幾乎不用擔心支持性的問題：幾乎 100% 的瀏覽器都支持它。

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

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

　　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 格式，但不幸的是 IE6 是不支持透明 PNG 圖檔的，現在依然有相當的使用者在使用 IE6 或更早的版本，雖然比例會越來越少，但是設計師多少必須將其考慮其內，是否考慮使用 GIF 替代，或是在程序端透過 script 的方式來支持透明 PNG 格式。

　　網站設計中會運用到圖片設計，很多圖片的格式處理是非常需要注意的，圖片格式關系到圖片的大小，而圖片大小占網頁大小非常大的一部分，所以網頁設計中的圖片大小關系到網站的打開速度。在制作網頁的過程是需要嚴格注重的。

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

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

　　2、GIF圖片格式，GIF是一種調色板型(palette type)(或者說是索引型)的圖片。它含有多達256種的顏色。每一個象素點都有一個對應的顏色值。因為這種格式不再存在專利權的問題

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

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

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

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

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

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

　　6、TGA圖片格式: TGA的結構比較簡單，屬于一種圖形、圖像數據的通用格式，在多媒體領域有著很大影響，在做影視編輯時經常使用,例如3DS MAX輸出TGA圖片序列導入到AE里面進行后期編輯。

　　其他還有些網頁設計中比較冷門點的格式，如TIF、PCX等格式，一般就用的非常少，這里就不做一一介紹了。合理的運用好格式可以很好的控制好網頁布局。