前端開發中對圖片的優化技巧總結

1.去掉無心義的修飾。優化以前首先確認一下設計自己是否須要用這麼多圖片，是否能夠更簡潔！

2.不用圖片。如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中均可以用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有長度限制，注意資源的大小。注意：若是 CSS 仍是放在head裏，使用data URL時文件的增大必然致使性能（開始渲染時間、首屏）變差。

6.設置緩存。緩存策略（如永久緩存+重命名）、部署策略（如反向代理、CDN等）。

7.資源的lazyload或postpone。（lazyload：延遲到其餘資源下載完成後再加載，postpone：延遲到元素可見再加載。）目前基本上都要用腳本控制。將來HTML和CSS會增長相關的控制屬性，見：Resource Priorities。

8.CSS Sprites。 使用CSS Sprites,減小對圖片的請求次數。

9.使用base64編碼代替圖片。適用於圖片小於2KB，頁面引用圖片很少的狀況。將圖片轉換爲base64編碼字符串inline到CSS或頁面中，減小http的請求次數。

10.更好的圖片格式，使用webp、bpg、sharpP等新圖片格式具備更好的壓縮比。