大家可能注意到了,網(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一大串的字符串+" />