目前流行的網站圖片格式有三種,分別是JPG、PNG、GIF,然而很多人并不知道三者在選擇的時候究竟應該選誰。雖然都可以存儲圖片,但是如果要發布到網上,就必須考慮速度、大小和失真程度的問題。如果你運用得好,選對圖片,那樣便會使網站的整體體驗上升,如果你運用得不好,就會引起反效果。下面我通過文件大小等多方面的元素來講一下網站圖片的合理選擇。
GIF 圖片
Gif 算是比較老的圖片格式了,它的色彩效果最低,用gif保存鮮艷的圖片的話會讓你的網站看上去非??膳?。但是gif有著不可忽視的特點:體積小,有著極好的壓縮效果,支持動畫,并且支持透明效果,雖然這個透明沒有PNG的那樣漸變透明的強大。動畫選gif沒錯;如果你的圖片只有很單調的色彩,沒有漸變色,例如只有紅藍兩色,那么選GIF最好不過了!例如百度的首頁LOGO就是很好的例子,它的大小只有2KB,節省了資源。
JPG / JPEG 圖片
JPG是數碼相機最常用的格式,其特點是色彩還原好,可以在照片不明顯失真的情況下,大幅降低體積,所以體積不很大,缺點是不支持透明。照片類的圖片,例如網站上的Gallery,你想要張貼出來的自然風景之類,最好都用JPG。
PNG 圖片
可謂是最適合網絡的圖片!PNG的優點是,清晰,無損壓縮,壓縮比率很高,可漸變透明,具備幾乎所有GIF的優點;缺點是不如JPG的顏色豐富,同樣的圖片體積也比JPG略大。但是PNG應該在網站設計上被推廣,它是公認的最適合網頁使用的圖片格式。Google就是一個很好的例子。Google所有站點幾乎全部的圖片資源都是PNG格式。8位的PNG完全可以替代掉GIF。
PNG有著另一個優點,那就是逐次逼近顯示(progressive display):傳輸圖像文件的同時,可以先把整個輪廓顯示出來,然后逐步顯示圖像的細節,即先顯示低分辨率顯示圖像,從模糊到清晰,然后逐步提高它的分辨率。這是一個很好的用戶體驗。
各方面比較
大小比較:通常地,PNG ≈ JPG > GIF
透明性:PNG > GIF > JPG
色彩豐富程度:JPG > PNG >GIF
兼容程度:GIF ≈ JPG > PNG
JPG、PNG、GIF 到底選誰
對于一個網站來說,按照保證色彩顯示良好同時文件最小的原則,我的總結是這樣的:
一、 網站的LOGO,如果色彩單調,選擇PNG或者GIF,推薦前者。但是如果為了IE6的兼容,選擇后者;
二、如果你需要動圖,選擇GIF;
三、網站上的元素背景圖片(比如按鈕背景、導航條背景),或者很精細的圖片,還是那句話,如果色彩單調,選擇PNG或者GIF,推薦前者。但是如果為了IE6的兼容,選擇后者,但要考慮失真問題;少用JPG,否則會讓這些東西很難看,除非你用風景圖片作按鈕背景;
四、網站內容里,你真實拍攝的圖片,或者你下載的風景圖片,保持JPG來獲得更好的顯示效果和體積;