将背景图像数据嵌入 CSS 作为 Base64 是好还是坏?

2022-01-21 00:00:00 base64 background-image data-uri css

我正在查看一个greasemonkey 用户脚本的来源，并在他们的css 中注意到以下内容:

I was looking at the source of a greasemonkey userscript and noticed the following in their css:

<代码>.即使{背景:#FFF URL(数据:图像/GIF; BASE64，R0lGODlhBgASALMAAOfn5 + rq6uvr6 + zs7O7u7vHx8fPz8/b29vj4 + P39/F///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7)重复-X底部}

我可以理解，greasemonkey 脚本希望将它可以在源中的任何东西捆绑在一起，而不是将其托管在服务器上，这很明显.但由于我以前没有见过这种技术，所以我考虑了它的用途，它似乎很有吸引力，原因有很多:

I can appreciate that a greasemonkey script would want to bundle anything it can within the source as opposed to host it on a server, that's obvious enough. But since I had not seen this technique previously, I considered its use and it seems appealing for a number of reasons:

  1. 它将减少页面加载时的 HTTP 请求量，从而提高性能
  2. 如果没有 CDN，那么它将减少通过与图像一起发送的 cookie 产生的流量
  3. 可以缓存 CSS 文件
  4. CSS 文件可以 GZIPPED

考虑到 IE6(例如)在缓存背景图像方面存在问题，这似乎不是最糟糕的主意...

Considering that IE6 (for instance) has problems with cache for background images, this seems like it's not the worst idea...

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

So, is this a good or bad practice, why WOULDN'T you use it and what tools would you use to base64 encode the images?

更新 - 测试结果

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

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

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

dedicated CSS file: http://fragged.org/dev/base64.css - 178.1Kb

GZIP编码服务器端

发送给客户端的结果大小(YSLOW组件测试):59.3Kb

resulting size sent to client (YSLOW components test): 59.3Kb

保存发送到客户端浏览器的数据:74.3Kb

Saving of data sent to client browser of: 74.3Kb

不错，但我猜它对于较小的图像的用处会稍微小一些.

Nice, but it will be slightly less useful for smaller images, I guess.

更新:Bryan McQuade 是 Google 的一名软件工程师，负责 PageSpeed，他在 2013 年 ChromeDevSummit 上表示，CSS 中的 data:uris 在他的演讲中被认为是一种渲染阻塞反模式，用于提供关键/最小的 CSS #perfmatters:即时移动网络应用程序.请参阅 http://developer.chrome.com/devsum​​mit/sessions 并牢记这一点 - 实际幻灯片

UPDATE: Bryan McQuade, a software engineer at Google, working on PageSpeed, expressed at ChromeDevSummit 2013 that data:uris in CSS is considered a render-blocking anti-pattern for delivering critical/minimal CSS during his talk #perfmatters: Instant mobile web apps. See http://developer.chrome.com/devsummit/sessions and keep that in mind - actual slide

推荐答案

如果您希望单独缓存图像和样式信息，这不是一个好主意.此外，如果您将大图像或大量图像编码到您的 css 文件中，则浏览器将花费更长的时间来下载文件，而您的站点没有任何样式信息，直到下载完成.对于您不打算经常更改的小图像，这是一个很好的解决方案.

It's not a good idea when you want your images and style information to be cached separately. Also if you encode a large image or a significant number of images in to your css file it will take the browser longer to download the file leaving your site without any of the style information until the download completes. For small images that you don't intend on changing often if ever it is a fine solution.

就生成base64编码而言:

as far as generating the base64 encoding:

  • http://b64.io/
  • http://www.motobit.com/util/base64-decoder-编码器.asp(上传)
  • http://www.greywyvern.com/code/php/binary2base64 (来自下面的小教程链接)
  • http://b64.io/
  • http://www.motobit.com/util/base64-decoder-encoder.asp (upload)
  • http://www.greywyvern.com/code/php/binary2base64 (from link with little tutorials underneath)

相关文章