将Base64背景图像数据嵌入到CSS中作为好还是不好的做法？

 

我正在查看greasemonkey userscript的来源，并注意到他们的CSS中有以下内容： 

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

我可以理解的是，一个greasemonkey脚本想要将它在源代码中的任何东西都捆绑起来，而不是将它放在服务器上，这足够明显。 但是由于我之前没有看过这种技术，我考虑过它的使用，并且出于以下原因似乎有吸引力：

  • 它将减少页面加载时的HTTP请求数量，从而提高性能
  • 如果没有CDN，那么它将减少通过与图像一起发送的cookie生成的通信量
  • CSS文件可以被缓存
  • CSS文件可以被GZIPPED

    • 考虑到IE6（例如）在背景图像缓存方面存在问题，这似乎并不是最糟糕的想法......

    那么，这是一种好的还是坏的做法，为什么你不使用它，你会用什么工具对图像进行base64编码？

    更新 - 测试结果

  • 用图像测试：http: //fragged.org/dev/map-shot.jpg - 133.6Kb

  • 测试网址：http：//fragged.org/dev/base64.html

  • 专用CSS文件：http: //fragged.org/dev/base64.css - 178.1Kb

  • GZIP编码服务器端

  • 产生的大小发送到客户端（YSLOW组件测试）： 59.3Kb

  • 保存发送给客户端浏览器的数据： 74.3Kb

    • 不错，但是对于较小的图像来说，它会略微有用，我想。

    更新：Google的软件工程师Bryan McQuade致力于PageSpeed，在ChromeDevSummit 2013上表达了以下数据：CSS中的uris被认为是在他的演讲中提供关键/最小CSS的渲染阻止反模式#perfmatters: Instant mobile web apps 。 请参阅http://developer.chrome.com/devsum​​mit/sessions并记住这一点 - 实际幻灯片

    当您希望将图像和样式信息分开缓存时，这不是一个好主意。 此外，如果您将大图或大量图像编码到您的css文件中，则需要更长的时间才能下载离开您的网站的文件，而无需任何样式信息，直到下载完成。 对于小图像，如果您经常更改这些图像，那么这是一个很好的解决方案。

    至于生成base64编码：

  • http://b64.io/
  • http://www.motobit.com/util/base64-decoder-encoder.asp（上传）
  • http://www.greywyvern.com/code/php/binary2base64（从下面的小教程链接）

    • 此答案已过时，不应使用。

    1）2017年，移动平均延迟速度更快。https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network

    2）HTTP2复用https://http2.github.io/faq/#why-is-http2-multiplexed

    移动网站一定要考虑“数据URI”。 蜂窝网络上的HTTP访问每个请求/响应的延迟较高。 所以有一些用例将数据干扰成CSS或HTML模板可能对移动web应用程序有益。 您应该根据具体情况来衡量使用情况 - 我并不是主张应该在移动Web应用程序的任何地方使用数据URI。

    请注意，移动浏览器对可缓存文件的总大小有限制。 iOS 3.2的限制相当低（每个文件25K），但对于较新版本的Mobile Safari，限制越来越大（100K）。 因此，在包含数据URI时，请务必留意您的文件总大小。

    http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

    如果仅仅引用该图像一次，我没有看到将它嵌入到CSS文件中的问题。 但是，一旦您使用多个图像或需要在CSS中多次引用它，您可能会考虑使用单个图像地图，而不是您可以从中裁剪单张图像（请参阅CSS Sprites）。

    链接地址: http://www.djcxy.com/p/22137.html

    上一篇: Is embedding background image data into CSS as Base64 good or bad practice?

    下一篇: Decode Base64 data in Java