最新消息:

data:image/jpg;base64,的使用

技术 admin 10328浏览 0评论

在学习过程中遇到一道题,该题中一张图片被base64编码了。我为了查看图片的内容,写了一个程序将其内容解码。结果同学很简单的使用一个img标签就搞定了了,不需要base64解码。现将其方法记录一下,以供以后使用。

使用img标签直接获取base64编码的图片的方法:

<img src="data:image/jpg;base64,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" alt="Base64 encoded image" />

 

其实,上述方式就是Data URL(data:image/jpg;base64,),在前端中主要用于加速网页加载的速度。Data URL是在本地直接绘制图片,不是从服务器加载,所以节省了HTTP连接,起到加速网页的作用。

语法:

data:image/jpg;    声明数据协议及类型名称
base64,               编码形式为base64
/9j/4AAQSkZ……    base64编码结果

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

在网页布局中很多时候都需要转入一些数据如图片,而这样做的就会增加http请求,给服务器带来更大的压力。而当载入小图片(如1KB大小的图片)的时 候,往往会由于请求时带上一些额外的信息进行传输,可能request带的数据比实际图片的数据量还大。所以当请求越多的时候,在网络上传输的数据自然就 多,传输速度自然就慢了。而针对此问题,则可以采用data base64编码的方式直接嵌入网页,而不是从外部载入,以减少http请求,当然有个小缺点就是页面内容变大了。

常见的几种data url如下:

    data:,<文本数据>  
    data:text/plain,<文本数据>  
    data:text/html,<HTML代码>  
    data:text/html;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图片数据

data url图片格式:

<img src="data:image/png;base64...省略N多字符"/>

使用Data url可以加快网页加载速度的原理:

1. 每次请求花费的大部分时间在其他阶段,而不是在下载资源阶段

2. 再小的资源照样会花费很多时间在其他阶段,只是下载阶段会比较短(见上图的第6个资源,才284Byte)。

http连接的分为以下几个阶段:

  1.  域名解析
  2.  开启TCP连接
  3. 发送请求
  4. 等待(主要包括网络延迟和服务器处理时间)
  5. 下载资源

因此在载入图片的时候可以使用data base64编码来减少请求数,以减少请求数,当然它也有一缺点:会使文件变大、可读性变差,因此在酌情考虑使用来提高页面性能。

参考资料:

1、http://my.oschina.net/pandao/blog/117937

2、http://www.banghui.org/1407.html

转载请注明:jinglingshu的博客 » data:image/jpg;base64,的使用

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址