轉(zhuǎn)載一篇大神的文章

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

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

什么是DATA URI Scheme呢？

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

一般出現(xiàn)在img元素的src屬性。Data URI scheme是在RFC2397中定義的，目的是將一些小的數(shù)據(jù)，直接嵌入到網(wǎng)頁中，

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

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

①. data ：協(xié)議名稱；

②. [] ：可選項(xiàng)，數(shù)據(jù)類型(image/png、text/plain等)

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

④. [;] ：數(shù)據(jù)編碼方式(默認(rèn)US-ASCII，BASE64兩種)

⑤. , ：編碼后的數(shù)據(jù)

注意：

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

[b]. [;]?的默認(rèn)值為US-ASCII，就是每個(gè)字符會(huì)編碼為%xx的形式；

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

[d]. 若 ,?不是以?[;]方式編碼后的數(shù)據(jù)，則會(huì)報(bào)異常

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ù)

base64簡(jiǎn)單地說，它把一些 8-bit 數(shù)據(jù)翻譯成標(biāo)準(zhǔn) ASCII 字符，網(wǎng)上有很多免費(fèi)的base64 編碼和解碼的工具，在PHP中可以用函數(shù)base64_encode() 進(jìn)行編碼，如

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

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

網(wǎng)頁中一張圖片可以這樣顯示：

也可以這樣顯示：

SVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA

/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpb

WUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29y

a3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/

zPvcnAAAAAElFTkSuQmCC" />

優(yōu)點(diǎn)：

當(dāng)訪問外部資源很麻煩或受限時(shí)

當(dāng)圖片是在服務(wù)器端用程序動(dòng)態(tài)生成，每個(gè)訪問用戶顯示的都不同時(shí)。

當(dāng)圖片的體積太小，占用一個(gè)HTTP會(huì)話不是很值得時(shí)。減少資源請(qǐng)求鏈接數(shù)。

缺點(diǎn)：不會(huì)被瀏覽器緩存起來，這意味著每次訪問這樣頁面時(shí)都被下載一次。這是一個(gè)使用效率方面的問題——尤其當(dāng)這個(gè)圖片被整個(gè)網(wǎng)站大量使用的時(shí)候。

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

移動(dòng)端性能比http URI scheme低。

支持

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

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

Chrome、FF和Safari無限制

總結(jié)

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

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