在CSS中使用图像文件与数据URI的区别

Question

我正在尝试决定包含一张必要图片的最佳方式，这与我编写的脚本有关。

我发现了 这个网站，它让我考虑尝试使用 data URI (由 RFC 2397 定义) 的方法来将这张图片包含进去，因为它非常小 - 这是一张 1x1 像素的半透明 PNG 文件(用于背景) - 作为图像它只有 2,792 字节，而在 CSS 中则需要 3,746 字节。

那么这是否被认为是良好的做法呢，或者它仅会不必要地混杂在 CSS 中？

- Mottie

Answer 1

使用Data URI而不是图片，有一个很好的理由。

Data URI是基于base64编码的，这意味着它比图像大约25%。但是您的CSS文件可以被缓存，因此小的大小增加可能不是一个大问题。

如果您有很多图片，则查找每个图片都会产生开销，无论是名称解析还是获取该图片作为另一资源。

所有这些意味着，如果图片很小，整个CSS文件仍然很小，并且CSS在经常访问的页面之间共享，那么如果切换到Data URI，则可以提高性能。

缺点是它们只在FX、Chrome等浏览器中有效。它们在IE8中部分有效，但仅适用于小图像。它们在IE7及以下版本中根本无效。

- Keith

---

你说CSS文件将被缓存，但如果你真的想一想，就会发现其中一个弊端。当你捆绑CSS文件时，你会得到新的CSS文件并且旧的CSS文件会失效。如果单独缓存图像，你可以节省那些额外的字节。 - Jaspreet Singh

@JaspreetSingh 这在很大程度上取决于您如何捆绑CSS - 访问者在每次访问时仍不应该再次获取CSS，缓存或服务工作者应该在访问之间保持（如果版本没有更改）。这实际上是带宽与ping的问题 - CSS文件更大，但您可以省去图像的往返。大多数情况下，这不足以值得额外的字节开销，但并非总是如此。 - Keith

Answer 2

我认为你不会获得太多的利益……如果是文件图像，浏览器可以缓存它。除非你真正需要，否则我不会使用CSS来做这件事情。

- scunliffe

Answer 3

我认为现在可以忽略不计...(一个小图片?)

然而，还有其他一些需要考虑的事情：

1. 将来是否可能会添加更多的图片？
2. 你是否压缩了你的CSS文件？

原因是...
对于每个加载到CSS中的图像，都会减少一次对服务器的调用，这需要时间。 我们都知道这一点从精灵图。 即使是比所有图像组合起来更大的精灵，也是可取的。 这意味着每添加一张图片，就会减少一个潜在的减速，如果使用数据：URI。

至于第二个问题...数据：URI非常友好的gZip。 我的意思是非常友好。 我们有一些巨大的遗留CSS文件。 109 kb巨大..当我们data:URI图像时，它会膨胀到惊人的246 kb！经过gZip处理后，我们只剩下126 kb。

更不用说了..精灵并不好维护，但是如果使用数据：URI，则没有太多理由使用精灵。

希望这能帮到您。

PS. 关于数据：URI的链接。 http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/#comment-5800

PS PS 查看该页面底部，以了解Nicolas有关数据：URI的更多信息

- Dave Gregory

Answer 4

使用数据URI是指数据URI使CSS精灵过时，并通过创建Ant构建步骤扩展了CSSEmbed工具的使用。CSSEmbed“还支持MHTML模式，以使使用类似于数据URI的内部图像的IE6和IE7兼容样式表。”

此外，当将图像文件字节与base64编码字节进行比较时，请不要忘记每个http图像请求/响应都有http头的字节开销。这个例子针对Yahoo的消耗约为900字节（我修改了代理名称为example.com）。此外，yimg.com域已经优化，不会有任何cookie，并节省这些潜在的字节。

GET http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png HTTP/1.1
Accept: */*
Referer: http://www.yahoo.com/
Accept-Language: en-US
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.5; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET4.0C; .NET4.0E)
Accept-Encoding: gzip, deflate
Host: l.yimg.com
Proxy-Connection: Keep-Alive

HTTP/1.0 200 OK
Date: Sat, 31 Jul 2010 22:27:25 GMT
Cache-Control: max-age=315360000
Expires: Tue, 28 Jul 2020 22:27:25 GMT
Last-Modified: Wed, 16 Jun 2010 18:06:49 GMT
Accept-Ranges: bytes
Content-Length: 1750
Content-Type: image/png
Age: 321472
Server: YTS/1.17.23.1
X-Cache: MISS from a-proxy-server.example.com
Via: 1.0 a-proxy-server.example.com:80 (squid/2.6.STABLE22)
Proxy-Connection: keep-alive

- Kevin Hakanson

Answer 5

何时使用数据URI

当用于替代图像精灵时，数据URI可以节省一个HTTP请求，每一点都很重要。然而，对于难以包含在精灵表中的图像，例如需要不同数量空格的自定义列表符号，它们更加有用。

虽然数据URI是减少HTTP请求的绝佳方式，但并不意味着在每种情况下都使用它们是合理的。由于它们直接嵌入样式表中的原始文件数据，如果过度使用，数据URI可能会导致样式表膨胀。

以下是一些有用的链接。

http://jonraasch.com/blog/css-data-uris-in-all-browsers

http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/

- StefanNch