Data URIs

    当我们需要减少访问网页产生的请求数时,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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值