示例:
- 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图片数据