纯粹出于好奇,Base64图像嵌入在哪些浏览器中工作?我指的是this。
我知道对于大多数事情来说,这通常不是一个好的解决方案,因为它增加了相当多的页面大小 - 我只是好奇。
一些例子:
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...);
}
更新: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
- Trident
- Internet Explorer 8:出于安全考虑,微软将其支持限制在某些"非导航"内容上,包括担心嵌入数据URI的JavaScript可能无法被脚本过滤器解释,比如基于网络的电子邮件客户端使用的脚本过滤器。在第8版中,数据URI必须小于32 KiB[3]。
- 数据URI只支持以下元素和/或属性[4]。
- 对象(仅指图像
- img
- input type=image
- link
- 接受URL的CSS声明,如background-image、background、list-style-type、list-style和类似的声明。
- Internet Explorer 9:Internet Explorer 9没有32KiB的限制,允许在更广泛的元素。
- TheWorld浏览器。一个IE外壳浏览器,它内置了对数据URI方案的支持
http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support</a>。
大多数现代桌面浏览器,如Chrome、Mozilla和Internet Explorer都支持编码为数据URL的图像。但在一些移动浏览器中显示数据URL会有问题。Android Stock Browser和Dolphin Browser不会显示嵌入的JPEGs。
我建议你使用以下工具进行在线base64编码/解码。
勾选"格式化为数据URL"选项,以格式化为数据URL。