有一段時間在看相關的技術文章時，發(fā)現(xiàn)文章內(nèi)的圖片不是平常我們?yōu)g覽網(wǎng)站時從服務端請求過來的圖片文件，圖片的地址格式：

　　

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkEAAAH7BAMAAAA5k1YQAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAbUExURczMzMzM/wAAAP7+/pmZzOvr67CwsGtra4+Pj...

　　格式很明顯由四部分組成

　　1.?data

　　應該是文件請求的一種重定向方式，一般我們是通過http(s)來請求資源文件，而data是為了標志請求的資源已經(jīng)通過編碼包裹在URI中，只需要直接解析地址就可以獲取到資源，無需再次請求服務器返回對應的資源。

　　2. 目標的資源類型

目前，Data URI scheme支持的類型有：
data:,文本數(shù)據(jù)
data:text/plain,文本數(shù)據(jù)
data:text/html,HTML代碼
data:text/html;base64,base64編碼的HTML代碼
data:text/css,CSS代碼
data:text/css;base64,base64編碼的CSS代碼
data:text/JavaScript,Javascript代碼
data:text/javascript;base64,base64編碼的Javascript代碼
data:image/gif;base64,base64編碼的gif圖片數(shù)據(jù)
data:image/png;base64,base64編碼的png圖片數(shù)據(jù)
data:image/jpeg;base64,base64編碼的jpeg圖片數(shù)據(jù)
data:image/x-icon;base64,base64編碼的icon圖片數(shù)據(jù)

　　3.?base64：目標資源的編碼方式

　　　

　　4.經(jīng)過base64編碼后的字符串

　　可見如果將圖片經(jīng)過base64編碼后插入到網(wǎng)頁中，會直接增大網(wǎng)頁的大小，好處是減少了服務器的請求數(shù)。

?

　　優(yōu)點：

　　1.?可以將圖片數(shù)據(jù)鑲嵌在網(wǎng)頁中，當用戶請求網(wǎng)頁時即可減少再次請求圖片數(shù)據(jù)的請求數(shù)

　　2. 有一些博客程序上傳圖片后返回的url是圖片的絕對地址，例如Emlog,導致在博客搬家、更換域名后期維護十分不便，需要編寫腳本批量替換圖片的url地址，想過將圖片全部緩存到七牛的空間上，然后統(tǒng)一指向緩存的域名地址，但依舊是治標不治本，如果圖片緩存的域名失效了，還是需要更新圖片地址，唯一的好處是減少了圖片的請求數(shù)和響應的時間，如果將圖片鑲嵌到頁面中，就不需要擔心圖片掛掉了。

　　3. 圖片說刪就刪，因為圖片資源鑲嵌在標簽上，所以說如果直接刪除標簽，圖片也就不再占據(jù)界面的大小，不需要再編寫邏輯刪除服務器上的圖片資源。

　　缺點：

　　1. 本質(zhì)上總的請求大小沒有改變，基于瀏覽器的優(yōu)化機制，只會對遠程的圖片資源進行緩存，但是這種data：的數(shù)據(jù)格式，右鍵圖片屬性并不會直接顯示圖片資源，意味著瀏覽器不會對其緩存，如果圖片過大的話還會損耗服務器的帶寬。

　　2. 圖片管理困難，由于圖片直接鑲嵌在頁面中，并不獨立于服務器上，于是后臺很難統(tǒng)一管理

　　3. 瀏覽器不一定支持。

?

?

拓展學習：通過資料的查閱，發(fā)現(xiàn)有一些博文總結的非常的到位，由淺入深，面面俱到，看來學習道路還很長！

經(jīng)過資料查閱

　　這種技術叫?Data URI Scheme ，是在RFC2397中定義的，目的是將一些小的數(shù)據(jù)，直接嵌入到網(wǎng)頁中，從而不用再從外部文件載入。

參考文章：

http://www.cnblogs.com/fsjohnhuang/p/3903688.html [JS魔法堂：Data URI Scheme介紹]

http://www.cnblogs.com/hustskyking/p/data-uri.html [細說 Data URI]

轉載于:https://www.cnblogs.com/tiancaisq/p/6925224.html

總結

以上是生活随笔為你收集整理的Image转Base64镶嵌网页中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。