当我们需要减少访问网页产生的请求数时,Data URIs技术理应成为备选之举。
通常,我们在网页中插入图像时,代码是这样写的:
<img src="http://example.org/myimage.png" />
当你使用Data URI技术时,相应的代码也会发生改变:
<img src="data:image/png;base64,iVBOR...rkJggg==" />
不难发现img标签的src属性由data、image/png和base64三部分组成。data表示使用data协议,而不是http协议;image/png表示图片类型为png;base64表示图像由base64算法编码(能且仅能使用base64算法编码,因为浏览器们对这种编码方式提供了良好的支持)。对图片进行base64编码并不困难,许多语言自带了一些编码函数,比如PHP中的base64_encode函数(使用示例如下)。
base64_encode(file_get_contents('myimage.png'));
这项技术也能在CSS中使用,范例如下:
.myclass {
background-image: url("data:image/png;base64,iVBOR...rkJggg==");
}
事物总是两面的,Data URIs能减少请求、减少小文件所消耗的带宽(不用再额外发送http头);但是,我们也不能忽略Data URIs可能造成的缓存问题和编码时资源消耗的问题。
更多信息可以参见RFC 2397