點擊上方藍字關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

這裡談一下移動頁面開發時，幾個圖片優化的點。

一、base64編碼圖片替換URL圖片

能不發請求的就不要發，對於一些小圖標（一般是8K以下的圖標都轉換成base64）之類的，可以將圖片用base64，來減少請求的發送，尤其是在移動端，請求顯得特別珍貴，在網速不好的情況下，請求就是珍貴中的珍貴。

二、圖片壓縮

對於整個網站來說，圖片是最占流量的資源之一，能不使用就不使用，圖標可以使用base64編碼，字體圖標代替，SVG等來代替，使用就要選擇最合適的格式，合適的尺寸，然後壓縮（這裡推薦騰訊推出的智圖）。

PS：過度壓縮圖片大小，圖片會失幀，可以會使得圖片變得模糊，影響圖片顯示效果，一般來說，品質在60左右就差不多了！

三、圖片懶載入

首屏載入的快慢，直接影響用戶的體驗，建議將非首屏的圖片資源放到用戶需要用時才載入。這樣可以大大優化首屏載入，減少首屏載所需要的時間！

PS：懶載入需要使用JS頻繁操作DOM，期間會導致大量重繪渲染，影響性能。

四、img還是background

圖片的展示方式有兩種，一種是以圖片標籤顯示，一種是以背景圖片顯示！接下來簡略看一下這兩者的區別。

img：html中的標籤img是網頁結構的一部分，會在載入結構的過程中和其他標籤一起載入。

background：以CSS背景圖存在的圖片background會等到結構載入完成（網頁的內容全部顯示以後）才開始載入。

也就是說，網頁會先載入標籤img的內容，再載入背景圖片background引用的圖片。引入一張圖片，那麼在這個圖片載入完成之前，img後的內容不會顯示。而用background來引入同樣的圖片，網頁結構和內容載入完成之後，才開始載入背景圖片，網頁內容能正常瀏覽，但是看不到背景圖片。至於這兩種，大家按照習慣，需求等權重因素選擇！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！