JobbyM's Blog

一日一练-CSS 了解Data URIs

发表于 | 分类于 | | 阅读次数

子曰：一日一练-CSS 了解Data URIs

关于本文：
原文：https://css-tricks.com/data-uris/
作者：@CHRIS COYIER

你是否知道在HTML 中使用<img> 元素或在CSS 中声明background-image 时不必链接外部图像文件？ 你可以使用 data URIs 将图像数据直接嵌入到文档中。

在CSS，它像这样使用：

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

在HTML 中，它像这样使用：

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

具体的格式：

1
data:[<mime type>][;charset=<charset>][;base64],<encoded data>

基本上，超长串的乱码字符。当然，这对浏览器来说并不是乱码。此数据被解释为你所说的文件类型。

你可以在这里看到一个非常愚蠢的演示页面。接下来我将介绍重要的部分。

你为什么要这样做？（Why would you do this?）

最大的原因是：它节省了HTTP 请求。除了纯粹的文档大小之外，这是关于页面加载速度的第一个因素。少=更好（Less = better）。

你如何获得代码？（How do you get the code?）

使用此在线转换工具。这是我找到的最好的一个。还有一个可拖放。

另请注意，base64 不是data URI 的唯一可能格式，有时甚至不是一个好主意。ASCII是另一种，其中代码基本上是URL 编码的，或UTF-8。

浏览器兼容性（Browser Compatibility）

Data URI 在IE 5-7 中不起作用，但在IE 8 支持。你可以：

  • 使用仅IE 的样式表将图像放入，或，
  • 仅用于渐进增强型的东西，其中没有图像是完全可以接受的，或者，
  • 不关心
  • 阅读本文，了解有效的替代技术。

重要笔记（Important Notes）

  • 嵌入代码的大小本身略大于资源的大小。GZip 压缩会有所帮助。
  • IE8 的最大data URI 大小最低为32768字节。（嘿？！？！还有那个疯狂的号码。）
  • 对于所有内容，很难维护具有嵌入式data URI 的站点。更新图像并替换它更容易。
  • 如果你使用PHP（或PHP 作为CSS），你可以动态创建data URI，如下所示：
    1
    2
    3
    <?php
      echo base64_encode(file_get_contents("../images/folder16.gif"))
    ?>
  • 你应该只在高度缓存的文档中使用它，就像你应该使用CSS 一样。如果CSS 文件节省6 个HTTP 请求，那么拥有300k 而不是50k 的CSS文件就好了，但只有当CSS 文件缓存时才会像那些图像那样缓存。设置CSS 文件的长期过期应该会有所帮助。
  • Data URI 不仅限于图像，它们实际上可以是任何东西。
  • 当它得到更多支持并且人们为它构建很酷的工具时，<canvas> 可能会淘汰所有这些。
  • 指南针（Compass） 有一个帮手。

论表现（On Performance）

Peter McLachlan 的一些相关研究：

…在测量数十万个移动页面视图的性能时，使用data URI 加载图像的速度平均比使用二进制源链接（如带有src 属性的img 标记）慢6倍！