微信号:w3ctrain

介绍:w3ctrain官方公众号,定期推送前端资讯.

使用data URIs

2015-08-05 23:04 Helkyle

你可能不知道,其实在页面中加载图片或背景图不一定要加载额外的文件,你可以使用data URIs的方式,把图片写到文件里面。

使用CSS,你可以这样:

li {
  background:
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;}

在HTML中,你这样写。

<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />



基本格式就是一大串以data:开头的莫名其妙字符串。然而就这样,你的图片就能显示在压面上。

为什么这么干?

很大的作用就是减少HTTP请求的次数。除了文档大小,这是加载页面的第一考虑要素。请求次数越少,速度越快。

怎么得到data URIs

使用在线工具,当然这种工具网上很多。

浏览器兼容性

Data URIs在IE5-7不起作用,IE8起开始支持。

重要提醒

  • 编码后的代码比原本图片要大。

  • IE8限制data URIs最大只能32768字节。

  • 使用dataURIs维护起来比较麻烦,没有字节替换图片方便。

  • 如果你使用PHP,你可以简单生成dataURIs(php世界上最好的编程语言,呵呵)

    <?php
      echo base64_encode(file_get_contents("../images/folder16.gif"))
    ?>

  • 如果缓存很好的话,那么如果你的CSS文件的大小达到300k会比50k而多请求6次更优。当然这是在css文件跟图片的缓存期一样的情况下。你可以修改css文件的缓存


阅读原文,查看更多。


 
w3ctrain 更多文章 使用JavaScript修改伪类样式的方法总结 IT圈装逼速成指南 轮播无缝循环思路 综合指南:何时使用 Em 与 Rem 12个鲜为人知的CSS技能(上)
猜您喜欢 java模拟器怎么用 11月阅读量最高的9篇运维文档 | 运维自媒体联盟 专访王海亚:淘宝交易系统演进之路 程序员如何才能活得更加明白 数据类型与数据结构