頁面加載性能之選擇正確的圖片格式

首先要問一個問題，加載這一張圖片是否是達到了你追求的效果？好的設計每每是追求簡單，保持最好的性能。對於一個要加載不少資源的頁面來講，若是能去掉一個圖片資源，對性能的提高是很直觀的。固然，有的圖片賽過千言萬語，是否使用圖片仍是取決於你本身。

而後你要考慮的是，現有的技術是否是能夠用更高效的方式知足你的要求。

• CSS效果（如陰影、漸變），以及CSS動畫，是否能夠創造出你想要的效果，用以取代圖片。優勢是：放大無損，體積小。
• 自定義字體 可讓你使用一些很漂亮的字體，同時還能支持選中、搜索、改變字體大小，可用性更高。

若是你發現你的圖片內包含文本，請好好考慮下用戶體驗，不能搜索，不能選中，也不能放大，對於高分屏，更是難兼容。自定義字體能夠很好地幫你解決這類問題。

選擇正確的圖片格式

若是圖片確實是必須的，你要好好考慮用何種格式的圖片。

左圖是矢量圖，右圖是光柵圖。

• 矢量圖 用線條、點、多邊形繪製的圖形
• 光柵圖 用一個個像素點拼接起來的圖片

每種格式的圖片都有其特色。矢量圖通常用於簡單的幾何圖形，如logo、文本和圖標，優點是高清、縮放無損、體積小。

當圖片的形狀趨於複雜，如照片，你用大量的svg標籤堆砌出來，看上去也不真實，矢量圖的侷限性就在這。這時能夠考慮一下光柵圖，如png、jpg或者webp。

光柵圖的缺點也很明顯：縮放模糊、體積過大、針對不一樣分辨率須要提供不一樣的尺寸。

什麼是高分屏？

像素點分爲兩類：CSS像素和設備像素。一個CSS像素通常對應一個設備像素，也可能對應多個像素。設備像素越多，看上去更細膩，給用戶的感受是不同的。

高DPI屏幕雖然展現的更好，但卻須要提供的圖片尺寸也更大。在這點上，矢量圖佔優，但矢量圖的製做成本也相對較高。

因爲光柵圖是基於像素的，也意味着圖片尺寸越大，文件大小越大，以下表：

屏幕分辨率	像素點個數	未壓縮的文件大小
1x	100 * 100 = 10000	40000
2x	100 100 4 = 40000	160000
3x	100 100 9 = 90000	360000

這不是直線增加，而是平方的增加。

有如下兩種方式能夠優化：

• 儘量使用矢量圖，只要能作到的狀況
• 若是實在是須要使用光柵圖，則使用響應式的圖片（待後續文章），針對不一樣分辨率應用不一樣尺寸

不一樣類型的光柵圖的特色

格式	透明度	動畫	瀏覽器支持
PNG	是	否	全部
JPEG	否	否	全部
WebP	是	是	全部現代瀏覽器

png和jpeg是兩個比較傳統的圖片格式，應用普遍，現代瀏覽器有一種新的格式webp，擁有更高的壓縮比，提供了更豐富的支持。

後續會單獨一篇文章來說述webp的實際應用。

在使用老的圖片格式的時候，有如下幾點要考慮：

1. 是否須要動畫？用 video 標籤替。

   • 爲何不用 gif ？gif 只有最高256位色，實現一樣的動畫，比video要大得多。

2. 是否想在高分屏上保留細節？使用 png。

   • png 不支持任何有損壓縮，能保持最高質量，但一樣的體積會更大，視狀況而用。
   • 若是圖片是一系列多邊形的組合，考慮用 svg 。
   • 若是圖片上包含文本，考慮使用自定義字體。

3. 若是你展現的是照片、截圖或者相似的圖片？使用 jpeg 。

   • jpeg 能夠組合使用有損和無損壓縮來減小文件大小，能夠嘗試不一樣的質量壓縮來選擇一個最小又最合適的。

總結

若是你是在webview中使用圖片，儘量的選擇webp。Facebook以及其餘大廠在app和服務器之間的圖片傳輸上，都會選擇webp，能夠節省很大一筆開銷，存儲成本和帶寬成本。

參考

https://web.dev/choose-the-ri...