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

先来看下下边这段代码：

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,