示例：
- CSS中，
background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); - HTML中，
<img src=“data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==”/>
Data类型的URI作用：
- 目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。
问题：
-
为什么base64编码图片可以直接在浏览器解析显示？
因为现代浏览器为包括Base64在内各种编码的图像信息提供了很好的支持。所以data: URI的格式能把Base64或其他数据内嵌在image标签的属性或者CSS中。 -
为什么我们平常用的比较少呢？
因为这种方式图像的大小会增加1/3。因此，这种内嵌的方法适合对小的图形元素，比如图标、圆角等进行处理，而从http请求此时，对大的照片、图片（量少而大）则不应该使用Base64编码以免影响下载速度；而且浏览器还不会对图片进行缓存。
优缺点：
- 把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处是浏览器不会缓存这种图像。
目前碰到的：
- data:image/gif;base64,base64编码的gif图片数据
其它还有的：
- 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/png;base64,base64编码的png图片数据
- data:image/jpeg;base64,base64编码的jpeg图片数据
- data:image/x-icon;base64,base64编码的icon图片数据