嵌入Base64图像

纯粹出于好奇,Base64图像嵌入在哪些浏览器中工作?我指的是这个

我意识到对于大多数事情来说,这通常不是一个好的解决方案,因为它会大大增加页面大小——我只是好奇

一些示例:

HTML:

<img alt=“Embedded Image”src=“数据:Image/png;base64,ivborw0kggoaaaansuhueugaadia…”/>

CSS:

div.image{
宽度:100px;
高度:100px;
背景图片:url(数据:image/png;base64,ivborw0kggoaaaansuhueugaadia…);
}

更新:2017-01-10

现在所有主要浏览器都支持数据URI。IE也支持从版本8开始嵌入图像

http://caniuse.com/#feat=datauri


以下web浏览器现在支持数据URI:

  • 基于Gecko,如Firefox、SeaMonkey、XeroBank、Camino、Fennec和K-Meleon
  • Konqueror,通过KDE的KIO从机输入/输出系统
  • Opera(包括任天堂DSi或Wii等设备)
  • 基于WebKit的,如Safari(包括iOS)、Android浏览器、Epiphany和Midori(WebKit是Konqueror的KHTML引擎的衍生产品,但Mac OS X不共享KIO架构,因此实现方式不同),以及基于WebKit/Chrome的,如Chrome
  • 三叉戟
    • Internet Explorer 8:出于安全原因,Microsoft将其支持限制在某些“不可导航”的内容上,包括担心嵌入在数据URI中的JavaScript可能无法被脚本过滤器(如基于web的电子邮件客户端使用的脚本过滤器)解释。在版本8[3]on,数据URI必须小于32 KiB
    • 仅以下元素和/或属性支持数据URI[4]:
      • 对象(仅限图像)
      • img
      • 输入类型=图像
      • 链接
    • 接受URL的CSS声明,例如背景图像、背景、列表样式类型、列表样式和类似内容
    • InternetExplorer9:InternetExplorer9没有32KiB限制,允许在更广泛的元素中使用
    • 世界浏览器:IE外壳浏览器,内置对数据URI方案的支持

http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

发表评论