html插入base64图片,关于HTML:嵌入base64图像

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

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

一些例子：

HTML：

CSS：

div.image {

width:100px;

height:100px;

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);

}

为什么不用示例设置一个页面呢，我们都会进行真正的实时测试并在这里报告

听起来不错，我也试试。

64位只需要6个字符2^6。根据编码类型的不同，文本字符串每字符至少有8位。你至少释放了25%的效率…我的快速测试显示大约30%的损失。

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

我能用…data uris:canius.com/feat=datauri

请注意，使用现代的虚拟DOM方法，如果将图像作为src属性提供，则渲染速度会大大减慢。

@布赖恩哈克"极度地"一言不发。在过去的几年中，我曾多次使用过Base64图像和ReactJS，并且完全没有渲染问题。请提供一些测量值。

@Lukasleisis我在谷歌Chrome上做了商业测量，所以这里没有公开报告。渲染独特的图像可能没问题，但您必须考虑缓存根本不起作用。在react.js中，当它导致完整的重新渲染部件时(例如，在导航更改时)，这是非常关键的。

所有这些都能在电子邮件中嵌入图像吗？

更新：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

嗨，菲利普，IE8中的32 kib大小限制有什么解决办法吗？IE7和IE6是否支持base64？如果没有，有什么解决办法(没有任何尺寸限制)？如果是，有尺寸限制吗？如果是，有什么解决办法吗？

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

标准有什么规定吗？对正确答案更新进行一定的上投。

IE8限制-我发现IE8的嵌入图像最大字符限制为32768(每Microsoft)，而我的嵌入图像仅超过35000。因此，当background-imagecss属性(url(...embedded image试图在IE8中加载时，由于超出了字符限制，因此未加载包含该属性的整个class。我没有提出解决方法，我返回到img，以获取超过最大值的嵌入图像，并适当加载图像。

大多数现代桌面浏览器(如Chrome、Mozilla和Internet Explorer)都支持编码为数据URL的图像。但在某些移动浏览器中显示数据URL时存在问题：Android股票浏览器和Dolphin浏览器不会显示嵌入的jpeg。

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

编码为base64格式

从base64格式解码

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

你不需要在线工具来编码到base64。相反，您可以在Linux或Mac OS X:echo"data:image/jpeg；base64，"$(cat file.jpg_base64)上使用base64命令行工具。

我可以使用(http://canius.com/feat=datauri)显示对主要浏览器的支持，IE上几乎没有问题。