有一段時間在看相關的技術文章時，發現文章內的圖片不是平常我們瀏覽網站時從服務端請求過來的圖片文件，圖片的地址格式：

　　

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

　　格式很明顯由四部分組成

　　1.?data

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

　　2. 目標的資源類型

目前，Data URI scheme支持的類型有：
data:,文本數據
data:text/plain,文本數據
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圖片數據
data:image/png;base64,base64編碼的png圖片數據
data:image/jpeg;base64,base64編碼的jpeg圖片數據
data:image/x-icon;base64,base64編碼的icon圖片數據

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

　　　

　　4.經過base64編碼后的字符串

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

?

　　優點：

　　1.?可以將圖片數據鑲嵌在網頁中，當用戶請求網頁時即可減少再次請求圖片數據的請求數

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

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

　　缺點：

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

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

　　3. 瀏覽器不一定支持。

?

?

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

經過資料查閱

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

參考文章：

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镶嵌网页中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。