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.
Related
I was wondering what the browser support is for Data URIs? More specifically what version of IE does this begin to be supported in?
Also is there a difference between using them in a stylesheet as a BG image or in an img tag?
Cheers!
I follow caniuse.com, it hasn't failed me yet.
http://caniuse.com/datauri
According to caniuse Chrome, Firefox, Safari, Opera, mobile browsers, and IE8+ support Data URIs.
There are many polyfills out there to convert the contents of a Canvas to a Blob. Before deciding to go with one of those, wanted to know the support of native method canvas.toBlob() on various browsers. How stable is the method in different browsers?? Couldn't find it on http://caniuse.com
Note: I am not looking for server side solutions or client-side polyfill based solutions. Interested in knowing about the stability of toBlob() API.
Updated Feb 02, 2017: canvas.toBlob is supported in Chrome since 50 as well as in Opera (Blink).
At the moment of this writing the support for toBlob() is poor (major browsers only):
Firefox has support (as currently the only one)
Chrome has intended support but there is currently an unsolved issue with it.
Internet Explorer 10-11 support it using prefix, msToBlob() but returns only PNG
Safari has an issue with status "resolved/won't fix"
Opera (Blink) has no support (method not present on canvas element)
Opera (old) has no support (method not present on canvas element)
None support toBlobHD() at this time (as with most of the HD suffixed methods).
Is there any point in using SVG Web, if I render SVG only for browsers that support SVG anyway? (IE9, Chrome, Firefox, Opera.)
Perhaps SVG Web fixes/works-around some browser inconsistencies? (E.g. different SVG API:s or browser bugs, like jQuery does)
((Background: I already use SVG Web, and wonder if I should attempt to remove it from my webapp, it's 100k minified. For IE 7 and 8, I use PNG images instead.))
Not really.
AFAIK it doesn't do that, unless you force all browsers to use the flash renderer, which seems a bit pointless.
I built a website and it looks fine in browsers like IE and Firefox, but the background does not show up in an AOL browser. Is there a special way I need to code the background image or any tips on how to make it compatible?
Firstly, AOL Browser has not existed since July 2005... However I will take AOL Browser to mean AOL Explorer for this answer, which it has been named since 2005. If I am wrong... Update your web browser (Get rid of AOL and use another mainstream one)
AOL Explorer was built on the Trident HTML renderer, AKA MSHTML... Also implemented in (You guessed it) Internet Explorer.
If you are using AOL Browser, upgrade IE to get a newer version of Trident.
Secondly, you need to include your source code so we can see if you are using Trident version compatible HTML.
So in short, provide us with the source code of your <head> tag so we can make sure you are doing it properly and upgrade IE to the newest version (or at least version 6).
Which browsers support data URIs (RFC 2397) and since which version?
Data URI support status for the five major browsers:
Chrome, supported in all versions
Firefox, supported in all versions
Internet Explorer, supported since 8.0 (however, some restrictions apply)
Opera, supported since 7.2
Safari, supported in all versions
Additionally this trick can be used to detect data URI support.
It also appears to work on many mobile browsers now. This is the best list I've found.
Every browser on this Earth supports Data URI's except the __ . (You guessed it right - IE 6,7)