嵌入Base64图像

Question

纯粹出于好奇，哪些浏览器可以进行Base64图像嵌入工作？我指的是this。

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

一些例子：

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...);
}

Answer 1

更新：2017-01-10

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

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

---

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

  

  
• 基于Gecko的游戏，如Firefox，SeaMonkey，XeroBank，Camino，Fennec和K-Meleon
  
• Konqueror，通过KDE的KIO奴隶输入/输出系统
  
• Opera（包括Nintendo DSi或Wii等设备）
  
• 基于WebKit，如Safari（包括iOS），Android浏览器，Epiphany和Midori（WebKit是Konqueror的KHTML引擎的衍生产品，但Mac OS X不共享KIO架构，因此实现方式不同），如以及基于Webkit / Chromium，例如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 Browser：一个IE shell浏览器，内置支持数据URI方案
    
  

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

Answer 2

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

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

• Encode to Base64 format

• Decode from Base64 format

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

Answer 3

我可以使用（http://caniuse.com/#feat=datauri）在主要浏览器上显示支持，而IE上几乎没有问题。