前端優化（圖片優化）

圖片優化——質量和性能的平衡點

爲啥要作圖片優化？

圖片是界面顯示效果很重要的組成部分，圖片加載關係到用戶體驗、應用性能。對於頁面來講速度影響着最大的就是圖片，一張普通的圖片能夠達到4-5M的大小，而代碼壓縮也就只有幾十KB。若是一個頁面加載幾秒沒有完成，用戶體驗很差，會喪失不少用戶的。

常見優化大概如下幾點：

1. 壓縮
2. 懶加載  + 節流優化
   
3. CDN/OSS 七牛、阿里雲、騰訊雲基本都有（cdn遵循就近原則，且能稱得上CDN的速度確定較快。）
4. css 預加載 / js 預加載
5. css Sprites 精靈圖/雪碧圖

針對圖片太多或者太大：將圖片服務和應用服務分離

    對於服務器來講,圖片始終是最消耗系統資源的,若是將圖片服務和應用服務放在同一服務器的話,應用服務器很容易會由於圖片的高I/O負載而崩潰,因此當網站存在大量的圖片讀寫操做時,建議使用圖片服務器.

懶加載

懶加載解釋：

  對於圖片過多的頁面，爲了加速頁面加載速度，不少時候咱們須要將頁面內未出現的可視區域內的圖片先不加載，等到滾動到可視區的時候錄再去加載。這樣子對於頁面加載性能上會有很大的提高，也就提升了用戶體驗。稱之爲懶加載

網友提供的一張圖，很簡潔的說明了懶加載，如何判斷圖片進入可視區域是關鍵。

lazyload（vue、react、js、jquery都有提供）插件

圖片格式

關於web圖片格式：JPEG/JPG、PNG、WEBP、Base6四、SVG

JPEG/JPG：特色是有損壓縮，體積小，加載快，不支持透明。

PNG-8和PNG-24：無損壓縮、質量高、體積大、支持透明

SVG：文本文件，體積小，不失真，兼容性好。

base64：文本文件、依賴編碼、小圖標解決方案

一張圖片知足如下條件時 能夠大膽的使用Base64編碼：
一、圖片很小
二、圖片沒法像雪碧圖同樣和其餘小圖標結合（雪碧圖是主要的減小HTTP請求途徑）
三、圖片更新頻率低（不須要重複編碼和修改文件內容，維護成本很低）

WEBP：2010年被提出，是Google專爲WEB開發的一種旨在加快圖片加載速度的圖片格式，支持有損壓縮和無損壓縮。WEBP受到最大的限制就是瀏覽器的兼容性。

js圖片延遲加載和指定圖片優先加載的一中實現方式