轉載一篇大神的文章

大家可能注意到了，網頁上有些圖片的src或css背景圖片的url后面跟了一大串字符，比如：

data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAeAAD/7gAOQWRvYmUAZMAA= //這是隨便寫的，不要訪問

什么是DATA URI Scheme呢？

其實就是形如data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAOQWRvYmUAZMAA=的資源鏈接，

一般出現在img元素的src屬性。Data URI scheme是在RFC2397中定義的，目的是將一些小的數據，直接嵌入到網頁中，

從而不用再從外部文件載入，減少請求資源的鏈接數。上面的DATA URI Scheme中 base64, 后的字符就是經過base64編碼后的數據，瀏覽器會對其解碼并渲染該圖片資源。

data:①[]②[;charset=]③[;]④,⑤

①. data ：協議名稱；

②. [] ：可選項，數據類型(image/png、text/plain等)

③. [;charset=] ：可選項，源文本的字符集編碼方式

④. [;] ：數據編碼方式(默認US-ASCII，BASE64兩種)

⑤. , ：編碼后的數據

注意：

[a]. ?[][;charset=] 的缺省值為HTTP Header 中Content-Type的字段值；

[b]. [;]?的默認值為US-ASCII，就是每個字符會編碼為%xx的形式；

[c]. [;charset=]?對于IE是無效的，需要通過?設置編碼方式；而Chrome則是?屬性設置編碼無效，要通過?[;charset=]來設置；FF就兩種方式均可。

[d]. 若 ,?不是以?[;]方式編碼后的數據，則會報異常

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圖片數據

base64簡單地說，它把一些 8-bit 數據翻譯成標準 ASCII 字符，網上有很多免費的base64 編碼和解碼的工具，在PHP中可以用函數base64_encode() 進行編碼，如

echo base64_encode(file_get_contents(‘wg.png’));

.目前，IE8、Firfox、Chrome、Opera瀏覽器都支持這種小文件嵌入。

網頁中一張圖片可以這樣顯示：

也可以這樣顯示：

SVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA

/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpb

WUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29y

a3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/

zPvcnAAAAAElFTkSuQmCC" />

優點：

當訪問外部資源很麻煩或受限時

當圖片是在服務器端用程序動態生成，每個訪問用戶顯示的都不同時。

當圖片的體積太小，占用一個HTTP會話不是很值得時。減少資源請求鏈接數。

缺點：不會被瀏覽器緩存起來，這意味著每次訪問這樣頁面時都被下載一次。這是一個使用效率方面的問題——尤其當這個圖片被整個網站大量使用的時候。

Base64編碼的數據體積通常是原數據的體積4/3，也就是Data URL形式的圖片會比二進制格式的圖片體積大1/3。

移動端性能比http URI scheme低。

支持

Opera 7.2+ data URI 必須小于4100字符

IE8+ data URI必須小于32k(IE8不支持js的data URI)

Chrome、FF和Safari無限制

總結

以上是生活随笔為你收集整理的编码 data:text/html;c,关于 Data URI Scheme -- data:image/jpg;base64的全部內容，希望文章能夠幫你解決所遇到的問題。

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