data:image/png;base64,逗號后面緊跟的是一大串字符串

大家可能注意到了,網(wǎng)頁上有些圖片的src或css背景圖片的url后面跟了一大串字符,比如:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC

base64圖片目的是將一些小的數(shù)據(jù),直接嵌入到網(wǎng)頁中,從而不用再從外部文件載入。比如上面那串字符,其實(shí)是一張小圖片。目前,IE8、Firfox、Chrome、Opera瀏覽器都支持這種小文件嵌入。
把圖片轉(zhuǎn)成base64位圖好處是,節(jié)省了一個(gè)HTTP 請求。壞處是瀏覽器不會緩存這種圖像。
網(wǎng)上有很多免費(fèi)的base64 編碼和解碼的工具,比如 http://www.yzcopen.com/img/imgbase64,拿去用。不謝

使用

CSS中使用:

backgroundimage:url("data:image/png;base64, +這里就是獲取到的base64一大串的字符串+");

HTML中使用:

<img src="data:image/png;base64,+這里就是獲取到的base64一大串的字符串+" />
謝謝你的點(diǎn)贊~
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 網(wǎng)頁上有些圖片的src或css背景圖片的url后面跟了一大串字符,比如: data:image/png;base6...
    戩谷stone閱讀 23,381評論 0 3
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,172評論 1 92
  • 大家可能注意到了,網(wǎng)頁上有些圖片的src或css背景圖片的url后面跟了一大串字符,比如:data:image/p...
    價(jià)值投機(jī)168閱讀 5,746評論 0 2
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對...
    cosWriter閱讀 11,675評論 1 32
  • 前端開發(fā)面試題 面試題目: 根據(jù)你的等級和職位的變化,入門級到專家級,廣度和深度都會有所增加。 題目類型: 理論知...
    怡寶丶閱讀 2,687評論 0 7

友情鏈接更多精彩內(nèi)容