現在的互聯網，是一個用戶體會至上的年代，大多數公司都會把如何進步產品的易用性放在首要位置。如何進步產品的質量則表現在項目開發的許多階段，例如產品規劃、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實踐》這本書或網上相關材料，這兒不再打開。

  以上為項目中常用的圖片優化技能，只要更多地重視細節，才干做出優秀的產品。今后會介紹更多文章中呈現的技能細節。