圖片類
圖片壓縮處理
在移動(dòng)端争剿，通常要保證頁面中一切用到的圖片都是經(jīng)過壓縮優(yōu)化處理的窟社，而不是以原圖的形式直接使用的，因?yàn)槟菢雍芟牧髁刻刺＃壹虞d時(shí)間更長(zhǎng)松申。
使用較小的圖片，合理使用base64內(nèi)嵌圖片
在頁面使用的背景圖片不多且較小的情況下俯逾，可以將圖片轉(zhuǎn)化成base64編碼嵌入到HTML頁面或CSS文件中贸桶，這樣可以減少頁面的HTTP請(qǐng)求數(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é)省移動(dòng)端網(wǎng)絡(luò)流量，頁面中的圖片資源推薦使用懶加載實(shí)現(xiàn)潘懊，在頁面滾動(dòng)時(shí)動(dòng)態(tài)載入圖片耀盗。
<img data-src="http://cdn.domain.com/path/photo.jpg" alt="懶加載圖片">
使用Media Query或srcset根據(jù)不同屏幕加載不同大小圖片
在介紹響應(yīng)式的章節(jié)中我們了解到，針對(duì)不同的移動(dòng)端屏幕尺寸和分辨率卦尊，輸出不同大小的圖片或背景圖能保證在用戶體驗(yàn)不降低的前提下節(jié)省網(wǎng)絡(luò)流量，加快部分機(jī)型的圖片加載速度舌厨，這在移動(dòng)端非常值得推薦岂却。
使用iconfont代替圖片圖標(biāo)
在頁面中盡可能使用iconfont來代替圖片圖標(biāo)，這樣做的好處有以下幾個(gè)：使用iconfont體積較小，而且是矢量圖躏哩，因此縮放時(shí)不會(huì)失真署浩；可以方便地修改圖片大小尺寸和呈現(xiàn)顏色。但是需要注意的是扫尺，iconfont引用不同webfont格式時(shí)的兼容性寫法筋栋，根據(jù)經(jīng)驗(yàn)推薦盡量按照以下順序書寫，否則不容易兼容到所有的瀏覽器上正驻。
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弊攘，避免大圖片加載時(shí)間長(zhǎng)而阻塞頁面其他資源的下載，因此推薦在10KB以內(nèi)姑曙。如果用戶上傳的圖片過大襟交，建議設(shè)置告警系統(tǒng)，幫助我們觀察了解整個(gè)網(wǎng)站的圖片流量情況伤靠，做出進(jìn)一步的改善捣域。
