将背景图像数据嵌入CSS作为Base64好的或坏的做法？ [英] Is embedding background image data into CSS as Base64 good or bad practice?
问题描述
我正在查看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
-
使用图片测试： http://fragged.org/dev/map-shot.jpg - 133.6Kb
-
专用的CSS文件：
http：// fragged.org/dev/base64.css -
178.1Kb -
GZIP编码服务器端
-
传送给客户的结果尺寸（YSLOW
元件测试）： 59.3Kb b $ b -
保存发送到客户端浏览器的数据： 74.3Kb
$ b $
更新：软件工程师Bryan McQuade在Google上讨论PageSpeed在ChromeDevSummit 2013上表示数据：CSS中的uris被认为是在他的演讲中提供关键/最小CSS的渲染阻止反模式
#perfmatters：Instant mobile web apps。请参见 http://developer.chrome.com/devsummit/sessions ，并牢记这一点 - 实际幻灯片
当你想要将图像和样式信息单独缓存时，这不是一个好主意。此外，如果您将大型图像或大量图像编码到css文件中，则在下载完成之前，浏览器需要更长时间才能下载离开您的网站的文件，而没有任何样式信息。对于小图片，如果是有效的解决方案，则不打算更改。
只要生成base64编码：
- http://b64.io/ li>
- http://www.motobit.com /util/base64-decoder-encoder.asp （上传）
- http://www.greywyvern.com/code/php/binary2base64 （来自下面的小教程的链接）
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 (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)
这篇关于将背景图像数据嵌入CSS作为Base64好的或坏的做法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
