首頁 部落格 網頁設計中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 轉載請註明iWare網頁設計公司

網頁設計過程中如何做好色彩搭配
網頁設計過程中如何做好色彩搭配
Jericho
Jericho
Mar 27, 2024
為何要製作RWD (Responsive Web Design) 響應式網站設計?有什麼優點和缺點?
為何要製作RWD (Responsive Web Design) 響應式網站設計?有什麼優點和缺點?
Jericho
Jericho
Mar 20, 2024
網站設計思路:創造令人愉悅的用戶體驗
網站設計思路:創造令人愉悅的用戶體驗
Jericho
Jericho
Mar 15, 2024