Embedding Base64 Images

htmlbrowserbase64
Embedding Base64 ImagesEmbedding Base64 Images - Solution Checker - solutionschecker.com - Find the solution for any programming question. We as a solution checker will focus on finding the fastest possible solution for developers. Main topics like coding, learning.

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

Solution 1

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

Solution 2

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:

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

Solution 3

Can I use (http://caniuse.com/#feat=datauri) shows support across the major browsers with few issues on IE.

More Questions

Passing by reference in CExamples of GoF Design Patterns in Java's core librariesHow to center a "position: absolute" elementSending email through Gmail SMTP server with C#What is the LD_PRELOAD trick?How to convert strings into integers?Convert a string representation of a hex dump to a byte array using Java?Should 'using' directives be inside or outside the namespace?Create a file from a photo URI on AndroidWhat is the difference between String and string in C#?console.log() async or sync?Is there a unique Android device ID?Why does this PDO statement silently fail?Building a fat jar using mavenAndroid:java.lang.OutOfMemoryError: Failed to allocate a 23970828 byte allocation with 2097152 free bytes and 2MB until OOMHow do I iterate over the words of a string?What is the reason for "X is not recognized as an internal or external command, operable program or batch file"?How to detect if multiple keys are pressed at once using JavaScript?Single line with multiple commands using Windows batch fileHow does the 'binding' attribute work in JSF? When and how should it be used?