前端性能優化
圖片優化
先來看一張JPG圖片有損壓縮的決議程序
png8/png24/png32之間的區別
png8 —— 256色 + 支持透明
png24 —— 2^24色 + 不支持透明
png32 —— 2^24色 + 支持透明
每種圖片格式都有自己的特點，針對不同的業務場景選擇不同的圖片格式很重要
-
jpg有損壓縮，壓縮率高，不支持透明
-
png支持透明，瀏覽器兼容好
-
webp壓縮程度更好，在ios webview有兼容性問題
-
svg矢量圖，代碼內嵌，相對較小，圖片樣式相對簡單的場景
-
jpg —— 大部分不需要透明圖片的業務場景
-
png —— 大部分需要透明圖片的業務場景
-
webp —— 安卓全部
-
svg矢量圖 —— 圖片樣式相對簡單的業務場景
進行圖片壓縮：針對圖片真實情況，舍棄一些相對無關緊要的色彩資訊
css雪碧圖（精靈圖）：把你的網站用到的一些圖片整合到一張單獨的圖片中以達到減少網站的http請求數量
image inline：將圖片的內容內嵌到html當中以減少http請求數量
使用矢量圖： 使用SVG進行適量圖的繪制，使用iconfont解決icon問題
在安卓下使用webp： WebP 的優勢體現在它具有更優的影像資料壓縮演算法，能帶來更小的圖片體積，而且擁有肉眼識別無差異的影像質量；同時具備了無損和有損的壓縮模式、Alpha 透明以及影片的特性，在 JPEG 和 PNG 上的轉化效果都非常優秀、穩定和統一
圖片壓縮
雪碧圖網站
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/89988.html
標籤：其他