插入图片新方式：data:image

我们在使用标签和给元素添加背景图片时，不一定要使用外部的图片地址，也可以直接把图片数据定义在页面上。对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。
使用data:image的例子
使用普通图片文件的例子
具体的区别可以打开浏览器开发者工具观察页面加载时HTTP请求。

• 如何使用
  • CSS

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

* HTML

* 语法总结

data:[][;charset=][;base64],

* data的一些类型：
    * data:,<文本数据> 
    * data:text/plain,<文本数据> 
    * data:text/html, 
    * data:text/html;base64, 
    * data:text/css, 
    * data:text/css;base64, 
    * data:text/javascript, 
    * data:text/javascript;base64, 
    * 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条件注释

    * CSS Hack

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

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