頁面加載性能之圖片內容

圖片佔了網站大概60%-85%的一個帶寬，本文檔主要解決圖片加載的耗時問題。

移除沒必要要的圖片

首先要考慮的是，若是沒有這個圖片，是否會影響用戶體驗？若是不影響，放後續加載。

若是圖片既不是爲了陪襯文本，也不是爲了給用戶帶來視覺上的體驗，對用戶而言並不是有意義的信息，則移除。

最快的圖片加載，就是不去加載它。

選擇更優的圖片類型

PNG用來展現有透明度的圖片。

JPG用來展現通常的圖片。

GIP用來展現動畫圖片。

通常選擇更小的JPG。

移出圖片摘要信息（Metadata）

通常手機或者數碼相機拍攝的圖片，都會攜帶一些摘要信息，好比什麼時候何地？用什麼設備？曝光度如何？

這些信息有時候佔據了10%的體積。

能夠用如下工具對其進行移除：

http://www.verexif.com/en/

調整圖片大小

基於使用調整

實際上用到的可能只有200 200，這時就不須要去加載一個1000 1000的圖片。

只有在真正須要的時候，去加載對應尺寸的圖片。

縮略圖就該加載縮略圖，而非原圖。

裁剪圖片，展現重點內容

對一張圖片來講，有重點和非重點的劃分，重點是你想讓用戶看的區域，針對這部分區域能夠裁剪出來。

下降圖片質量

一張圖片原始大小是227k，此時若是將質量下降至80%，只剩60k的大小。

針對不須要高分辨率的圖片，能夠適當下降圖片質量，來減小圖片體積，就好像你不會放大一我的的照片，來看他的毛孔粗細

相關工具：

• paint.net
• XNConvert
• ImageOptim
• ResizeIt
• PicResize
• Gimp

壓縮圖片

保持質量不變的狀況下，用技術手段作圖片壓縮，經常使用網站：

https://tinypng.com/

總結

圖片內容是主要優化空間，不只容易實施，並且對網站的加載速度有顯著提高。

參考

https://developers.google.com...