Question

我正在尝试确定包含我编写的脚本所需图像的最佳方式。

我发现this site并且它让我考虑尝试使用此方法将图像包含为data URI（由RFC 2397定义），因为它太小了 - 它是1x1像素50 ％opacity png文件（用于后台） - 作为图像最终为2,792字节，而CSS中的文本为3,746字节。

那么这会被认为是好的做法，还是会不必要地混乱CSS呢？

Answer 1

使用数据URI而不是图像是有充分理由的。

数据URI是基于64位编码的，这意味着它比图像大25％。但是，您的CSS文件可以缓存，因此小尺寸增加可能不是一个大问题。

如果您有很多图像，那么在查找每个图像时都会有一些开销，无论是名称解析还是将图像作为另一种资源。

所有这些意味着如果图像很小，并且整个CSS文件仍然很小，并且CSS经常被点击的页面之间共享，那么如果切换到数据URI，则可以获得性能。

缺点是它们只适用于FX，Chrome等。部分工作在IE8中，但仅适用于小图像。它们根本不适用于IE7或以下版本。

Answer 2

我认为你不会获得太多......如果它是一个文件图像，浏览器可以缓存它。除非你真的需要它，否则我不会费心去做它。

Answer 3

我认为现在可以忽略不计......（一张图片很小？）

但是，还有其他一些事情需要考虑：

未来会有更多图片的可能吗？
你是否gZip你的CSS文件？

原因是..
对于加载到css中的每个图像，只需少一次调用服务器，这需要时间。我们都知道精灵。即使是比所有图像组合的更大尺寸的精灵也是优选的。这意味着，如果您使用数据，则添加的每个图像都会减少一个潜在的减速：URI。

并且对于第二个问题..数据：URI非常友好。我的意思是非常。我们有一些巨大的遗留css文件。 109 kb巨大..当我们数据：URI图像，膨胀到一个惊人的246 kb！ gzipping后，我们降到126 kb。

更不用说..精灵维护起来并不好玩，但如果您使用数据，精灵的理由要少得多：URI。

希望有所帮助。

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

Answer 4

Using Data URIs引用Data URIs make CSS sprites obsolete并通过创建Ant构建步骤扩展了CSSEmbed工具的使用范围。 CSSEmbed“还支持MHTML模式，使IE6和IE7兼容的样式表使用类似于数据URI的内部图像。”

此外，在将图像文件字节与base64编码字节进行比较时，请不要忘记每个http图像请求/响应都具有http标头的字节开销。这个针对雅虎的例子消耗了大约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

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/

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

5 个答案: