總結css以內聯圖片的優缺點

　　會不會有這樣一種感受？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！使用內聯圖片，不外乎就是優化做業的產物了！

　　至於優勢嘛~

　　一、減小http請求次數

　　二、作爲背景平鋪類的圖片使用內聯圖片的話，減小http請求次數，而且不會影響加載速度

　　使用內聯圖片的缺點

　　一、瀏覽器不會緩存內聯圖片資源

　　二、兼容性較差，只支持ie8以上瀏覽器

　　三、超過1000kb的圖片，base64編碼會使圖片大小增大，致使網頁總體下載速度減慢