網頁設計中GIF和JPG圖片的選用 - 巨群資訊

字體：小中大

網頁設計中GIF和JPG圖片的選用

2010/07/27 16:16:49瀏覽316｜回應0｜推薦2

http://www.piece2ec.com.tw

http://www.piece2ec.com.tw/News.asp?Id=59

網頁設計中，保證圖片清晰的前提下，圖片越小越好。因爲這樣可以減少頻寬的使用，加快網頁速度。尤其對於入口網站和流量很高的網站，如果圖片

都能比原來小10K的話，那麼節省的頻寬就相當明顯。那麽就要求設計師在製作或生成圖像時，選擇合適的格式和圖片品質，盡量把圖片體積壓縮的更小。

GIF就是指Graphics Interchange Format (圖片交替版面)，是特別為網路使用來研發的一種圖檔規格，這種壓縮法最適合用在大的2D平面圖、或是3D立體、

或是動畫圖；然而GIF被限制在最小8種色階和最大256種色階而已，無法使用全彩色階。

而JPEG就是Joint Photographic Experts Group(共有的照片輸出群)，是為了壓縮數位照片而研發的一種圖檔規格，JPG不支援256色階或低階色彩，只能在全彩情況下執行。
所以，即使JPG壓縮率很高，但其圖檔依舊比GIF的低色階圖檔來得大很多。所以，這種圖檔格式較適合在要求高品質的圖形，或是頻寬較大的情況下。

何時選擇gif格式？何時選擇jpg格式？
對於gif和jpg格式的選擇，沒有固定的限制。圖片色彩單一或由色塊或文字組成，較少漸變色的盡量使用gif格式，這樣可以減少很大體積；

當圖片色彩豐富，漸層色較多時建議使用jpg，下面看看兩個例子。

一般來說, 網站的logo因色彩一般非常單一，同時同樣尺寸的圖片保存成gif格式要比jpg格式小多了，把圖片放大時會發現jpg格式會産生噪點，
品質還不如 gif，那麼當然要選擇gif了。

看看上邊這兩張圖片，從網上搜索後截取了一部分，同時存成兩種格式，左邊的是gif格式，右邊的是jpg格式。從圖片的屬性看，gif格式大小爲 10.1KB，
jpg格式大小爲8.4KB，如果圖片品質要求不高的話還可以再壓縮。但從目前就可以明顯看出，jpg格式要比gif清晰多了，gif 格式自動把相似色彩改變成一種色彩，這也是上個例子中gif格式不産生噪點的原因。
透過這兩個例子，因該對網頁設計中選擇gif格式和jpg格式有基本認識。

來源:馬路科技

參考文獻：

CR & LF 研究所著，博碩文化編譯（ 2006 ）。配色王：最能激發創意與觸動人心的配色技法。

王樂成、林祐聖、葉欣怡（譯）（2002 ）。James Slevin 著。網際網路與社會，（Internet and society）。台北：弘智。

石恩綸（2000）。女性網路使用者的網站印象與網路使用行為。台北大學企業管例研究所碩士論文，未出版，台北。

Song, J. (2005), A theoretical approach to web design in e-commerce: A belief reinforcement model, Management Science, 51(8), 1219-1235.

Wei, T.; Moore, R.; Engelland, B. (2006), Exploring Attitudes and Purchase Intentions in a Brand-oriented, Highly Interactive Web Site Setting, Marketing Management Journal, 16(2), 94-106.

( 休閒生活｜生活情報 )