Embedding Base64 Images

 

Purely out of curiosity, which browsers does Base64 image embedding work in? What I'm referring to is this.

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: 

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

Update: 2017-01-10

Data URIs are now supported by all major browsers. IE supports embedding images since version 8 as well.

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

Data URIs are now supported by the following web browsers:

  • 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

    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 .

    I reccomend you to use the following tools for online base64 encoding/decoding:

  • Encode to Base64 format

  • Decode from Base64 format

    • Check the "Format as Data URL" option to format as a Data URL.

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

    链接地址: http://www.djcxy.com/p/47036.html

    上一篇: Safari嵌入了SVG文档类型

    下一篇: 嵌入Base64图像