嵌入Base64图片

Question

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

- S Pangborn

---

为什么不建立一个带有实例的页面，我们可以通过实际测试并在这里报告结果。 - Nir Levy

64位仅需6个字符2^6。文本字符串每个字符至少具有8位，具体取决于编码类型，效率至少降低25％...我的快速测试显示约30％的损失。 - user656925

更重要的是，你可能会失去有效缓存你的东西的能力。 - Hut8

“tremendously”这个词并没有表达任何意思。在过去的几年中，我个人已经多次使用ReactJs与base64图像，并没有出现任何渲染问题。请提供一些具体的度量标准。 - Lukas Liesis

@LukasLiesis 我在 Google Chrome 中进行了商业目的的测量，因此这里没有公共报告。它可能适用于渲染唯一的图像，但您必须考虑到缓存根本不起作用。在 React.js 中，当它导致完全重新呈现部分时（例如在导航更改时），这非常关键。 - Brian Cannard

Answer 1

更新：2017年1月10日

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

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

---

以下网络浏览器已经支持数据URI：

• 基于Gecko的浏览器，如Firefox、SeaMonkey、XeroBank、Camino、Fennec和K-Meleon
• Konqueror通过KDE的KIO slaves输入/输出系统支持
• Opera（包括Nintendo DSi或Wii等设备）
• 基于WebKit的浏览器，如Safari（包括在iOS上的Safari）、Android浏览器、Epiphany和Midori（WebKit是Konqueror的KHTML引擎的一个派生，但Mac OS X没有共享KIO架构，因此实现不同），以及基于Webkit / Chromium的浏览器，如Chrome
• Trident
  • Internet Explorer 8：由于安全原因，微软将其支持限制为某些“不可导航”的内容，包括对数据URI中嵌入的JavaScript可能无法被脚本过滤器解释的担忧。在第8版中，数据URI必须小于32KiB [3]。
  • 仅支持以下元素和/或属性的数据URI[4]：
    • object（仅限图像）
    • img
    • input type=image
    • link
  • 接受URL的CSS声明，例如background-image、background、list-style-type、list-style等。
  • Internet Explorer 9：Internet Explorer 9没有32KiB的限制，并允许在更广泛的元素中使用。
  • TheWorld Browser：一个IE shell浏览器，它内置了对Data URI方案的支持

数据 URI 方案的 Web 浏览器支持

- Philippe Gerber

---

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

看看这个，也许会有帮助：http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ - user743489

标准有没有说什么？如果回答好，一定点赞更新 =)。 - Ciro Santilli OurBigBook.com

我发现IE8内置的图像字符限制是32768个字符（根据微软的说法），而我的内嵌图像超过了35000个字符。因此，当以background-image CSS属性（url(...embedded image)）尝试在IE8中加载时，由于超过了字符限制，包含该属性的整个类未被加载。我没有解决这个问题，我改用img标签来显示超过最大字符限制的内嵌图像，这样我的图像可以正常加载。 - id.ot

不幸的是，一些邮件服务（如Gmail）不支持base64。这使得发送markdown emails非常烦人。 - Artur Müller Romanov

Answer 2

大多数现代桌面浏览器（如Chrome，Mozilla和Internet Explorer）支持以数据URL编码的图像。但是，在某些移动浏览器中显示数据URL存在问题：Android Stock Browser和Dolphin Browser无法显示嵌入的JPEG。

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

• 将其编码为Base64格式

• 从Base64格式进行解码

勾选“以数据URL格式化”选项以将其格式化为数据URL。

- Brig Ader

---

不需要使用在线工具来进行base64编码，可以在Linux或Mac OS X的命令行中使用base64命令行工具： echo "data:image/jpeg;base64,"$(cat file.jpg | base64) - cstroe

Answer 3

我能使用 (http://caniuse.com/#feat=datauri) 来查看主流浏览器是否支持"data URI"，IE支持较好。

- kehers