src属性之data地址类型(data:image/jpeg)

1、先上例子，如下2个图片，在浏览器中按F12控制台查看2个图片元素的src，注意src内容:

是不是发现2种不同的写法生成了同样的图片。接下来说说使用data数据流的方式：
src的data可以让我们直接在网页上绘制图像，将图片生成数据流形式。Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，Base64编码可用于在HTTP环境下传递较长的标识信息。
 
2、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图片数据

 
3、Data语法：

• data:image/jpg; 声明数据协议及类型名称
• base64, 编码形式为base64
• ****** base64编码数据流

4、使用data优劣势：
1）data优势：减少HTTP请求
2）data劣势：

1）转化之后的图片代码通常比图片本身要大。
2）IE8支持的最大内嵌图片代码为32768个字节
3）以data形式插入图片不易于修改和维护。

 
5、举例生成Data URL的方式
可能你会问 data数据流我们如何生成，其实我们的编程语言可以直接转换图片为此格式的，例如：
1）php生成Data URL的方式：
点击访问http://zouyang1230.com/project/to64/to64.php返回笑脸的base64编码

$img_file = file_get_contents("./smile.jpg"); 
echo base64_encode($img_file);

2）html5方式：
点击访问网页版转换
github地址
 
PS：
用时注意权衡性能利弊。