被嵌入的背景图像数据转换成CSS为Base64好或坏的做法？ [英] Is embedding background image data into CSS as Base64 good or bad practice?

问题描述

我一直在寻找一个Greasemonkey的userscript的来源，并注意到他们的CSS如下：

 。即使{背景：#FFF url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7)重复-X底部}
 

我可以AP preciate一个Greasemonkey的脚本将要在源代码中捆绑任何它可以，而不是其驻留在服务器上，这是明显不够。但因为我还没有看到这种技术previously，我认为它的使用，似乎呼吁几个原因：

1. 这将减少对页面加载的HTTP请求的数量，从而提高性能


2. 如果没有CDN，那么它会降低通过cookie产生的流量被送到旁边的图像


3. CSS文件可以被缓存


4. CSS文件可以用gzip压缩

考虑到IE6（例如）有问题，缓存为背景图片，这似乎是这不是最糟糕的主意......

所以，这是一个好或坏的做法，为什么你不使用它，你会用什么工具为base64 EN code中的图像？

更新 - 测试结果

• 测试与形象： 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

不错，但是这将是更小的图像略有用处不大，我猜。

  

更新：布莱恩·麦奎德，在谷歌的软件工​​程师，从事的PageSpeed​​，前$ P $在ChromeDevSummit 2013 pssed数据：在CSS中的URI被认为是阻止呈现反模式为他的演讲过程中提供关键/最少的CSS #perfmatters：瞬间移动Web应用程序。见<一href=\"http://developer.chrome.com/devsummit/sessions\">http://developer.chrome.com/devsummit/sessions和记住这一点 - <一个href=\"https://docs.google.com/$p$psentation/d/1z49qp03iXAJIkbXaMtCmWW_Pnnq-MzXGW139Xw8-paM/edit#slide=id.g174590d5d_0194\">actual滑动

解决方案

这不是当你想你的图像和样式信息分别缓存是个好主意。此外，如果你的连接code大图像或图像到你的CSS文件显著数量将采取浏览器更长的时间来下载文件离开您的网站没有任何的样式信息，直至下载完成。对于那些你不经常改变过，如果它是一个精解打算小图像。

据生成的base64编码：

• http://b64.io/


• http://www.motobit.com/util/base64-de$c$cr-en$c$cr.asp （上传）


• http://www.greywyvern.com/$c$c/php/binary2base64 （从很少的教程链接在下面）


• http://base64img.com - 图像实时的转换HTML5为Base64


• http://datauri.net - 在CSS文件自动嵌入数据URI。支持多个文件/文件拖放放大器;降

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

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

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. It will reduce the amount of HTTP requests on page load, thus enhancing performance
2. If no CDN, then it will reduce the amount of traffic generated through cookies being sent alongside of images
3. CSS files can be cached
4. CSS files can be GZIPPED

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

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?

update - results of testing

• testing with image: http://fragged.org/dev/map-shot.jpg - 133.6Kb

• test URL: http://fragged.org/dev/base64.html

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

• GZIP encoding server side

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

• Saving of data sent to client browser of: 74.3Kb

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

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

解决方案

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.

as far as generating the base64 encoding:

• 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)
• http://base64img.com - realtime HTML5 conversion of images to Base64
• http://datauri.net - automatically embeds data URIs in CSS files. supports multiple files / drag & drop

这篇关于被嵌入的背景图像数据转换成CSS为Base64好或坏的做法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！