百度權重查詢 詞庫網 網站監控 服務器監控 seo監控 手機游戲 iPhone游戲

文/來自竹林

現在的互聯網，是一個用戶體驗至上的時代，大多數公司都會把如何提高產品的易用性放在首要位置。如何提高產品的質量則體現在項目開發的許多階段，例如產品設計、UI設計和前端開發等。而圖片優化在提高產品質量上也起到了舉足輕重的作用，這也就是為什么越來越多的產品團隊更加關注這個問題。

本文關于圖片優化的內容主要由兩部分構成：

1. 整頓總結網上關于圖片優化的一些體例方法。

2. 自己在項目開發過程中現實碰到的問題以及用到的圖片優化方案。

如有不足之處，迎接大家指出并增補。

1. 簡約而不簡單

Win8和iOS7的出現，將互聯網行業中許多產品設計帶回到原點，或許更是另一個新的起點。Win8的Metro UI、iOS7中圖標的扁平化設計、一向崇尚簡約的豆瓣網、還有頂著時代工匠稱號的老羅所設計的錘子ROM，無一不體現著簡約的風格。

言歸正傳，回到我們圖片優化的主題上。在產品設計和UI設計階段，除了內容圖片，其他的圖片都是起修飾的作用。也就是對于傳遞信息來說并非本質性的。所以好大的優化就是不要圖片。在進入到研發階段之前，就要確認設計，設計自己是否需要用到那么多的圖片，照舊說可以做到更簡潔！

2. 樣式代替圖片

Chrome，FF等瀏覽器廠商為互聯網的發展做了這么多貢獻，為什么我們還要讓那些不兼容CSS3的瀏覽器阻礙互聯網的發展呢。因此，讓我們直接使用CSS樣式代替圖片來實現修飾效果！例如：半透明、圓角、陰影、高光、漸變等。這些效果主流的瀏覽器都能夠好支撐，而對于那些低端瀏覽器，我們并不會完全拋棄他們，“漸進增強”則是一個很好的解決方案。至于什么是漸進增強，這里不再用過多篇幅去詮釋，假如感愛好可以參考CSS“漸進增強”在web制作中常見應用舉例。

3. 選擇好合適的圖片

我們常見的圖片格式有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。這兩個新格式都支撐無損和有損壓縮，都具有更的壓縮比。當然這需要為不同的瀏覽器返回不同的圖片，增添了開發成本，也增添存儲成本。不過你省了流量或者相同流量下改善了圖片質量，提拔了用戶體驗。這就需要根據項目需求進行取舍了。

4. 常用的圖片優化技巧

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

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

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

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

5. 適用各種資源而不限于圖片的優化

data url

Base64是網絡上好常見的用于傳輸8Bit字節的編碼體例之一，可用于在HTTP環境下傳遞較長的標示信息。將圖片轉化為base64編碼格式，資源內嵌于CSS或HTML中，不必單獨請求。

該體例的優點是：

1. 削減了HTTP請求

2. 避免了圖片重新上傳，還要清理緩存的問題 

不足之處是：

1. IE6, IE7不支撐該類型編碼的圖片作為背景圖

2. 增添了CSS文件的尺寸

3. 維護成本較高

按照HTTP協議設置合理的緩存

具體的緩存策略（如永遠緩存 + 重命名）、部署策略（如反向代理、CDN等）這里就不睜開了。

Responsive設計

為了適應現在眾多分辨率和設備像素比的移動設備，要產生多套不同大小和分辨率的圖片，然后配合Media Query進行開發。這里推薦在進行移動端頁面開發時使用SVG或Icon Font等技術。這些技術可以好支撐Retina設備。關于更多響應式方案，可以參考《響應式Web設計: HTML5和CSS3實踐》這本書或網上相關資料，這里不再睜開。

以上為項目中常用的圖片優化技術，只有更多地關注細節，才能做出優異的產品。往后會介紹更多文章中出現的技術細節。