在 CSS 中使用图像文件与数据 URI
我正在尝试确定包含我编写的脚本所需的图像的最佳方式。
我发现了这个网站，它让我考虑尝试这种方法将图像作为 数据 URI 包含（由 RFC 2397) 因为它太小了 - 它是一个 1x1 像素 50% 不透明度的 png 文件（用于背景） - 它最终图像为 2,792 字节，而 CSS 中的文本为 3,746 字节。
那么这会被认为是好的做法，还是只会让 CSS 变得不必要的混乱？
I'm trying to decide the best way to include an image that is required for a script I've written.
I discovered this site and it made me think about trying this method to include the image as a data URI (defined by RFC 2397) since it was so small - it's a 1x1 pixel 50% opacity png file (used for a background) - it ends up at 2,792 bytes as an image versus 3,746 bytes as text in the CSS.
So would this be considered good practice, or would it just clutter up the CSS unnecessarily?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
使用数据 URI 而不是图像是有充分理由的。
数据 URI 采用 Base 64 编码，这意味着它比图像大大约 25%。不过，您的 CSS 文件可以被缓存，因此较小的大小增加可能不是一个大问题。
如果您有很多图像，则查找每个图像都会产生开销，无论是在名称解析还是将图像作为另一种资源获取方面。
所有这些意味着，如果图像很小，并且整个 CSS 文件仍然很小，并且 CSS 在经常点击的页面之间共享，那么如果切换到数据 URI，您将获得性能提升。
缺点是它们仅适用于 FX、Chrome 等。部分适用于 IE8，但仅适用于小图像。它们根本无法在 IE7 或更低版本中运行。
There is a good reason for using a Data URI, rather than the image.
The Data URI is base 64 encoded, which means that it's about 25% bigger than the image. However your CSS file can be cached, so the small size increase probably isn't a big problem.
If you have a lot of images there's an overhead for looking up each one, both in terms of name resolution and getting the image as another resource.
All this means that if images are small, and the overall CSS file is still small, and the CSS is shared between pages that are hit often then you stand to gain performance if you switch to data URIs.
The downside is that they only work in FX, Chrome, etc. The partially work in IE8, but only for small images. They don't work in IE7 or below at all.
我认为你不会获得太多...并且如果它是文件图像，浏览器可以缓存它。除非你确实需要它，否则我不会费心使用 CSS 来实现它。
I don't think you will gain much... and if it is a file image, the browser can cache it. I wouldn't bother doing it with CSS unless you have a real need for it.
我认为现在可以忽略不计..（一张图片很小？）
但是，还有其他一些事情需要考虑：
原因是..
每加载到 css 中的图像就减少了一次对服务器的调用，这需要时间。我们都从精灵中知道这一点。即使是比所有图像组合更大的精灵也是优选的。
这意味着，如果您使用 data: URI，则添加的每张图像都会减少潜在的速度下降。
对于第二个问题.. 数据：URI 对 gZip 非常友好。我的意思是非常。我们有一些巨大的遗留 CSS 文件。 109 kb 巨大......当我们 data:URI 图像时，它会膨胀到高达 246 kb！经过 gZipping 之后，我们的大小降至 126 kb。
更不用说.. 精灵维护起来并不有趣，但如果您使用 data: URI，那么就没有理由使用精灵了。
希望有帮助。
附言。有关 data:URI 的链接。
http:// /www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/#comment-5800
PS PS
检查该页面的底部，了解 Nicolas 关于 data:URI 的更多内容
I think it's negligible right now.. (one image that's small?)
However, there are some other things to consider:
Reason being..
For every image loaded into css is one less call to the server, which takes time. We all know that from sprites. Even a larger sized sprite, than all the images combined, is preferrable.
That means that every image that's added, is one less potential slowdown, if you use data: URI.
and for the second question.. data: URI is VERY gZip friendly. I mean VERY. We have some legacy css files that are huge. 109 kb huge.. and when we data:URI the image, that inflates into a whopping 246 kb! After gZipping, we are down to 126 kb.
Not to mention.. sprites are not fun to maintain, but there is far less reason to sprite if you are using data: URI.
Hope that helps.
PS. a link regarding data:URI.
http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/#comment-5800
PS PS
check the bottom of that page, to find out more Nicolas has to say about data:URI
使用数据 URI 指 数据 URI 使 CSS sprite 过时 并扩展了 CSSEmbed 工具，通过创建 Ant 构建步骤来实现。 CSSEmbed“还支持 MHTML 模式，使 IE6 和 IE7 兼容的样式表使用类似于数据 URI 的内部图像。”
另外，在将图像文件字节与 Base64 编码字节进行比较时，不要忘记每个 http 图像请求/响应都有 http 标头的字节开销。这个针对 Yahoo 的示例消耗了大约 900 字节（我确实将代理名称修改为 example.com）。此外，yimg.com 域经过优化，没有任何 cookie 并保存了这些潜在的字节。
Using Data URIs refers to Data URIs make CSS sprites obsolete and extends the use of the CSSEmbed tool by creating an Ant build step. CSSEmbed "also supports an MHTML mode to make IE6 and IE7 compatible stylesheets that use internal images similar to data URIs."
Also, when comparing image file bytes to base64 encoded bytes, don't forget that each http image request/response has the bytes overhead of the http headers. This example going against Yahoo consumes about 900 bytes (I did modify the proxy name to example.com). Furthermore, the yimg.com domain is optimized to not have any cookies and saving those potential bytes.
何时使用数据 URI
当使用数据 URI 代替图像精灵时，数据 URI 保存单个 HTTP 请求，并且每一点都很重要。然而，它们对于难以包含在精灵表中的图像更有用，例如需要不同数量空白的自定义列表项目符号。
尽管数据 URI 是减少 HTTP 请求的绝佳方法，但并非在所有情况下都使用它们。由于它们将原始文件数据直接嵌入到样式表中，因此如果过度使用数据 URI，可能会导致样式表膨胀。
下面是一些有用的链接。
http://jonraasch.com/blog/css-data-uris-in -所有浏览器
http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
When To Use Data URIs
When used instead of an image sprite, data URIs save a single HTTP request, and every little bit counts. However they are even more useful for images that are difficult to include in sprite sheets, for instance custom list bullets that need a varying amount of whitespace.
Although data URIs are an excellent way to reduce HTTP requests, it doesn’t make sense to use them in every situation. Since they embed the raw file data directly in the stylesheet, data URIs can lead to stylesheet bloat if they are used heavy-handedly.
Below are some useful links.
http://jonraasch.com/blog/css-data-uris-in-all-browsers
http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/