DataURL | 吕神的自我修养

利用Data URL(data:image/jpg;base64,)加速网页加载的方法

2014.12.23

利用Data URL(data:image/jpg;base64,)base64形式存储图片,将小图片生成数据流形式

先来看下下边这段代码：

其实“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 
//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)));
?>

<img src="<?php echo $base64_image_content;?>" />

需要注意：本方法适合于小图片，大图片就不要考虑了，另外IE8以下浏览器不支持这种方法。
用这种方法会加重客户端的CPU和内存负担，总之有利有弊。
IE8 之前的浏览器不支持 Data URL

在线生成工具：
http://www.greywyvern.com/code/php/binary2base64
http://www.kawa.net/works/js/data-scheme/base64-e.html

简单的说，data类型的Url大致有下面几种形式。

data:,<文本数据>
data:text/plain,<文本数据>
data:text/html,<HTML代码>
data:text/html;base64,<base64编码的HTML代码>
data:text/plain;charset=UTF-8;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图片数据>

php读取和保存base64编码的图片内容

2014.12.23

<?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)));



//保存base64字符串为图片 
//匹配出图片的格式 
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){ 
	$type = $result[2]; 
	$new_file = "./test.{$type}"; 
	if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){ 
		echo '新文件保存成功：', $new_file ,'<br/>'; 
	}
}
?>


<img src="<?php echo $base64_image_content;?>" />
<br/>
<textarea style="width:80%; min-height:300px;"><?php echo $base64_image_content;?></textarea>