圖片類
圖片壓縮處理
在移動端，通常要保證頁面中一切用到的圖片都是經過壓縮優化處理的，而不是以原圖的形式直接使用的，因為那樣很消耗流量，而且加載時間更長。
使用較小的圖片，合理使用base64內嵌圖片
在頁面使用的背景圖片不多且較小的情況下，可以將圖片轉化成base64編碼嵌入到HTML頁面或CSS文件中，這樣可以減少頁面的HTTP請求數。需要注意的是，要保證圖片較小，一般圖片大小超過2KB就不推薦使用base64嵌入顯示了。
.class-name {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/p+N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC');
}
使用更高壓縮比格式的圖片
使用具有較高壓縮比格式的圖片，如webp等。在同等圖片畫質的情況下，高壓縮比格式的圖片體積更小，能夠更快完成文件傳輸，節省網絡流量。
<img src="http://cdn.domain.com/path/photo.webp" alt="webp格式圖片">
圖片懶加載
為了保證頁面內容的最小化，加速頁面的渲染，盡可能節省移動端網絡流量，頁面中的圖片資源推薦使用懶加載實現，在頁面滾動時動態載入圖片。
<img data-src="http://cdn.domain.com/path/photo.jpg" alt="懶加載圖片">
使用Media Query或srcset根據不同屏幕加載不同大小圖片
在介紹響應式的章節中我們了解到，針對不同的移動端屏幕尺寸和分辨率，輸出不同大小的圖片或背景圖能保證在用戶體驗不降低的前提下節省網絡流量，加快部分機型的圖片加載速度，這在移動端非常值得推薦。
使用iconfont代替圖片圖標
在頁面中盡可能使用iconfont來代替圖片圖標，這樣做的好處有以下幾個：使用iconfont體積較小，而且是矢量圖，因此縮放時不會失真；可以方便地修改圖片大小尺寸和呈現顏色。但是需要注意的是，iconfont引用不同webfont格式時的兼容性寫法，根據經驗推薦盡量按照以下順序書寫，否則不容易兼容到所有的瀏覽器上。
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以內。如果用戶上傳的圖片過大，建議設置告警系統，幫助我們觀察了解整個網站的圖片流量情況，做出進一步的改善。
