html頁面中圖像格式的選用之我見

2020-03-24 15:58:16

字體：大中小

來源：轉載

供稿：網(wǎng)友

下面我們先了解一下幾種格式的比較正式的解釋(注：以下內(nèi)容源自百度知道)：

GIF 意為Graphics Interchange format（圖形交換格式），GIF圖片的擴展名是gif。現(xiàn)在所有的圖形瀏覽器都支持GIF格式，而且有的圖形瀏覽器只認識GIF格式。GIF是一種索引顏色格式，在顏色數(shù)很少的情況下，產(chǎn)生的文件極小，它的優(yōu)點主要有：

GIF格式支持背景透明。GIF圖片如果背景色設置為透明，它將與瀏覽器背景相結合，生成非矩形的圖片。
GIF格式支持動畫。在Flash動畫出現(xiàn)之前，GIF動畫可以說是網(wǎng)頁中唯一的動畫形式。GIF格式可以將單幀的圖象組合起來，然后輪流播放每一幀而成為動畫。雖然并不是所有的圖形瀏覽器都支持GIF動畫，但是最新的圖形瀏覽器都已經(jīng)支持GIF動畫。
GIF格式支持圖形漸進。漸進是指圖片漸漸顯示在屏幕上，漸進圖片將比非漸進圖片更快地出現(xiàn)在屏幕上，可以讓訪問者更快地知道圖片的概貌。
GIF格式支持無損壓縮。無損壓縮是不損失圖片細節(jié)而html' target='_blank'>壓縮圖片的有效方法，由于GIF格式采用無損壓縮，所以它更適合于線條、圖標和圖紙。
GIF格式的缺點同樣相當明顯。索引顏色是歷史遺留的產(chǎn)物，在DOS下的老游戲幾乎無一例外的采用索引顏色，這種格式本來早就應該淘汰了。但是由于帶寬的限制，GIF從DOS時代紅到了Internet時代。GIF這種索引顏色格式最大的缺點就是它只有256種顏色，這對于照片質(zhì)量的圖片是顯然不夠的。

JPEG 代表Joint Photograhic Experts Group（聯(lián)合圖像專家組），這種格式經(jīng)常寫成JPG，JPG圖片的擴展名為jpg。

JPG最主要的優(yōu)點是能支持上百萬種顏色，從而可以用來表現(xiàn)照片。此外，由于JPG圖片使用更有效的有損壓縮算法，從而使文件長度更小，下載時間更短。有損壓縮會放棄圖像中的某些細節(jié)，以減少文件長度。它的壓縮比相當高，使用專門的JPG壓縮工具其壓縮比可達180：1，而且圖像質(zhì)量從瀏覽角度來講質(zhì)量受損不會太大，這樣就大大方便了網(wǎng)絡傳輸和磁盤交換文件。JPG較GIF更適合于照片，因為在照片中損失一些細節(jié)不像對藝術線條那么明顯。另外，JPG對照片的壓縮比例更大，而最后的質(zhì)量也更好。

但是從長遠來看，JPG隨著帶寬的不斷提高和存儲介質(zhì)的發(fā)展，它也應該是一種被淘汰的圖片格式，因為有損壓縮對圖像會產(chǎn)生不可恢復的損失。所以經(jīng)過壓縮的JPG的圖片一般不適合打印，在備份重要圖片時也最好不要使用JPG。還有，JPG也不如GIF圖像那么靈活，它不支持圖形漸進、背景透明，更不支持動畫。

PNG 是20世紀90年代中期開始開發(fā)的圖像文件存儲格式，其目的是企圖替代GIF和TIFF文件格式，同時增加一些GIF文件格式所不具備的特性。流式網(wǎng)絡圖形格式(Portable Network Graphic Format，PNG)名稱來源于非官方的“PNG's Not GIF”，是一種位圖文件(bitmap file)存儲格式，讀成“ping”。PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，并且還可存儲多到16位的α通道數(shù)據(jù)。PNG使用從LZ77派生的無損數(shù)據(jù)壓縮算法。

PNG文件格式保留GIF文件格式的下列特性：

使用彩色查找表或者叫做調(diào)色板可支持256種顏色的彩色圖像。
流式讀/寫性能(streamability)：圖像文件格式允許連續(xù)讀出和寫入圖像數(shù)據(jù)
這個特性很適合于在通信過程中生成和顯示圖像。
逐次逼近顯示(progressive display)：這種特性可使在通信鏈路上傳輸圖像文件的同時就在終端上顯示圖像，把整個輪廓顯示出來之后逐步顯示圖像的細節(jié)，也就是先用低分辨率顯示圖像，然后逐步提高它的分辨率。
透明性(transparency)：這個性能可使圖像中某些部分不顯示出來，用來創(chuàng)建一些有特色的圖像。
輔助信息(ancillary information)：這個特性可用來在圖像文件中存儲一些文本注釋信息。
獨立于計算機軟硬件環(huán)境。
使用無損壓縮。
PNG文件格式中要增加下列GIF文件格式所沒有的特性：

每個像素為48位的真彩色圖像。
每個像素為16位的灰度圖像。
可為灰度圖和真彩色圖添加α通道。
添加圖像的γ信息。
使用循環(huán)冗余碼(cyclic redundancy code，CRC)檢測損害的文件。
加快圖像顯示的逐次逼近顯示方式。
標準的讀/寫工具包。
可在一個文件中存儲多幅圖像。
文件結構
更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML頁面彈出居中可拖拽的自定義窗口層

下一篇：HTML5 data-- 自定義屬性實例分享