将背景图像数据嵌入CSS作为Base64好的或坏的做法？ | 将背景图像数据嵌入CSS作为Base64好的或坏的做法

本文介绍了将背景图像数据嵌入CSS作为Base64好的或坏的做法？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

  .even {background： #FFF URL（数据：图像/ GIF; BASE64，R0lGODlhBgASALMAAOfn5 + rq6uvr6 + zs7O7u7vHx8fPz8 / b29vj4 + P39 /˚F/// wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7）重复-X底部}

我可以理解，greasemonkey脚本会想要在源代码中捆绑任何东西，而不是在服务器上托管它，这是很明显的。但是，由于我以前没有看到这种技术，我认为它的使用，它似乎有吸引力的一些原因：

页面加载时的HTTP请求数量，从而提高性能

如果没有CDN，则会减少通过图像旁边发送的Cookie产生的流量。

可以缓存CSS文件

CSS文件可以是GZIPPED

（例如）有背景图像缓存的问题，这似乎不是最糟糕的想法...

所以，这是一个好或坏的做法，为什么WOULDN

$ b

更新 - 测试结果您可以使用它来编写图片？
$ b

使用图片测试： - 133.6Kb

测试网址：

专用的CSS文件：
-
178.1Kb

GZIP编码服务器端

传送给客户的结果尺寸（YSLOW
元件测试）： 59.3Kb b $ b
保存发送到客户端浏览器的数据： 74.3Kb

$ b $

解决方案

当你想要将图像和样式信息单独缓存时，这不是一个好主意。此外，如果您将大型图像或大量图像编码到css文件中，则在下载完成之前，浏览器需要更长时间才能下载离开您的网站的文件，而没有任何样式信息。对于小图片，如果是有效的解决方案，则不打算更改。

只要生成base64编码：

li>
（上传）

（来自下面的小教程的链接）

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:

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

解决方案

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)

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