圖片類(lèi)
圖片壓縮處理
在移動(dòng)端唠倦，通常要保證頁(yè)面中一切用到的圖片都是經(jīng)過(guò)壓縮優(yōu)化處理的菜枷，而不是以原圖的形式直接使用的苍糠，因?yàn)槟菢雍芟牧髁浚壹虞d時(shí)間更長(zhǎng)啤誊。
使用較小的圖片岳瞭，合理使用base64內(nèi)嵌圖片
在頁(yè)面使用的背景圖片不多且較小的情況下，可以將圖片轉(zhuǎn)化成base64編碼嵌入到HTML頁(yè)面或CSS文件中蚊锹，這樣可以減少頁(yè)面的HTTP請(qǐng)求數(shù)瞳筏。需要注意的是，要保證圖片較小牡昆，一般圖片大小超過(guò)2KB就不推薦使用base64嵌入顯示了姚炕。
.class-name {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/p+N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC');
}
使用更高壓縮比格式的圖片
使用具有較高壓縮比格式的圖片，如webp等丢烘。在同等圖片畫(huà)質(zhì)的情況下柱宦，高壓縮比格式的圖片體積更小，能夠更快完成文件傳輸播瞳，節(jié)省網(wǎng)絡(luò)流量掸刊。
<img src="http://cdn.domain.com/path/photo.webp" alt="webp格式圖片">
圖片懶加載
為了保證頁(yè)面內(nèi)容的最小化，加速頁(yè)面的渲染赢乓，盡可能節(jié)省移動(dòng)端網(wǎng)絡(luò)流量忧侧，頁(yè)面中的圖片資源推薦使用懶加載實(shí)現(xiàn)，在頁(yè)面滾動(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)端屏幕尺寸和分辨率，輸出不同大小的圖片或背景圖能保證在用戶(hù)體驗(yàn)不降低的前提下節(jié)省網(wǎng)絡(luò)流量躺屁，加快部分機(jī)型的圖片加載速度肯夏，這在移動(dòng)端非常值得推薦。
使用iconfont代替圖片圖標(biāo)
在頁(yè)面中盡可能使用iconfont來(lái)代替圖片圖標(biāo)，這樣做的好處有以下幾個(gè)：使用iconfont體積較小熄捍，而且是矢量圖烛恤，因此縮放時(shí)不會(huì)失真；可以方便地修改圖片大小尺寸和呈現(xiàn)顏色余耽。但是需要注意的是缚柏，iconfont引用不同webfont格式時(shí)的兼容性寫(xiě)法，根據(jù)經(jīng)驗(yàn)推薦盡量按照以下順序書(shū)寫(xiě)碟贾，否則不容易兼容到所有的瀏覽器上币喧。
font-family: iconfont;
src: url("./iconfont.eot");
src: url("./iconfont.eot?#iefix") format("eot"),
url("./iconfont.woff") format("woff"),
url("./iconfont.ttf") format("truetype");
定義圖片大小限制
加載的單張圖片一般建議不超過(guò)30KB，避免大圖片加載時(shí)間長(zhǎng)而阻塞頁(yè)面其他資源的下載袱耽，因此推薦在10KB以?xún)?nèi)杀餐。如果用戶(hù)上傳的圖片過(guò)大，建議設(shè)置告警系統(tǒng)朱巨，幫助我們觀察了解整個(gè)網(wǎng)站的圖片流量情況史翘，做出進(jìn)一步的改善。
