將圖片轉(zhuǎn)換為base64編碼最常見的應(yīng)用應(yīng)該就是在將網(wǎng)頁中的一些圖片轉(zhuǎn)換為base64編碼可以實(shí)現(xiàn)網(wǎng)頁圖片在網(wǎng)速不好的時(shí)候先于內(nèi)容加載和減少HTTP的請(qǐng)求次數(shù)來減少網(wǎng)站服務(wù)器的負(fù)擔(dān)家肯。
1.主要：減少了HTTP請(qǐng)求 ? ? ?
我們都知道锡宋，我們的網(wǎng)站采用的都是HTTP協(xié)議，而HTTP協(xié)議是一種無狀態(tài)的鏈接碍现，就是連接和傳輸后都會(huì)斷開連接節(jié)省資源悠砚。此時(shí)解決的方法就是盡量的減少HTTP請(qǐng)求晓勇，此時(shí)base64編碼可以將圖片添加到css中，實(shí)現(xiàn)請(qǐng)求css即可下載下來圖片灌旧，減少了在此請(qǐng)求圖片的請(qǐng)求绑咱。當(dāng)然減少HTTP請(qǐng)求次數(shù)的方法還有很多，如css sprite技術(shù)枢泰，將網(wǎng)頁中的小圖片拼在一張大圖片中描融，下載時(shí)只需要一次完整的HTTP請(qǐng)求就可以，減少了請(qǐng)求次數(shù)衡蚂。
2窿克、提前加載圖片的應(yīng)用
這個(gè)大家可以去看一下天貓主頁的css代碼，大家可能沒注意到毛甲，在我們使用網(wǎng)速不好時(shí)候的網(wǎng)絡(luò)去訪問天貓的時(shí)候年叮，在頁面沒有完全加載出來的時(shí)候就會(huì)出現(xiàn)一個(gè)“小貓”的等待圖標(biāo)，增加了用戶體驗(yàn)玻募。其實(shí)現(xiàn)的原理就是將那張圖片使用base64編碼放到css中只损，因?yàn)槲覀兌贾溃琧ss是在html頭部引用的，要優(yōu)先于下面的內(nèi)容被加載跃惫，所以在網(wǎng)速不好的時(shí)候就會(huì)出現(xiàn)這種效果叮叹。
