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.
Can I use (http://caniuse.com/#feat=datauri) shows support across the major browsers with few issues on IE.
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- How can you encode a string to Base64 in JavaScript?
- Decode Base64 data in Java
- Is embedding background image data into CSS as Base64 good or bad practice?
- Binary Data in JSON String. Something better than Base64
- How can I convert an image into Base64 string using JavaScript?
- How can I do Base64 encoding in Node.js?
- How to display Base64 images in HTML
- How do I encode and decode a base64 string?
- Creating a BLOB from a Base64 string in JavaScript
background-imageCSS property (url(...embedded image) attempted to load in IE8, because the character limit had been exceeded, the entireclassthat contained the property was not loaded. I did not persue a fix for this, I reverted back toimgfor embedded images that exceeded the max and my images loaded appropriately.base64is not supported by some mailing services likegmail. This makes sendingmarkdown emailsannoying af.