前端性能優化成神之路—圖片相關的優化

時間 2019-11-17

標籤前端性能優化之路圖片相關欄目系統性能简体版

原文原文鏈接

圖片PNG8/PNG24/PNG32之間的區別css

PNG8——256色 + 支持透明html

PNG24——2^24色 + 不支持透明ios

PNG32——2^24色 + 支持透明web

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

jpg有損壓縮，壓縮率高，不支持透明，大部分不須要透明圖片的業務場景svg

png支持透明，瀏覽器兼容好，大部分須要透明圖片的業務場景字體

webp壓縮程度更好，在ios webview有兼容性問題，安卓所有網站

svg矢量圖，代碼內嵌，相對較小，圖片樣式相對簡單的場景，好比一些字體圖標等spa

圖片壓縮的幾種方法htm

css雪碧圖：把網站上用到的一些圖片整合到一張單獨的圖片中，能夠減小網站的HTTP請求數量，缺點是整合的圖片比較大的時候加載比較慢，若是這張圖片沒加載出來的時候，裏面全部須要的圖片都會顯示不出來

Image inline：將圖片的內容內嵌到html中，能夠減小網站的HTTP請求數量

webp

相關標籤/搜索