关于HTML:嵌入base64图像

Embedding Base64 Images

纯粹出于好奇，base64图像嵌入在哪个浏览器中工作？我指的是这个。

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

一些例子：

HTML：

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

CSS：

1
2
3
4
5

div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}

相关讨论

更新：2017-01-10

现在所有主要浏览器都支持数据URI。IE也支持嵌入8版以后的图像。

http://canius.com/feat=datauri

以下Web浏览器现在支持数据URI：

Gecko-based, such as Firefox, SeaMonkey, XeroBank, Camino, Fennec and K-Meleon

Konqueror, via KDE's KIO slaves input/output system

Opera (including devices such as the Nintendo DSi or Wii)

WebKit-based, such as Safari (including on iOS), Android's browser, Epiphany and Midori (WebKit is a derivative of Konqueror's KHTML engine, but Mac OS X does not share the KIO architecture so the implementations are different), as well as Webkit/Chromium-based, such as Chrome

Trident

Internet Explorer 8: Microsoft has limited its support to certain"non-navigable" content for security reasons, including concerns that JavaScript embedded in a data URI may not be interpretable by script filters such as those used by web-based email clients. Data URIs must be smaller than 32 KiB in Version 8[3].

Data URIs are supported only for the following elements and/or attributes[4]:

object (images only)

img

input type=image

link

CSS declarations that accept a URL, such as background-image, background, list-style-type, list-style and similar.

Internet Explorer 9: Internet Explorer 9 does not have 32KiB limitation and allowed in broader elements.

TheWorld Browser: An IE shell browser which has a built-in support for Data URI scheme

http://en.wikipedia.org/wiki/data_-uri_-scheme_web_-browser_-support