嵌入Base64图像

564

纯粹出于好奇，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...);
}

html base64 browser

— 潘邦
source

为什么不设置带有示例的页面，我们将进行所有操作并进行实际测试，并在此处进行报告

— Nir Levy，2009年

64位仅需6个字符2 ^ 6。根据编码类型的不同，文本字符串每个字符最少要有8位。您至少损失了25％的效率。...我的快速测试显示出大约30％的损失。

更重要的是，您可能失去了有效缓存内容的能力。

— 2013年

@BrianHaak“巨大”什么也没说。在过去的几年中，我已经在ReactJs上多次使用base64图像，并且根本没有渲染问题。请提供一些尺寸。

— Lukas Liesis

@LukasLiesis我出于商业目的在Google Chrome中进行了测量，因此此处没有公开报告。渲染唯一的图像可能没问题，但是您必须考虑到缓存根本不起作用。在React.js中，完成完整的重新渲染部分（例如，导航更改）非常关键。

— Brian Haak

Answers:

361

更新时间：2017-01-10

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

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

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

基于壁虎，例如Firefox，SeaMonkey，XeroBank，Camino，Fennec和K-Meleon

Konqueror，通过KDE的KIO从站输入/输出系统

Opera（包括Nintendo DSi或Wii等设备）

基于WebKit，例如Safari（包括iOS上的Safari），Android的浏览器，Epiphany和Midori（WebKit是Konqueror的KHTML引擎的派生产品，但Mac OS X不共享KIO架构，因此实现方式有所不同）以及Webkit /基于铬的，例如Chrome

三叉戟

Internet Explorer 8：出于安全原因，Microsoft已将其支持范围限制为某些“不可导航”的内容，其中包括担心数据URI中嵌入的JavaScript可能无法被脚本过滤器（如基于Web的电子邮件客户端使用的脚本过滤器）解释。在版本8 [3]中，数据URI必须小于32 KiB。

仅以下元素和/或属性[4]支持数据URI：

对象（仅图像）

img

输入类型=图像

链接

接受URL的CSS声明，例如background-image，background，list-style-type，list-style等。

Internet Explorer 9：Internet Explorer 9没有32KiB限制，并且允许使用更广泛的元素。

TheWorld浏览器：IE Shell浏览器，它内置了对Data URI方案的支持

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

— 菲利普·格伯
source

嗨，菲利普，IE8中32 KiB大小限制是否有任何解决方法？IE7和IE6是否支持base64？如果没有，是否有任何解决方法（没有任何大小限制）？如果是，是否有尺寸限制？如果是，是否有任何解决方法？

— SexyBeast

研究一下，也许会有所帮助：phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under

标准说什么吗？一定要投票，以获得良好答案更新=）。

— 西罗Santilli郝海东冠状病六四事件法轮功2014年

IE8限制-我发现IE8的嵌入式图像最大字符数限制为32,768（每个Microsoft），而我的嵌入式图像只有35,000多。因此，当background-imageCSS属性（url(...embedded image）尝试在IE8中加载时，由于超出了字符数限制，class因此未加载包含该属性的整个内容。我没有办法解决此问题，我恢复到img超出最大值的嵌入式图像，并正确加载了我的图像。

— id.ot

大多数现代的桌面浏览器（例如Chrome，Mozilla和Internet Explorer）都支持将图像编码为数据URL。但是在某些移动浏览器中显示数据URL会出现问题：Android Stock浏览器和Dolphin浏览器不会显示嵌入式JPEG。

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

选中“格式化为数据URL”选项以格式化为数据URL。

— 布里格·阿德
source

您不需要在线工具即可编码为base64。相反，您可以在Linux或Mac OS X上使用base64命令行工具：echo“ data：image / jpeg; base64，” $（cat file.jpg | base64）

— cstroe

我可以使用（http://caniuse.com/#feat=datauri）显示对主要浏览器的支持，而IE上的问题很少。

— 基尔
source