Html 嵌入 Base64 图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1207190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Embedding Base64 Images
提问by S Pangborn
Purely out of curiosity, which browsers does Base64 image embedding work in? What I'm referring to is this.
纯粹出于好奇，Base64 图像嵌入适用于哪些浏览器？我指的是这个。
I realize it's not usually a good solution for most things, as it increases the page size quite a bit - I'm just curious.
我意识到这对于大多数事情来说通常不是一个好的解决方案，因为它会大大增加页面大小 - 我只是很好奇。
Some examples:
一些例子：
HTML:
HTML：
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
CSS:
CSS：
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
采纳答案by Philippe Gerber
Update: 2017-01-10
更新：2017-01-10
Data URIs are now supported by all major browsers. IE supports embedding images since version 8 as well.
现在所有主要浏览器都支持数据 URI。从版本 8 开始，IE 也支持嵌入图像。
http://caniuse.com/#feat=datauri
http://caniuse.com/#feat=datauri
Data URIs are now supported by the following web browsers:
以下 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
- 基于 Gecko，例如 Firefox、SeaMonkey、XeroBank、Camino、Fennec 和 K-Meleon
- Konqueror，通过 KDE 的 KIO slaves 输入/输出系统
- Opera（包括 Nintendo DSi 或 Wii 等设备）
- 基于WebKit，例如Safari（包括iOS）、Android的浏览器、Epiphany和Midori（WebKit是Konqueror的KHTML引擎的衍生，但Mac OS X不共享KIO架构，所以实现不同），以及Webkit /Chromium-based，例如 Chrome
- 三叉戟
- Internet Explorer 8：出于安全原因，Microsoft 限制了对某些“不可导航”内容的支持，包括担心嵌入在数据 URI 中的 JavaScript 可能无法被脚本过滤器（例如基于 Web 的电子邮件客户端使用的过滤器）解释。在版本 8[3] 中，数据 URI 必须小于 32 KiB。
- 数据 URI 仅支持以下元素和/或属性 [4]：
- 对象（仅图像）
- 图片
- 输入类型=图像
- 关联
- 接受 URL 的 CSS 声明，例如 background-image、background、list-style-type、list-style 等。
- Internet Explorer 9：Internet Explorer 9 没有 32KiB 限制并且允许在更广泛的元素中使用。
- TheWorld 浏览器：内置支持 Data URI 方案的 IE shell 浏览器
http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support
http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support
回答by Brig Ader
Most modern desktop browsers such as Chrome, Mozilla and Internet Explorer support images encoded as data URL. But there are problems displaying data URLs in some mobile browsers: Android Stock Browser and Dolphin Browser won't display embedded JPEGs.
大多数现代桌面浏览器（例如 Chrome、Mozilla 和 Internet Explorer）都支持将图像编码为数据 URL。但是在某些移动浏览器中显示数据 URL 存在问题：Android Stock Browser 和 Dolphin Browser 不会显示嵌入的 JPEG。
I reccomend you to use the following tools for online base64 encoding/decoding:
我建议您使用以下工具进行在线base64编码/解码：
Check the "Format as Data URL" option to format as a Data URL.
选中“格式化为数据 URL”选项以格式化为数据 URL。
回答by kehers
Can I use (http://caniuse.com/#feat=datauri) shows support across the major browsers with few issues on IE.
Can I use ( http://caniuse.com/#feat=datauri) 显示对主要浏览器的支持，在 IE 上几乎没有问题。
