在CSS中使用图像文件与数据URI
我正在尝试决定最好的方式来包含我所写脚本所需的图像 我发现，它让我考虑尝试这种方法，将图像作为一个（由定义的），因为它太小了——它是一个1x1像素的50%不透明度的png文件（用于背景）——在CSS中，图像的大小为2792字节，而文本的大小为3746字节在CSS中使用图像文件与数据URI,css,image,data-url,Css,Image,Data Url,我正在尝试决定最好的方式来包含我所写脚本所需的图像 我发现，它让我考虑尝试这种方法，将图像作为一个（由定义的），因为它太小了——它是一个1x1像素的50%不透明度的png文件（用于背景）——在CSS中，图像的大小为2792字节，而文本的大小为3746字节 那么，这是一种良好的做法，还是只是不必要地把CSS弄得乱七八糟 我想你不会有什么收获。。。如果是文件图像，浏览器可以缓存它。除非您真的需要CSS，否则我不会费心使用它。使用数据URI而不是图像是有充分理由的 数据URI是Base64编码的，这意
那么，这是一种良好的做法，还是只是不必要地把CSS弄得乱七八糟 我想你不会有什么收获。。。如果是文件图像，浏览器可以缓存它。除非您真的需要CSS，否则我不会费心使用它。使用数据URI而不是图像是有充分理由的 数据URI是Base64编码的，这意味着它比图像大大约25%。但是，CSS文件可以缓存，因此小尺寸的增加可能不是什么大问题 如果您有很多图像，那么查找每个图像都会有开销，包括名称分辨率和将图像作为另一个资源获取 所有这一切都意味着，如果图像很小，而整个CSS文件仍然很小，并且CSS在经常被点击的页面之间共享，那么如果切换到数据URI，您就可以获得性能
缺点是它们只适用于FX、Chrome等。IE8部分适用，但仅适用于小图像。它们在IE7或更低版本中根本不起作用。我认为现在可以忽略不计。。（一张很小的照片？） 然而，还有一些其他的事情需要考虑：
对于每个加载到css中的图像，对服务器的调用就少了一次，这需要时间。我们从精灵身上都知道这一点。即使是比所有图像加在一起更大的精灵也更受欢迎。 这意味着，如果使用data:URI，添加的每个图像都会减少一个潜在的减速 第二个问题。。数据：URI对gZip非常友好。我的意思是非常好。我们有一些巨大的遗留css文件。109 kb大。。当我们对图像进行数据访问时，它会膨胀到惊人的246KB！经过gzip压缩后，我们的内存降到了126KB 更不用说。。精灵维护起来并不有趣，但如果您使用的是data:URI，那么使用精灵的理由要少得多 希望有帮助 关于数据的链接：URI。 PS PS 查看该页面底部，了解Nicolas关于数据的更多信息：URI通过创建Ant构建步骤引用并扩展了该工具的使用。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请求，并且每一点点都很重要。但是，对于难以包含在精灵表中的图像，例如需要不同数量空白的自定义列表项目符号，它们甚至更有用 虽然数据URI是减少HTTP请求的一种很好的方法，但并非在所有情况下都使用它们。由于数据URI直接将原始文件数据嵌入样式表中，因此如果过度使用数据URI，可能会导致样式表膨胀 下面是一些有用的链接
你说css文件将被缓存，但如果你真的想一想，就会发现它有一个缺点。当您绑定css文件时，您将获得新的css，而旧的css将失效。您可以通过单独缓存图像来节省这些额外的字节。@Jaspreitsh这在很大程度上取决于您如何捆绑CSS-访客仍然不应该在每次访问时再次获得CSS，并且缓存或服务人员应该在访问之间保持不变（如果版本没有更改）。这真的是一个带宽与ping的问题-CSS文件更大，但您可以为图像节省一次往返。大多数情况下，这些额外字节的开销还不够，但并非总是如此。