目前網(wǎng)站圖片的采用一共有流行三種，分別是JPG、PNG、GIF，然而很多人并不知道三者在選擇的時(shí)候究竟應(yīng)該選誰(shuí)（BMP就不考慮了吧）。雖然都可以存儲(chǔ)圖片，但是如果要發(fā)布到網(wǎng)上，就必須考慮速度、大小和失真程度的問(wèn)題。如果你運(yùn)用得好，選對(duì)圖片，那樣便會(huì)使網(wǎng)站的整體體驗(yàn)上升，如果你運(yùn)用得不好，就會(huì)引起反效果。下面我通過(guò)文件大小等多方面的元素來(lái)講一下網(wǎng)站圖片的合理選擇。

?

PNG、GIF、JPG 介紹

?

GIF 圖片

Gif 算是比較老的圖片格式了，它的色彩效果最低，用gif保存鮮艷的圖片的話(huà)會(huì)讓你的網(wǎng)站看上去非?？膳?。但是gif有著不可忽視的特點(diǎn)：體積小，有著極好的壓縮效果，支持動(dòng)畫(huà)，并且支持透明效果，雖然這個(gè)透明沒(méi)有PNG的那樣漸變透明的強(qiáng)大。動(dòng)畫(huà)選gif沒(méi)錯(cuò)；如果你的圖片只有很單調(diào)的色彩，沒(méi)有漸變色，例如只有紅藍(lán)兩色，那么選GIF最好不過(guò)了！例如百度的首頁(yè)LOGO就是很好的例子，它的大小只有2KB，節(jié)省了資源。

?

JPG / JPEG 圖片

JPG是數(shù)碼相機(jī)最常用的格式，其特點(diǎn)是色彩還原好，可以在照片不明顯失真的情況下，大幅降低體積，所以體積不很大，缺點(diǎn)是不支持透明。照片類(lèi)的圖片，例如網(wǎng)站上的Gallery，你想要張貼出來(lái)的自然風(fēng)景之類(lèi)，最好都用JPG。但是屏幕截圖呢？一會(huì)介紹。

?

P NG 圖片

可謂是最適合網(wǎng)絡(luò)的圖片！PNG的優(yōu)點(diǎn)是，清晰，無(wú)損壓縮，壓縮比率很高，可漸變透明，具備幾乎所有GIF的優(yōu)點(diǎn)；缺點(diǎn)是不如JPG的顏色豐富，同樣的圖片體積也比JPG略大。但是PNG應(yīng)該在網(wǎng)站設(shè)計(jì)上被推廣，它是公認(rèn)的最適合網(wǎng)頁(yè)使用的圖片格式。Google就是一個(gè)很好的例子。Google所有站點(diǎn)幾乎全部的圖片資源都是PNG格式。8位的PNG完全可以替代掉GIF。

上圖就是Google的LOGO，選擇PNG是為了最清晰同時(shí)體積更小，并且Google主頁(yè)的LOGO圖片并不是背景透明的，而是白色背景的。既然不是透明的，為什么不選擇JPG呢？Google難道沒(méi)有考慮嗎，所以png有其優(yōu)勢(shì)。

?

PNG有著另一個(gè)優(yōu)點(diǎn)，那就是 逐次逼近顯示(progressive display) ：傳輸圖像文件的同時(shí)，可以先把整個(gè)輪廓顯示出來(lái)，然后逐步顯示圖像的細(xì)節(jié)，即先顯示低分辨率顯示圖像，從模糊到清晰，然后逐步提高它的分辨率。這是一個(gè)很好的用戶(hù)體驗(yàn)。

?

各方面比較

大小比較：通常地，PNG ≈ JPG > GIF

透明性：PNG > GIF > JPG

色彩豐富程度：JPG > PNG >GIF

兼容程度：GIF ≈ JPG > PNG

注意，IE6下PNG的透明是不能顯示的，有其對(duì)應(yīng)的Hack方法。

