圖片過大時前端如何優化載入
阿新 • • 發佈:2018-11-02
一、 採用不減解析度的壓縮方式進行壓縮
用PS開啟圖片,點選點選“檔案”——“儲存為Web所用格式”
將圖片儲存為Web所用格式,點選“儲存”。
或者尋找第三方壓縮方式https://tinypng.com/
二、將圖片改為jpeg漸進式圖片
上圖是標準型jpg格式的載入方式
上圖是漸進式jpeg格式的載入方式。如果你希望將草圖先呈現出來然後慢慢進一步清晰,可以採用這種形式。
想要將轉化成漸進型jpeg格式,需要使用phtoshop
1、首先開啟一個圖片,選擇“檔案 -> 儲存為”,選擇“JPEG”格式,點選“儲存”按鈕。在“JPEG選項”介面的“格式選項”中選擇“連續”,然後在“掃描”選項中設定為“5”
2、開啟一張圖片,選擇“檔案 -> 儲存為Web和裝置所用格式”,在彈出的介面右上角選擇“JPEG”格式,勾選“連續”,點選“儲存”按鈕即可。
三、懶載入
當我們開啟一個頁面時,瀏覽器就會從上往下讀取頁面中的<img>標籤src中的地址,並且開啟執行緒來進行載入。
倘若使用者的網速不給力或者此頁面中的圖片太多時,就會發生每張圖片都載入了一點但是都沒有載入完成,導致最後沒有一個圖片能正常顯示。一方面讓使用者的體驗非常之差,試問誰會一直耐心的等待著頁面的載入?另一方面,載入每個圖片都要向伺服器傳送請求,這會增大伺服器的壓力。
針對這種情況,就需要運用懶載入技術
四、用圖片進行操作
如果是一個gif圖片,那麼可以利用一張大圖,通過位置的移動,通過肉眼的視覺殘留弄成一個gif圖
連結:https://blog.csdn.net/qq_34633111/article/details/82985827
如果是需要很多icon,那麼可以直接放一張有很多icon的大圖片,利用位置移動選擇不同的icon