5

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

我发现了这个网站，它让我考虑尝试使用这种方法将图像包含为数据 URI（由RFC 2397定义），因为它太小了——它是一个 1x1 像素、50% 不透明度的 png 文件（用于背景）——它最终在 2,792 字节作为图像与 3,746 字节作为 CSS 中的文本。

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

4

5 回答 5

21

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

数据 URI 是 base 64 编码的，这意味着它比图像大 25% 左右。但是，您的 CSS 文件可以被缓存，因此小尺寸的增加可能不是什么大问题。

如果您有很多图像，则查找每个图像都会产生开销，无论是在名称解析方面还是在将图像作为另一种资源方面。

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

缺点是它们仅适用于 FX、Chrome 等。部分适用于 IE8，但仅适用于小图像。它们根本不适用于 IE7 或更低版本。

于 2010-04-23T11:02:28.000 回答
4

我认为您不会获得太多...如果是文件图像，浏览器可以对其进行缓存。除非你真的需要它，否则我不会费心用 CSS 来做。

于 2009-09-24T03:20:52.200 回答
4

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

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

  1. 未来会不会有更多图片的可能性？
  2. 你gZip你的css文件吗？

原因是..
对于加载到 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 所说的更多信息

于 2010-07-10T01:54:38.093 回答
1

使用数据 URI是指数据 URI 使 CSS sprite 过时，并通过创建 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
于 2010-08-04T15:57:52.390 回答
0

何时使用数据 URI

当使用数据 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/

于 2011-02-19T22:29:44.823 回答