我正在查看一个greasemonkey用户脚本的来源,并在他们的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编码图像?
update - results of testing
-
测试图像:http://fragged.org/dev/map-shot.jpg - 133.6Kb
-
专用CSS文件:http://fragged.org/dev/base64.css - 178.1Kb
-
GZIP编码服务器端
-
结果大小发送到客户端(YSLOW组件测试): 59.3Kb
-
保存发送到客户端浏览器的数据: 74.3Kb
不错,但我认为它对于较小的图像会稍微有用 .
更新:谷歌的软件工程师Bryan McQuade在PageSpeed上表达了ChromeDevSummit 2013的数据:CSS中的uris被认为是一种渲染阻止反模式,用于在他的演讲中提供关键/最小的CSS #perfmatters:Instant mobile web应用 . 请参阅http://developer.chrome.com/devsummit/sessions并记住这一点 - 实际幻灯片
12 回答
当您希望单独缓存图像和样式信息时,这不是一个好主意 . 此外,如果您将大图像或大量图像编码到css文件中,则在下载完成之前,浏览器需要更长时间才能下载文件而不会显示任何样式信息 . 对于您不打算经常更换的小图像,如果它是一个很好的解决方案 .
至于生成base64编码:
http://b64.io/
http://www.motobit.com/util/base64-decoder-encoder.asp(上传)
http://www.greywyvern.com/code/php/binary2base64(来自链接下面的小教程)
This answer is out of date and shouldn't be used.
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应用程序有益 . 您应该根据具体情况衡量使用情况 - 我并不主张数据URI应该在移动Web应用程序的任何地方使用 .
请注意,移动浏览器对可缓存文件的总大小有限制 . iOS 3.2的限制相当低(每个文件25K),但是对于较新版本的Mobile Safari,它们会变得更大(100K) . 因此,在包含数据URI时,请务必密切关注文件总大小 .
http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/
如果您仅引用该图像一次,我认为将其嵌入您的CSS文件中没有问题 . 但是,一旦您使用多个图像或需要在CSS中多次引用它,您可以考虑使用单个图像映射,然后可以裁剪单个图像(请参阅CSS Sprites) .
我建议的一件事是有两个单独的样式表:一个是常规样式定义,另一个是包含base64编码的图像 .
当然,您必须在图像样式表之前包含基本样式表 .
通过这种方式,您可以确保将常规样式表下载并尽快应用到文档中,同时您可以从减少的http请求和其他数据中获益 - uris为您提供 .
在GZipped之后,Base64在图像尺寸上增加了大约10%,但是在移动设备方面,这超过了它的优势 . 由于响应式网页设计存在整体趋势,因此强烈建议使用 .
W3C还推荐这种移动方法,如果你在rails中使用资产管道,这是压缩你的css时的默认功能
http://www.w3.org/TR/mwabp/#bp-conserve-css-images
我不同意为非编辑图像创建单独的CSS文件的建议 .
假设图像用于UI目的,它是表示层样式,如上所述,如果你正在做移动用户界面,将所有样式保存在一个文件中绝对是一个好主意,因此可以缓存一次 .
在我的例子中,它允许我应用CSS样式表而不必担心复制相关图像,因为它们已经嵌入到内部 .
我试图创建一个CSS / HTML分析工具的在线概念:
http://www.motobit.com/util/base64/css-images-to-base64.asp
它可以:
下载并解析HTML / CSS文件,提取href / src / url元素
检测URL上的压缩(gzip)和大小数据
比较原始数据大小,base64数据大小和gzip压缩base64数据大小
将URL(图像,字体,css,...)转换为base64数据URI方案 .
计算数据URI可以保留的请求数
欢迎提出意见/建议 .
安东尼
你可以用PHP编码:)
Source
为Sublime Text 2的用户带来一点点,有一个插件给出了我们在ST中加载图像的base64代码 .
名为Image2base64:https://github.com/tm-minty/sublime-text-2-image2base64
PS:永远不要保存插件生成的这个文件,因为它会覆盖文件并会破坏 .
感谢此处的信息 . 我发现这种嵌入很有用,特别是对于移动设备,特别是嵌入式图像的css文件被缓存 .
为了让生活更轻松,因为我的文件编辑器本身没有处理这个问题,我为笔记本电脑/桌面编辑工作做了几个简单的脚本,在这里分享以防它们对任何其他人都有用 . 我坚持使用php,因为它直接和非常好地处理这些事情 .
在Windows 8.1下说---
...作为管理员,您可以在路径中 Build 批处理文件的快捷方式 . 该批处理文件将调用php(cli)脚本 .
然后,您可以右键单击文件资源管理器中的图像,然后发送到批处理文件 .
Ok Admiinstartor请求,并等待黑色命令shell窗口关闭 .
然后只需将剪贴板中的结果粘贴到文本编辑器中......
要么
以下应适用于其他操作系统 .
批处理文件......
并且在您的路径中使用php.exe,它会调用php(cli)脚本...
据我所研究,
使用:1 . 当你使用svg sprite时 . 2.当您的图像尺寸较小(最大200mb)时 .
不要使用:1 . 当你是更大的图像 . 2.图标为svg's . 因为它们已经很好并且在压缩之后压缩了 .