目前網站圖片的采用一共有流行三種，分別是JPG、PNG、GIF，然而很多人並不知道三者在選擇的時候究竟應該選誰（BMP就不考慮了吧）。雖然都可以存儲圖片，但是如果要發布到網上，就必須考慮速度、大小和失真程度的問題。如果你運用得好，選對圖片，那樣便會使網站的整體體驗上升，如果你運用得不好，就會引起反效果。下面我通過文件大小等多方面的元素來講一下網站圖片的合理選擇。
PNG、GIF、JPG 介紹 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。
上圖就是Google的LOGO，選擇PNG是為了最清晰同時體積更小，並且Google主頁的LOGO圖片並不是背景透明的，而是白色背景的。既然不是透明的，為什麼不選擇JPG呢？Google難道沒有考慮嗎，所以png有其優勢。
PNG有著另一個優點，那就是逐次逼近顯示(progressive display)：傳輸圖像文件的同時，可以先把整個輪廓顯示出來，然後逐步顯示圖像的細節，即先顯示低分辨率顯示圖像，從模糊到清晰，然後逐步提高它的分辨率。這是一個很好的用戶體驗。
各方面比較
大小比較：通常地，PNG ≈ JPG > GIF
透明性：PNG > GIF > JPG
色彩豐富程度：JPG > PNG >GIF
兼容程度：GIF ≈ JPG > PNG
注意，IE6下PNG的透明是不能顯示的，有其對應的Hack方法。
注：相關網站建設技巧閱讀請移步到建站教程頻道。
1 2 下一頁 收藏本文
PNG vs JPG 大小實測
我在電腦上用電腦自帶的截圖軟件進行完全一樣的截圖，分別保存為JPG和PNG。下面是截圖後所得的原始圖片大小比較：
可以看到，JPG的大小要遠小於PNG，PNG整整大了幾乎110KB。要知道在網絡上，即使減小10KB，也會帶來用戶體驗的提升。
然後我用Imageoptim軟件對這兩張圖進行無損壓縮。最後你可以看到，PNG擁有著很高的壓縮比，JPG則只是減小了一點。最後PNG比JPG的大小高出50KB左右，算是比較成功的壓縮了。不過，這就代表屏幕截圖用JPG更好嗎？
- 上一頁:網站差異化：讓你走出seo的苦海
- 下一頁:百度：搜索引擎抓取系統概述