馬路科技網頁設計公司,十九年網頁設計經驗,在台北、台南提供網頁設計、網站設計、網路行銷、SEO、關鍵字優化、手機網頁設計、Web應用系統整合服務

首頁 / 設計學堂 / 網頁設計中GIF和JPG圖片的選用

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


網頁設計中,保證圖片清晰的前提下,圖片越小越好。因爲這樣可以減少頻寬的使用,加快網頁速度。尤其對於入口網站和流量很高的網站,如果圖片 都能比原來小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格式大小爲 63.1KB,jpg格式大小爲46.4KB,如果圖片品質要求不高的話還可以再壓縮。但從目前就可以明顯看出,jpg格式要比gif清晰多了,gif 格式自動把相似色彩改變成一種色彩,這也是上個例子中gif格式不産生噪點的原因。
透過這兩個例子,因該對網頁設計中選擇gif格式和jpg格式有基本認識,不過在實際應用當中,建議保存成兩種格式,多對比,慢慢就會發現 什麽時候該用gif,什麽時候該用jpg了。

 

轉載請註明出處或鏈接

分類: 網頁設計設計美學  瀏覽 8194 次