性能優化-圖片優化

前端性能優化

圖片優化

先來看一張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 上的轉化效果都很是優秀、穩定和統一

圖片壓縮
雪碧圖網站