首頁 部落格 網頁設計中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 轉載請註明馬路科技

超好玩nVidia AI樂園,美圖、P圖、去背全自動完成
超好玩nVidia AI樂園,美圖、P圖、去背全自動完成
Free Resource
Free Resource
Apr 08, 2019
Google協作平台製作網站的優缺點分析
Google協作平台製作網站的優缺點分析
Free Resource
Free Resource
May 07, 2019
淺談無障礙網頁設計2.0
淺談無障礙網頁設計2.0
Ryan
Ryan
Jan 11, 2019