嵌入Base64图像

纯粹出于好奇，哪些浏览器支持Base64图像嵌入?我指的是这。

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

一些例子:

HTML:

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

CSS:

div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
672727 次浏览
小开
最佳答案

更新:2017-01-10

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

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

以下网页浏览器现在支持数据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 / chromium的，如Chrome
    • <李>三叉戟
    • Internet Explorer 8:出于安全原因，微软限制了对某些“不可导航”内容的支持，包括担心嵌入数据URI中的JavaScript可能无法被脚本过滤器(如基于web的电子邮件客户端所使用的脚本过滤器)解释。在版本8[3]中，数据uri必须小于32 KiB。
    • 仅支持以下元素和/或属性[4]:
      • 对象(仅限图像)
      • img
      • 输入类型=图像
      • 链接
        • 李< / ul > < / >
      • 接受URL的CSS声明，如background-image、background、list-style-type、list-style等。
      • Internet Explorer 9: Internet Explorer 9没有32KiB的限制，并且允许使用更广泛的元素。
      • TheWorld Browser:一个IE shell浏览器，内置了对数据URI方案的支持
        • 李< / ul > < / >

# EYZ0 < / >

小开

大多数现代桌面浏览器，如Chrome, Mozilla和Internet Explorer都支持以数据URL编码的图像。但在一些移动浏览器中显示数据url存在问题:Android Stock Browser和Dolphin Browser不会显示嵌入式jpeg。

我建议您使用以下工具进行在线base64编码/解码:

检查“格式为数据URL”选项格式化为数据URL。

小开

我可以使用(http://caniuse.com/#feat=datauri)显示跨主要浏览器的支持，在IE上几乎没有问题。


提交答案