前端效能優化 --- 圖片優化
前端效能優化學習筆記二
圖片的區別
jpg：有失真壓縮，壓縮率高，不支援透明
png：支援透明，瀏覽器相容好
- png8 —— 256色 + 支援透明
- png24 —— 2^24色 + 不支援透明
- png32 —— 2^24色 + 支援透明
webp：壓縮程度更好，在ios webview有相容性問題
svg：向量圖，程式碼內嵌，相對較小，圖片樣式相對簡單的場景
CSS雪碧圖
把一個頁面中用到的圖示整合到一張單獨的圖片中以達到減少網站的request請求
Image inline
將更小的圖片轉換為base64內嵌到html當中
向量圖iconfont
使用iconfont中的圖示
圖示解決方案
對於一個專案，我們會選擇一個iconfont圖示庫全域性使用，而某些圖示是向量圖無法實現的，這時候我們根據情況使用base64或者雪碧圖的解決方案
相關文章
- 前端效能優化之路——圖片篇。前端優化
- Web效能優化：圖片優化Web優化
- 效能優化04-圖片優化優化
- Web效能優化之圖片優化Web優化
- web前端優化之圖片優化Web前端優化
- Android效能優化——圖片優化（二）Android優化
- 【前端效能優化】vue效能優化前端優化Vue
- 淺探前端圖片優化前端優化
- iOS效能優化 - 網路圖片載入優化iOS優化
- 【前端優化】js圖片懶載入及優化前端優化JS
- 前端效能優化（JS/CSS優化，SEO優化）前端優化JSCSS
- 前端效能優化前端優化
- 前端效能優化-圖片懶載入（防抖、節流）前端優化
- 圖片優化優化
- 前端效能優化 —— 前端效能分析前端優化
- 「前端」webp圖片適配流量優化前端Web優化
- 前端優化之圖片懶載入前端優化
- 前端效能優化——桌面瀏覽器前端優化策略前端優化瀏覽器
- web前端效能優化Web前端優化
- 前端效能優化指南前端優化
- 前端css效能優化前端CSS優化
- 前端效能優化整理前端優化
- [譯]Web 效能優化： 圖片優化讓網站大小減少 62%Web優化網站
- ListView效能優化非同步載入圖片View優化非同步
- 網站優化之路—圖片優化，圖片從模糊到清晰網站優化
- 前端效能優化JavaScript篇前端優化JavaScript
- 前端效能優化總結前端優化
- 前端效能優化基礎前端優化
- vue + webpack 前端效能優化VueWeb前端優化
- 前端效能優化的點前端優化
- 前端效能優化小結前端優化
- 前端效能優化之WebP前端優化Web
- 前端效能優化術語前端優化
- 前端工程與效能優化前端優化
- 前端效能優化方案索引前端優化索引
- WEB前端優化：使用“漸進”圖片或“交錯”圖片Web前端優化
- 前端效能優化之桌面瀏覽器優化策略前端優化瀏覽器
- 前端效能優化之效能測試前端優化