2、圖片相關優化

圖片類型：

png8——256色支持透明，8比特

png24——2的24次方色，不支持透明，24比特

png32——2的24次方色，支持透明，32比特

png是無損壓縮，JPEG是有損壓縮，每種圖片格式都有本身的特色，針對不一樣的業務場景選擇不一樣的圖片格式很重要。

不一樣格式圖片經常使用的業務場景：

jpg有損壓縮，壓縮率高，不支持透明，大部分不須要透明圖片的業務場景
png支持透明，瀏覽器兼容好， 大部分須要透明圖片的業務場景
webp壓縮程度更好，在ios webview有兼容性問題 ， 安卓所有
svg矢量圖，代碼內嵌，相對較小，圖片樣式相對簡單的場景，圖片樣式相對簡單的業務場景

如何進行圖片壓縮：

針對真實圖片狀況，捨棄一些相對可有可無的色彩信息。

一、CSS雪碧圖：把你的網站上用到的一些圖片整合到一張單獨的圖片中

優勢：減小你的網站的HTTP請求數量
缺點：合併的圖片太大，一次加載比較慢，若是沒有加載出來那麼整個頁面就失去了icons。

解決辦法：雪碧圖不能太大，將icons分在多個雪碧圖中。根據業務相關、將雪碧圖進行拆分。

製做雪碧圖樣式：www.spritecow.com,選擇一個區域會生成樣式，width和height就是想要的那個icons的大小。left,top就是相對於左上角那個點，咱們的icons要怎麼偏移，icons的左上角才能和整個圖片的左上角重合。

二、Image inline：將圖片的內容內嵌到html當中（base64）

優勢：減小你的網站的HTTP請求數量

缺點：總體的size會變大

小與4kb的或者8kb的圖片就應該inline進去

三、使用矢量圖：使用SVG進行矢量圖的繪製，使用iconfont解決icon問題。

四、在安卓下使用webp：WebP 的優點體如今它具備更優的圖像數據壓縮算法，能帶來更小的圖片體積，並且擁有肉眼識別無差別的圖像質量；同時具有了無損和有損的壓縮模式、Alpha 透明以及動畫的特性，在 JPEG 和 PNG 上的轉化效果都很是優秀、穩定和統一。