頁面中圖像格式的選用之我見
頁面中使用GIF格式，失真太大，怎麼辦呢？這個問題比較簡單啊，只要用JPG就可以了。我們常用的頁面的圖片格式有三種，GIF、JPG、PNG。那麼這三種格式我們怎麼選擇使用呢？下面就我的一些經驗來談談我對於這三個格式的使用上的一些看法。
下面我們先瞭解一下幾種格式的比較正式的解釋(註：以下內容源自百度知道)：
GIF 意為Graphics Interchange format（圖形交換格式），GIF圖片的擴展名是gif。現在所有的圖形瀏覽器都支持GIF格式，而且有的圖形瀏覽器只認識GIF格式。GIF是一種索引顏色格式，在顏色數很少的情況下，產生的文件極小，它的優點主要有：
1. GIF格式支持背景透明。GIF圖片如果背景色設置為透明，它將與瀏覽器背景相結合，生成非矩形的圖片。
2. GIF格式支持動畫。在Flash動畫出現之前，GIF動畫可以說是網頁中唯一的動畫形式。GIF格式可以將單幀的圖像組合起來，然後輪流播放每一幀而成為動畫。雖然並不是所有的圖形瀏覽器都支持GIF動畫，但是最新的圖形瀏覽器都已經支持GIF動畫。
3. GIF格式支持圖形漸進。漸進是指圖片漸漸顯示在屏幕上，漸進圖片將比非漸進圖片更快地出現在屏幕上，可以讓訪問者更快地知道圖片的概貌。
4. GIF格式支持無損壓縮。無損壓縮是不損失圖片細節而壓縮圖片的有效方法，由於GIF格式採用無損壓縮，所以它更適合於線條、圖標和圖紙。
GIF格式的缺點同樣相當明顯。索引顏色是歷史遺留的產物，在DOS下的老遊戲幾乎無一例外的採用索引顏色，這種格式本來早就應該淘汰了。但是由於帶寬的限制，GIF從DOS時代紅到了Internet時代。GIF這種索引顏色格式最大的缺點就是它只有256種顏色，這對於照片質量的圖片是顯然不夠的。
JPEG 代表Joint Photograhic Experts Group（聯合圖像專家組），這種格式經常寫成JPG，JPG圖片的擴展名為jpg。
JPG最主要的優點是能支持上百萬種顏色，從而可以用來表現照片。此外，由於JPG圖片使用更有效的有損壓縮算法，從而使文件長度更小，下載時間更短。有損壓縮會放棄圖像中的某些細節，以減少文件長度。它的壓縮比相當高，使用專門的JPG壓縮工具其壓縮比可達180：1，而且圖像質量從瀏覽角度來講質量受損不會太大，這樣就大大方便了網絡傳輸和磁盤交換文件。JPG較GIF更適合於照片，因為在照片中損失一些細節不像對藝術線條那麼明顯。另外，JPG對照片的壓縮比例更大，而最後的質量也更好。
但是從長遠來看，JPG隨著帶寬的不斷提高和存儲介質的發展，它也應該是一種被淘汰的圖片格式，因為有損壓縮對圖像會產生不可恢復的損失。所以經過壓縮的JPG的圖片一般不適合打印，在備份重要圖片時也最好不要使用JPG。還有，JPG也不如GIF圖像那麼靈活，它不支持圖形漸進、背景透明，更不支持動畫。
PNG 是20世紀90年代中期開始開發的圖像文件存儲格式，其目的是企圖替代GIF和TIFF文件格式，同時增加一些GIF文件格式所不具備的特性。流式網絡圖形格式(Portable Network Graphic Format，PNG)名稱來源於非官方的「PNG's Not GIF」，是一種位圖文件(bitmap file)存儲格式，讀成「ping」。PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，並且還可存儲多到16位的α通道數據。PNG使用從LZ77派生的無損數據壓縮算法。
PNG文件格式保留GIF文件格式的下列特性：
●使用彩色查找表或者叫做調色板可支持256種顏色的彩色圖像。
●流式讀/寫性能(streamability)：圖像文件格式允許連續讀出和寫入圖像數據
●這個特性很適合於在通信過程中生成和顯示圖像。
●逐次逼近顯示(progressive display)：這種特性可使在通信鏈路上傳輸圖像文件的同時就在終端上顯示圖像，把整個輪廓顯示出來之後逐步顯示圖像的細節，也就是先用低分辨率顯示圖像，然後逐步提高它的分辨率。
●透明性(transparency)：這個性能可使圖像中某些部分不顯示出來，用來創建一些有特色的圖像。
●輔助信息(ancillary information)：這個特性可用來在圖像文件中存儲一些文本註釋信息。
●獨立於計算機軟硬件環境。
●使用無損壓縮。
PNG文件格式中要增加下列GIF文件格式所沒有的特性：
●每個像素為48位的真彩色圖像。
●每個像素為16位的灰度圖像。
●可為灰度圖和真彩色圖添加α通道。
●添加圖像的γ信息。
●使用循環冗余碼(cyclic redundancy code，CRC)檢測損害的文件。
●加快圖像顯示的逐次逼近顯示方式。
●標準的讀/寫工具包。
●可在一個文件中存儲多幅圖像。
●文件結構
這三種格式各有優缺點，其中PNG優點多多。雖然普及得還很一般，但是其特殊的優越性已經讓我們對其產生非常大的興趣。至少我現在很喜歡這種格式。當然了對於製作頁面的製作人員來說，頁面總體積的大小那就是競爭力。所以我們還是必需要注意這三種格式的混合使用。那以什麼時候用GIF什麼時候用PNG什麼時候用JPG呢？我們下面一一來分析。
在實際的工作中，我發現一般的純色的圖形，比如一些小圖標、平鋪背景其中的色彩比較少，那麼作為GIF格式雖然只有256種色彩，但是應對這種類型的圖片那一定是非常的合適的。當然了，不排除有一些特別的小圖標色彩的豐富性，但是相信作為小圖標其色彩有點損失也不會影響到整體的視覺效果，所以GIF的適用範圍是：小圖標、平鋪背景等色彩比較少的小型圖片。
那麼大圖片又怎麼選擇呢，首先我們先瞭解一下JPG，我們使用Photoshop的朋友都知道，在最後導出圖片時會有一個地方讓我們選擇這個JPG圖片的圖片品質，100%是表示無壓縮，當我們拿同一張圖片導出不同的品質圖片對比時我們發現品質低的很明顯會比品質高的髒了很多，這樣照片看起來就很不好，當然我們也發現這種情況在偏大色塊的圖片中猶為突出。所以比如天空、人像。特別人像面部就會出現很難看的黑斑。當然如果對於照片質量要求不嚴格可以使用JPG並且降低品質。但是不適用於背景、小圖標。
我個人覺得PNG是介於GIF與高品質JPG之間的一種選擇，如果是簡純的小圖標，PNG會比GIF大這麼一點，但是品質上是差不多的。如果是普通的圖片，那麼PNG還是要比高品質的JPG要小一點的，但是PNG還是有點色彩損失的。不過如果圖片不放大基本上看不出來。我們做頁面基本上不是為了讓人放大了挑刺。所以PNG也就是介於中間的一種選擇。當然了，PNG還有一個很偉大的優點，那就是透明，雖然IE6之前還不支持這一特性。GIF也有透明，但是GIF只支持絕對的透明，不支持半透明，所以GIF的圖片的邊緣常會有一圈的白色的小點。而PNG就沒有這些問題，隨著時代的發展當IE6成為歷史的時候我想我們就可以看到PNG的真實的威力。
當然了有一種特別的情況可能會很特別，那就是背景圖片與前景圖片的切合處，這種地方需要色彩結構一致才能產生良好的視覺效果。那麼這種時候注意盡可能的不要使用不同格式混合使用。
下面我們先瞭解一下幾種格式的比較正式的解釋(註：以下內容源自百度知道)：
GIF 意為Graphics Interchange format（圖形交換格式），GIF圖片的擴展名是gif。現在所有的圖形瀏覽器都支持GIF格式，而且有的圖形瀏覽器只認識GIF格式。GIF是一種索引顏色格式，在顏色數很少的情況下，產生的文件極小，它的優點主要有：
1. GIF格式支持背景透明。GIF圖片如果背景色設置為透明，它將與瀏覽器背景相結合，生成非矩形的圖片。
2. GIF格式支持動畫。在Flash動畫出現之前，GIF動畫可以說是網頁中唯一的動畫形式。GIF格式可以將單幀的圖像組合起來，然後輪流播放每一幀而成為動畫。雖然並不是所有的圖形瀏覽器都支持GIF動畫，但是最新的圖形瀏覽器都已經支持GIF動畫。
3. GIF格式支持圖形漸進。漸進是指圖片漸漸顯示在屏幕上，漸進圖片將比非漸進圖片更快地出現在屏幕上，可以讓訪問者更快地知道圖片的概貌。
4. GIF格式支持無損壓縮。無損壓縮是不損失圖片細節而壓縮圖片的有效方法，由於GIF格式採用無損壓縮，所以它更適合於線條、圖標和圖紙。
GIF格式的缺點同樣相當明顯。索引顏色是歷史遺留的產物，在DOS下的老遊戲幾乎無一例外的採用索引顏色，這種格式本來早就應該淘汰了。但是由於帶寬的限制，GIF從DOS時代紅到了Internet時代。GIF這種索引顏色格式最大的缺點就是它只有256種顏色，這對於照片質量的圖片是顯然不夠的。
JPEG 代表Joint Photograhic Experts Group（聯合圖像專家組），這種格式經常寫成JPG，JPG圖片的擴展名為jpg。
JPG最主要的優點是能支持上百萬種顏色，從而可以用來表現照片。此外，由於JPG圖片使用更有效的有損壓縮算法，從而使文件長度更小，下載時間更短。有損壓縮會放棄圖像中的某些細節，以減少文件長度。它的壓縮比相當高，使用專門的JPG壓縮工具其壓縮比可達180：1，而且圖像質量從瀏覽角度來講質量受損不會太大，這樣就大大方便了網絡傳輸和磁盤交換文件。JPG較GIF更適合於照片，因為在照片中損失一些細節不像對藝術線條那麼明顯。另外，JPG對照片的壓縮比例更大，而最後的質量也更好。
但是從長遠來看，JPG隨著帶寬的不斷提高和存儲介質的發展，它也應該是一種被淘汰的圖片格式，因為有損壓縮對圖像會產生不可恢復的損失。所以經過壓縮的JPG的圖片一般不適合打印，在備份重要圖片時也最好不要使用JPG。還有，JPG也不如GIF圖像那麼靈活，它不支持圖形漸進、背景透明，更不支持動畫。
PNG 是20世紀90年代中期開始開發的圖像文件存儲格式，其目的是企圖替代GIF和TIFF文件格式，同時增加一些GIF文件格式所不具備的特性。流式網絡圖形格式(Portable Network Graphic Format，PNG)名稱來源於非官方的「PNG's Not GIF」，是一種位圖文件(bitmap file)存儲格式，讀成「ping」。PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，並且還可存儲多到16位的α通道數據。PNG使用從LZ77派生的無損數據壓縮算法。
PNG文件格式保留GIF文件格式的下列特性：
●使用彩色查找表或者叫做調色板可支持256種顏色的彩色圖像。
●流式讀/寫性能(streamability)：圖像文件格式允許連續讀出和寫入圖像數據
●這個特性很適合於在通信過程中生成和顯示圖像。
●逐次逼近顯示(progressive display)：這種特性可使在通信鏈路上傳輸圖像文件的同時就在終端上顯示圖像，把整個輪廓顯示出來之後逐步顯示圖像的細節，也就是先用低分辨率顯示圖像，然後逐步提高它的分辨率。
●透明性(transparency)：這個性能可使圖像中某些部分不顯示出來，用來創建一些有特色的圖像。
●輔助信息(ancillary information)：這個特性可用來在圖像文件中存儲一些文本註釋信息。
●獨立於計算機軟硬件環境。
●使用無損壓縮。
PNG文件格式中要增加下列GIF文件格式所沒有的特性：
●每個像素為48位的真彩色圖像。
●每個像素為16位的灰度圖像。
●可為灰度圖和真彩色圖添加α通道。
●添加圖像的γ信息。
●使用循環冗余碼(cyclic redundancy code，CRC)檢測損害的文件。
●加快圖像顯示的逐次逼近顯示方式。
●標準的讀/寫工具包。
●可在一個文件中存儲多幅圖像。
●文件結構
這三種格式各有優缺點，其中PNG優點多多。雖然普及得還很一般，但是其特殊的優越性已經讓我們對其產生非常大的興趣。至少我現在很喜歡這種格式。當然了對於製作頁面的製作人員來說，頁面總體積的大小那就是競爭力。所以我們還是必需要注意這三種格式的混合使用。那以什麼時候用GIF什麼時候用PNG什麼時候用JPG呢？我們下面一一來分析。
在實際的工作中，我發現一般的純色的圖形，比如一些小圖標、平鋪背景其中的色彩比較少，那麼作為GIF格式雖然只有256種色彩，但是應對這種類型的圖片那一定是非常的合適的。當然了，不排除有一些特別的小圖標色彩的豐富性，但是相信作為小圖標其色彩有點損失也不會影響到整體的視覺效果，所以GIF的適用範圍是：小圖標、平鋪背景等色彩比較少的小型圖片。
那麼大圖片又怎麼選擇呢，首先我們先瞭解一下JPG，我們使用Photoshop的朋友都知道，在最後導出圖片時會有一個地方讓我們選擇這個JPG圖片的圖片品質，100%是表示無壓縮，當我們拿同一張圖片導出不同的品質圖片對比時我們發現品質低的很明顯會比品質高的髒了很多，這樣照片看起來就很不好，當然我們也發現這種情況在偏大色塊的圖片中猶為突出。所以比如天空、人像。特別人像面部就會出現很難看的黑斑。當然如果對於照片質量要求不嚴格可以使用JPG並且降低品質。但是不適用於背景、小圖標。
我個人覺得PNG是介於GIF與高品質JPG之間的一種選擇，如果是簡純的小圖標，PNG會比GIF大這麼一點，但是品質上是差不多的。如果是普通的圖片，那麼PNG還是要比高品質的JPG要小一點的，但是PNG還是有點色彩損失的。不過如果圖片不放大基本上看不出來。我們做頁面基本上不是為了讓人放大了挑刺。所以PNG也就是介於中間的一種選擇。當然了，PNG還有一個很偉大的優點，那就是透明，雖然IE6之前還不支持這一特性。GIF也有透明，但是GIF只支持絕對的透明，不支持半透明，所以GIF的圖片的邊緣常會有一圈的白色的小點。而PNG就沒有這些問題，隨著時代的發展當IE6成為歷史的時候我想我們就可以看到PNG的真實的威力。
當然了有一種特別的情況可能會很特別，那就是背景圖片與前景圖片的切合處，這種地方需要色彩結構一致才能產生良好的視覺效果。那麼這種時候注意盡可能的不要使用不同格式混合使用。
思想指导实践，实践加以应用，应用创造价值
