圖片相關優化
1.圖片相關優化的核心概念
圖片壓縮指的是針對圖片的情況，捨棄一些相對無關緊要的色彩信息，捨去測部分人眼基本是察覺不出來的。
- 有損壓縮在壓縮過程中會丟失部分圖片資源，但是這部分資源對人眼來說是沒有區別，所以不是很重要。
- png8/png24/png32的區別
- png8 256色+支持透明（8bit就可以表示一個顏色）
- png24 2^24色+不支持透明（24bit纔可以顯示一個像素中的顏色）
- png32 2^24色+支持透明（在24位的基礎上增加8位支持透明）
- 根據需要選擇文件類型，顏色越豐富，所需的空間就越多
- 不同格式圖片常用的業務場景
- jpg有損壓縮，壓縮率高，不支持透明
- png支持透明，瀏覽器兼容性好（如果png8能支持的話，那麼文件大小會相對更小）
- webp壓縮程度更好，在ios webview有兼容性問題（2010年穀歌提出來的文件格式）
- svg矢量圖，代碼內嵌，相對較小，圖片樣式相對簡單的場景（svg標籤在代碼中進行圖片的繪製，質量相對較高，iconfont這樣的庫就可以很好的使用svg圖）
- jpg多應用於大部分不需要透明圖片的業務場景
- png多應用於大部分需要透明圖片的業務場景
- webp多應用於安卓部分
- svg多應用於圖片樣式相對簡單的業務場景
- css雪碧圖
- 將網站要用的圖片都放在一張圖片上
- 可以減少網站對於圖片的http請求，減少網站的請求數量
- 當雪碧圖比較大時，加載會比較慢
- 一旦雪碧圖加載失敗，那麼網站上所有的圖標都會消失
- svg矢量圖的使用
- svg是html5中一個比較重要的標準
- 可以使用幾行代碼就實現相對複雜的圖標，減少頁面的體積，增加網頁的請求速度
- image inline 將圖片的內容內嵌到html中以減少網站的http請求數量
- image inline會將html文件變大，但是圖片不大的話，基本可以忽略，但是可以減少一次http請求，所有小魚8kb或者4kb的文件，一般是選用image inline將圖片內聯進來，這樣減少網絡請求的時間會大大小魚html文件大小的增加的請求時間
- https://tinypng.com（圖片壓縮網站）
- https://www.spritecow.com（雪碧圖製作網站）
2.facebook和淘寶移動首頁案例分析
淘寶移動端首頁分析
- 淘寶首頁會自動判斷是否當前瀏覽器是否支持webp格式圖片，若是，則使用webp格式的文件，若是ios類型的瀏覽器，不支持webp格式的話，則自動換成jpg格式的文件
- 部分小圖標使用了image inline的方式直接將圖片內嵌到網頁中，減少http的請求數量。
facebook的實例分析
- facebook的網站上使用的css圖標是雪碧圖，但是對雪碧圖也做了一定的處理，將部分具有相同特性的圖標放在一張雪碧圖上，這樣將雪碧圖拆分開，增加了請求數量，但是避免了圖片過大對網絡的壓力