會不會有這樣一種感覺？IT技術開發知識面很廣也很深，總會有你不懂得問題出現。一個接着一個新的問題，一個接着一個新的挑戰。
今天，解讀【內聯圖片】，什么是內聯圖片，使用內聯圖片的優缺點是什么？這個問題是我面試一家新創業的公司所提問的，而且他說這個問題所包含很多工程師基礎知識考察問題，解讀完，就是你基礎弱爆了。。。不斷地面試，不斷地重新審視自己，不斷地跌倒爬起。我想這才是成長的意義。
內聯圖片是什么？
以往我們加載圖片，會這么寫：<img src="../a.jpg"> 或者 以css中的background-img：url("../a.png")，
那么內聯圖片則是這么寫的<imgsrc="data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGADCAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA" />
<img src="data:image/png;base64,iVBOR....>data - 取得數據的協定名稱
image/png - 數據類型名稱
base64 - 數據的編碼方法
iUANR.... - 編碼后的數據
: , ; - data URI scheme 指定的分隔符號
為什么要使用內聯圖片？使用內聯圖片的優點。
減少http請求，已達到優化客戶端加載速度，這個是我們至今不斷在做的事情。bingo！使用內聯圖片，不外乎就是優化作業的產物了！
至於優點嘛~
1、減少http請求次數
2、做為背景平鋪類的圖片使用內聯圖片的話，減少http請求次數，並且不會影響加載速度
使用內聯圖片的缺點
1、瀏覽器不會緩存內聯圖片資源
2、兼容性較差，只支持ie8以上瀏覽器
3、超過1000kb的圖片，base64編碼會使圖片大小增大，導致網頁整體下載速度減慢