現在的互聯網提倡用戶體驗，只有吸引客戶的產品才能賣出好的價格，網站也是一樣，如何設計出一流的網站是只管重要的。而體現網站效果的就是圖片，所以要用圖片，就要選擇及優化圖片。如下就是關于圖片的選擇及優化。

第一：選擇最合適的圖片

我們常見的圖片格式有JPEG、GIF、PNG。

基本上，內容圖片多為照片之類或圖片構成較復雜的情況，適用于JPEG。如網站中的Banner圖、輪播圖、大尺寸背景圖等。

修飾圖片通常更適合用無損壓縮的PNG。而我們主要用到的PNG圖片又分為PNG-8和PNG-24兩種，PNG-8格式不支持半透明，也是IE6兼容的圖片存儲方式。如果對圖片質量要求較高的半透明或全透明背景，保存成PNG-24更合適。有時候會遇到在IE6下應用PNG-24圖片的情況，關于IE6下PNG Alpha透明的解決方案可以參考IE6中PNG Alpha透明。我在項目中常用的方法是AlphaImageLoader篩選器。

第二：GIF基本上除了GIF動畫外不要使用。

除了這些格式之外，Chrome、新版Opera、Android 4+支持WebP格式，IE 9+、IE mobile 10+支持JPEG XR。這兩個新格式都支持無損和有損壓縮，都具有更良好的壓縮比。當然這需要為不同的瀏覽器返回不同的圖片，增加了開發成本，也增加存儲成本。不過你省了流量或者相同流量下改善了圖片質量，提升了用戶體驗。這就需要根據項目需求進行取舍了。

第三：常用的圖片優化技巧

CSS Sprites，將同類型的圖標或按鈕等背景圖合到一張大圖中，減少頁面請求。

Icon Font，將圖標做成字體文件。優點是圖標支持多個尺寸，兼容所有瀏覽器，減少頁面請求等。美中不足的是只支持純色的icon。

SVG，對于絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。現在主流瀏覽器都支持SVG了，所以可放心使用！

圖片壓縮工具，可以在圖片上線前使用壓縮工具進行壓縮，獲得更高的壓縮比。我常用的壓縮工具為Yahoo的Smush.it。

以上就是關于網站制作過程需要用到的圖片選擇及優化，希望大家在策劃和做網站時一定要慎重，圖片效果固然可取，但是會影響我們瀏覽的速度，所以要提前做優化才可以，將圖片控制在50k以內。