圖片類
圖片壓縮處理
在移動端，通常要保證頁面中一切用到的圖片都是經(jīng)過壓縮優(yōu)化處理的，而不是以原圖的形式直接使用的，因為那樣很消耗流量，而且加載時間更長。

使用較小的圖片，合理使用base64內(nèi)嵌圖片
在頁面使用的背景圖片不多且較小的情況下，可以將圖片轉(zhuǎn)化成base64編碼嵌入到HTML頁面或CSS文件中，這樣可以減少頁面的HTTP請求數(shù)。需要注意的是，要保證圖片較小，一般圖片大小超過2KB就不推薦使用base64嵌入顯示了。

.class-name {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/p+N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC');
}

使用更高壓縮比格式的圖片
使用具有較高壓縮比格式的圖片，如webp等。在同等圖片畫質(zhì)的情況下，高壓縮比格式的圖片體積更小，能夠更快完成文件傳輸，節(jié)省網(wǎng)絡(luò)流量。

<img src="http://cdn.domain.com/path/photo.webp" alt="webp格式圖片">

圖片懶加載
為了保證頁面內(nèi)容的最小化，加速頁面的渲染，盡可能節(jié)省移動端網(wǎng)絡(luò)流量，頁面中的圖片資源推薦使用懶加載實現(xiàn)，在頁面滾動時動態(tài)載入圖片。

<img data-src="http://cdn.domain.com/path/photo.jpg" alt="懶加載圖片">

使用Media Query或srcset根據(jù)不同屏幕加載不同大小圖片
在介紹響應(yīng)式的章節(jié)中我們了解到，針對不同的移動端屏幕尺寸和分辨率，輸出不同大小的圖片或背景圖能保證在用戶體驗不降低的前提下節(jié)省網(wǎng)絡(luò)流量，加快部分機型的圖片加載速度，這在移動端非常值得推薦。

使用iconfont代替圖片圖標(biāo)
在頁面中盡可能使用iconfont來代替圖片圖標(biāo)，這樣做的好處有以下幾個：使用iconfont體積較小，而且是矢量圖，因此縮放時不會失真；可以方便地修改圖片大小尺寸和呈現(xiàn)顏色。但是需要注意的是，iconfont引用不同webfont格式時的兼容性寫法，根據(jù)經(jīng)驗推薦盡量按照以下順序書寫，否則不容易兼容到所有的瀏覽器上。

    font-family: iconfont;
    src: url("./iconfont.eot");
    src: url("./iconfont.eot?#iefix") format("eot"),
           url("./iconfont.woff") format("woff"),
           url("./iconfont.ttf") format("truetype");

定義圖片大小限制
加載的單張圖片一般建議不超過30KB，避免大圖片加載時間長而阻塞頁面其他資源的下載，因此推薦在10KB以內(nèi)。如果用戶上傳的圖片過大，建議設(shè)置告警系統(tǒng)，幫助我們觀察了解整個網(wǎng)站的圖片流量情況，做出進(jìn)一步的改善。