先來看下下邊這段代碼:
JQAlAAACi5SPqcvtDyGYIFpF690i8xUw3qJBwUlSadmcLqYmGQu6KDIeM13beGzYWWy3DlB4IYaM
k+Dso2RWkFCfLPcRvFbZxFLUDTt21BW56TyjRep1e20+i+eYMR145W2eefj+6VFmgTQi+ECVY8iG
xcg35phGo/iDFwlTyXWphwlm1imGRdcnuqhHeop6UAAAIfkEBQoAAgAsEAACAAQACwAAAgWMj6nL
XAAh+QQFCgACACwVAAUACgALAAACFZQvgRi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwXABEA
DAADAAACBYyPqcsFACH5BAUKAAIALBUAFQAKAAsAAAITlGKZwWoMHYxqtmplxlNT7ixGAQAh+QQF
CgACACwQABgABAALAAACBYyPqctcACH5BAUKAAIALAUAFQAKAAsAAAIVlC+BGL3Z3IlxUmUuhtR2
LzHhsiEFACH5BAUKAAIALAEAEQAMAAMAAAIFjI+pywUAIfkEBQoAAgAsBQAFAAoACwAAAhOUYJnA
agwdjGq2amXGU1PuLEYBACH5BAUKAAIALBAAAgAEAAsAAAIFhI+py1wAIfkEBQoAAgAsFQAFAAoA
CwAAAhWUL4AIvdnciXFSZS6G1HYvMeGyIQUAIfkEBQoAAgAsFwARAAwAAwAAAgWEj6nLBQAh+QQF
CgACACwVABUACgALAAACE5RgmcBqDB2MarZqZcZTU+4sRgEAIfkEBQoAAgAsEAAYAAQACwAAAgWE
j6nLXAAh+QQFCgACACwFABUACgALAAACFZQvgAi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwB
ABEADAADAAACBYSPqcsFADs=
“>
其實“data:image/gif;base64,R0lGODlhJ……” 就是一張圖檔的Data URL,就是利用base64編碼把圖檔資料翻譯成标準ASCII字元。
等同于:
顯示結果:
Data URL它現将圖檔轉換成base64編碼,以文本的形象随着檔案加載。
再由浏覽器在本地直接繪制圖檔,不是從伺服器加載,是以節省了HTTP連接配接,起到加速網頁的作用。
文法:
data:image/jpg; 聲明資料協定及類型名稱
base64, 編碼形式為base64
/9j/4AAQSkZ…… base64編碼結果
最後附上Data URL的生成方法(PHP):
//php讀取和儲存base64編碼的圖檔内容
header('Content-type:text/html;charset=utf-8');
//讀取圖檔檔案,轉換成base64編碼格式
//$image_file = './loading.gif';
$image_file = 'http://www.lrxin.com/images/loading.gif';
$image_info = getimagesize($image_file);
$base64_image_content = "data:{$image_info['mime']};base64," . chunk_split(base64_encode(file_get_contents($image_file)));
?>
需要注意:本方法适合于小圖檔,大圖檔就不要考慮了,另外IE8以下浏覽器不支援這種方法。
用這種方法會加重用戶端的CPU和記憶體負擔,總之有利有弊。
IE8 之前的浏覽器不支援 Data URL
簡單的說,data類型的Url大緻有下面幾種形式。
data:,
data:text/plain,
data:text/html,
data:text/html;base64,
data:text/plain;charset=UTF-8;base64,
data:text/css,
data:text/css;base64,
data:text/javascript,
data:text/javascript;base64,
data:image/gif;base64,
data:image/png;base64,
data:image/jpeg;base64,
data:image/x-icon;base64,