前端開發時的圖片優化技巧

　   1. 去掉無意義的修飾。除了內容圖片，其他的圖片的作用是修飾，也就是對于傳達信息來說并非本質性的。最大的優化就是壓根不要圖片!所以在優化之前要做的，首先是確認設計，設計本身是否需要用那么多圖片?還是說可以更簡潔?

　　2. 不用圖片。直接使用CSS替代圖片來實現修飾效果吧!如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中都可以用CSS達成。將來CSS濾鏡得到廣泛支持后，還可以做到alpha混合、正片疊底等各種效果。

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

　　4. 使用恰當的圖片格式。我們常見的圖片格式有JPEG、GIF、PNG。基本上，內容圖片多為照片之類的，適用于JPEG。而修飾圖片通常更適合用無損壓縮的PNG。而GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視頻格式，或用SVG動畫取代。除了這些格式之外，Chrome、新版Opera、Android 4+支持WebP格式，IE 9+、IE mobile 10+支持JPEG XR。這兩個新格式都支持無損和有損壓縮，都具有更良好的壓縮比。當然這需要為不同的瀏覽器返回不同的圖片，增加了開發成本，也增加存儲成本。不過你省了流量或者相同流量下改善了圖片質量，提升了用戶體驗。對了，別忘了使用優秀的圖片編碼器及合適的參數。好的圖片編碼器，尤其是有損圖片格式的編碼器，能通過算法或手動調整，獲得更高的壓縮比。

　　以下是普遍適用各種資源而不限于圖片的優化手段：

　　5. 使用data url。資源內嵌于CSS或HTML中，而不必單獨請求。注意，多個地方都要使用的資源不一定適合用此優化方式，因為圖片數據重復多了，增加流量。另外許多瀏覽器對data url有長度限制，注意資源的大小。（青島微信營銷）

　　6. 按照HTTP協議設置合理的緩存。具體的緩存策略(如永久緩存+重命名)、部署策略(如反向代理、CDN等)這里就不展開了。

　　7. 使用支持SPDY的服務器。SPDY可認為是未來的HTTP 2.0的早期實現，Chrome、Firefox 13+、Opera 12+、IE 11+均已支持SPDY。SPDY和HTTP2可參考此中文演講：http://www.youtube.com/watch?v=r74RAcrc1ZA(請自備梯子)，這里就不展開了。

　　8. 資源的lazyload或postpone。(lazyload：延遲到其他資源下載完成后再加載，postpone：延遲到元素可見再加載。)目前基本上都要用腳本控制。未來HTML和CSS會增加相關的控制屬性，見：Resource Priorities。

　　9. 資源的prefetch。可用，見http://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch。注意prefetch只是hint，Firefox會預取資源(如果網絡空閑的話)，而IE 9則是對該資源的hostname進行DNS預解析。如果你真的需要更強的控制，則得用腳本。注意：Chrome支持與prefetch相近但更進一步的，另外SPDY加入了與prefetch相近但語義不同的subresource link支持，這兩個新特性我也沒用過，有興趣的可以嘗試。

　　圖片的其他優化技巧如字體圖標、CSS Sprites等，不過我不推薦。用字體圖標不如用SVG。使用了SPDY和data url后，CSS Sprites完全沒有必要用了。

　　再有各種特定的圖片問題，超出了一般優化的范疇。如許多手機瀏覽器有黑夜模式，其中有的瀏覽器允許定制黑夜模式;有的手機瀏覽器允許在用戶開啟不加載圖片選項的情況下讓開發者設置必須加載的圖片(有點繞);又如許多手機瀏覽器有所謂云加速模式，即在服務器端對圖片進行處理后再發送給客戶端，應該返回怎樣的圖片給這些服務器有待研究和實踐。

　　10. 最后是responsive設計所需的圖片優化，可能要產生多套不同大小和分辨率的圖片，配合media query、以及srcset屬性、picture元素、src-N等標準提案，這個話題比較大，尚未形成普遍認可的最佳實踐，這里也不多展開了。

      青島微信營銷，就找青島卓信網絡技術有限公司！