【发布时间】：2009-09-24 03:12:37
【问题描述】：
我正在尝试确定包含我编写的脚本所需的图像的最佳方式。
我发现了this site，这让我想到尝试使用这种方法将图像包含为data URI（由RFC 2397 定义），因为它非常小 - 它是一个 1x1 像素、50% 不透明度的 png 文件（使用作为背景）- 它最终以 2,792 字节作为图像，而在 CSS 中以 3,746 字节作为文本。
那么这会被认为是一种好的做法，还是会不必要地弄乱 CSS？
【问题讨论】：
【发布时间】：2009-09-24 03:12:37
【问题描述】：
使用数据 URI 而不是图像是有充分理由的。
数据 URI 采用 base 64 编码，这意味着它比图像大 25%。但是你的 CSS 文件可以被缓存，所以小尺寸的增加可能不是什么大问题。
如果您有很多图像，则查找每个图像都会产生开销，无论是在名称解析方面还是在将图像作为另一个资源方面。
所有这一切都意味着，如果图像很小，并且整个 CSS 文件仍然很小，并且 CSS 在经常被点击的页面之间共享，那么如果您切换到数据 URI，您就可以获得性能。
缺点是它们仅适用于 FX、Chrome 等。部分适用于 IE8，但仅适用于小图像。它们根本无法在 IE7 或更低版本中运行。
【讨论】：
-
你说css文件会被缓存，但如果你真的考虑一下，会有一个缺点。当您捆绑 css 文件时，您会得到新的 css，而旧的 css 会失效。您可以通过单独缓存图像来节省这些额外的字节。
-
@JaspreetSingh 这在很大程度上取决于您如何捆绑 CSS - 访问者仍然不应该在每次访问时再次获取 CSS，并且缓存或服务工作者应该在访问之间保持（如果版本没有改变）。这实际上是带宽与 ping 的问题 - CSS 文件更大，但您为图像节省了往返时间。大多数情况下，开销不足以值得额外的字节，但并非总是如此。
我认为你不会有太多收获……如果是文件图像，浏览器可以缓存它。除非你真的需要它，否则我不会费心用 CSS 来做。
【讨论】：
我认为现在可以忽略不计..（一张图片很小？）
但是，还有一些其他的事情需要考虑：
- 未来会有更多图像的可能性吗？
- 您对 css 文件进行 gZip 压缩吗？
原因..
对于加载到 css 中的每个图像，对服务器的调用都会减少一次，这需要时间。我们都从精灵中知道这一点。即使是比所有图像组合更大的精灵也是可取的。
这意味着，如果您使用 data: URI，则添加的每张图片都会减少一次潜在的减速。
对于第二个问题.. data: URI 对 gZip 非常友好。我的意思是非常。我们有一些巨大的遗留 css 文件。 109 kb 巨大.. 当我们 data:URI 图像时，它膨胀到惊人的 246 kb！在 gZipping 之后，我们减少到 126 kb。
更不用说.. sprite 维护起来并不有趣，但是如果您使用 data: URI，那么使用 sprite 的理由要少得多。
希望对您有所帮助。
PS。关于 data:URI 的链接。 http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/#comment-5800
PS PS 检查该页面的底部，以了解 Nicolas 关于 data:URI 的更多信息
【讨论】：
Using Data URIs 引用 Data URIs make CSS sprites obsolete 并通过创建 Ant 构建步骤扩展了 CSSEmbed 工具的使用。 CSSEmbed“还支持 MHTML 模式，以制作兼容 IE6 和 IE7 的样式表，这些样式表使用类似于数据 URI 的内部图像。”
此外，在比较图像文件字节与 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
【讨论】：
何时使用数据 URI
当使用数据 URI 代替图像精灵时，数据 URI 会保存一个 HTTP 请求，并且每一点都很重要。然而，它们对于难以包含在 sprite 表中的图像更为有用，例如需要不同数量的空白的自定义列表项目符号。
虽然数据 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/
【讨论】：