DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 網頁頁面中圖像格式的選用
網頁頁面中圖像格式的選用
編輯:關於網頁技巧     

好久沒有更新博客了,也讓很多朋友失望了。最近一直很忙,當然了忙是借口,實在是懶。人啊,真的不能懶,一懶身上毛病就越來越多,然後就會越懶越懶。所以從今天開始要重新開始更新博客。閒言少敘,我們進入正題。(最近評書相聲聽多了,用語也有點不倫不類。)

今天有個學生問我:頁面中使用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種色彩,但是應對這種類型的圖片那一定是非常的合適的。當然了,不排除有一些特別的小圖標色彩的豐富性,但是相信作為小圖標其色彩有點損失也不會影響到整體的視覺效果,所以GI

12下一頁
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved