首頁 部落格 網頁設計中GIF和JPG圖片的選用
Katie
Sep 12, 2013
iWare的視覺設計,喜歡用視覺發言、講故事,堅信「設計無論好壞要有自己的味道」。 喜好小說、電影、音樂...一切能提供幻想元素的事物;同時也是一位膽大心細的犬展指導手。

網頁設計中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了。

圖片來源 Pixabay 作者 qimono 轉載請註明馬路科技

文章標籤
數位設計 GIF動畫
手機端網頁設計與PC電腦端的差別與設計要點
手機端網頁設計與PC電腦端的差別與設計要點
Jericho
Jericho
Mar 23, 2021
手機網站設計應該注意什麽問題
手機網站設計應該注意什麽問題
Jericho
Jericho
Mar 15, 2021
【街頭攝影】如何拍出有故事性的「劇照」?
【街頭攝影】如何拍出有故事性的「劇照」?
Ringo
Ringo
Nov 02, 2017