?

PNG vs JPG 大小實(shí)測(cè)

我在電腦上用電腦自帶的截圖軟件進(jìn)行完全一樣的截圖，分別保存為JPG和PNG。下面是截圖后所得的原始圖片大小比較：

可以看到，JPG的大小要遠(yuǎn)小于PNG，PNG整整大了幾乎110KB。要知道在網(wǎng)絡(luò)上，即使減小10KB，也會(huì)帶來(lái)用戶(hù)體驗(yàn)的提升。

然后我用Imageoptim軟件對(duì)這兩張圖進(jìn)行無(wú)損壓縮。最后你可以看到，PNG擁有著很高的壓縮比，JPG則只是減小了一點(diǎn)。最后PNG比JPG的大小高出50KB左右，算是比較成功的壓縮了。不過(guò)，這就代表屏幕截圖用JPG更好嗎？

?

JPG、PNG，誰(shuí)更適合截圖

PNG更適合屏幕截圖！png是軟件截屏的最佳選擇（體積非常??；最清晰），并且壓縮空間非常大。事實(shí)上JPG和PNG適合的場(chǎng)景并不同，JPG天生適合風(fēng)景照片，PNG幾乎就是為了“便攜網(wǎng)絡(luò)圖形圖像”而生。截圖保存為jpg，很容易出現(xiàn)失真現(xiàn)象，在文字、漸變色和比較精細(xì)的地方，例如線條周?chē)３３霈F(xiàn)斑點(diǎn)、不清楚，模糊。就算提高質(zhì)量，jpg的體積就上去了。而且JPG不支持透明，所以的你軟件圖片如果有陰影效果，用JPG就太浪費(fèi)了。相對(duì)的，PNG就比較適合，在保持極少失真的情況下，還能保留透明陰影，文件體積小，而且壓縮空間很大。所以，截圖的選擇無(wú)疑是PNG更好。

例如下圖，同樣一張圖，PNG僅9KB左右；而JPG，為了保持良好的清晰度，需要110KB左右！GIF就慘不忍睹了。

?

總結(jié)：JPG、PNG、GIF 到底選誰(shuí)

對(duì)于一個(gè)網(wǎng)站來(lái)說(shuō)，按照保證色彩顯示良好同時(shí)文件最小的原則，我的總結(jié)是這樣的：

網(wǎng)站的LOGO，如果色彩單調(diào)，選擇PNG或者GIF，推薦前者。但是如果為了IE6的兼容，選擇后者；

如果你需要?jiǎng)訄D，選擇GIF；

網(wǎng)站上的元素背景圖片（比如按鈕背景、導(dǎo)航條背景），或者很精細(xì)的圖片，還是那句話(huà)，如果色彩單調(diào)，選擇PNG或者GIF，推薦前者。但是如果為了IE6的兼容，選擇后者，但要考慮失真問(wèn)題；少用JPG，否則會(huì)讓這些東西很難看，除非你用風(fēng)景圖片作按鈕背景；

網(wǎng)站內(nèi)容里，你真實(shí)拍攝的圖片，或者你下載的風(fēng)景圖片，保持JPG來(lái)獲得更好的顯示效果和體積；

截圖都應(yīng)該用PNG。當(dāng)然，如果你并不追求非常完美的顯示效果，只是注重內(nèi)容本身而容許圖片上的小瑕疵，選擇JPG也可。

?

寫(xiě)在最后

不論你用哪種圖片，你都應(yīng)該考慮到圖片的壓縮性，并對(duì)圖片盡可能的無(wú)損壓縮。例如ImageOptim就是一個(gè)很好的壓縮工具。

此外，如果你的圖片非常小，你甚至可以考慮 Base64 。

謝謝收看。

?

原文： http://blog.netsh.org/posts/jpg-png-gif_1327.netsh.html

?

justcode.ikeepstudying.com

?