data:image/png…;base64用法

很多新手网站长都在问：data:image/png;base64、data:image/jpg;base64、data:image/gif;base64后面跟一串编码不知道是什么意思？可能我们在一些大型的项目CSS或HTML文档中就会看到类似这样的：src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 图片显示方式，下面IT备忘录小编就给大家介绍下：data:image的用法。

Data URI Scheme data URI scheme 允许我们使用内联（inline-code）的方式在网页中包含数据，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。常用于将图片嵌入网页。

如何使用：data:image

.CSS
 

p {
    background: url(data:image/gif;base64,R0lGOD......jIQA7)
    no-repeat left center;
    padding: 5px 0 5px 25px;
}

或
 

p {
    background: url(fakepath/image.gif)
    no-repeat left center;
    padding: 5px 0 5px 25px;
}

HTML
 

<img src="data:image/jpeg;base64,/9j/4Q......vxvitd6SF//2Q==" />

或
 

<img src="fakepath/image.gif" />

语法：
 

data:[<mime type>][;charset=<charset>][;base64],<encoded data>
data的一些类型：
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图片数据

好处：
减少HTTP请求
浏览器兼容性：
IE7及以下不支持。有如下解决方案：
使用IE条件注释

 <!--[if lt IE 8]>
    ...... IE7及以下内容 ......
<![endif]-->

* CSS Hack
*background-image:url(sprite.png); /* Only IEv6 & 7 see this */

你还应该知道的：
转化之后的图片代码通常比图片本身要大。
IE8支持的最大内嵌图片代码为32768个字节
以data形式插入图片不是万能的，很多情况下，插入一张图片反而易于修改和维护。

相关内容标签