Embedding Base64 Images

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

Related Contents:

  1. How do you disable browser autocomplete on web form field / input tags?
  2. How to display Base64 images in HTML
  3. What does do?
  4. Determine a user’s timezone
  5. Local Storage vs Cookies
  6. Why do browsers match CSS selectors from right to left?
  7. WebSockets vs. Server-Sent events/EventSource
  8. Auto detect mobile browser (via user-agent?) [closed]
  9. Disabled form inputs do not appear in the request
  10. css ‘pointer-events’ property alternative for IE
  11. Force browser to clear cache
  12. Why does HTML think “chucknorris” is a color?
  13. What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?
  14. What is the effect of encoding an image in base64?
  15. base64 encoded images in email signatures
  16. Display PDF within web browser
  17. Determine a user’s timezone
  18. Make page to tell browser not to cache/preserve input values
  19. How to tell if a browser is in “quirks” mode?
  20. What is use of ‘initial’ value in CSS?
  21. Browser Caching of CSS files
  22. Network-Path Reference URI / Scheme relative URLs
  23. Base64 PNG data to HTML5 canvas
  24. Base64 images to gmail
  25. How to prevent a browser from storing passwords
  26. Should I embed images as data/base64 in CSS or HTML
  27. How to add google chrome omnibox-search support for your site?
  28. issue with CSS media queries(scrollbar)
  29. How to disable CSS in Browser for testing purposes
  30. Base64 encoded image is not showing in gmail
  31. HTML 5 Favicon – Support?
  32. Is the HTML shown via ‘View Source’ different from the HTML shown in (Firebug) developer tools?
  33. How can I locate the default style sheet for a browser?
  34. Is there a way to force browsers to refresh/download images?
  35. How do I make Firefox auto-refresh on file change?
  36. How to always show the vertical scrollbar in a browser?
  37. Is there a way to tell browsers to honor the jpeg exif orientation?
  38. Why is script-src-elem not using values from script-src as a fallback?
  39. Why use data URI scheme?
  40. How do I open a URL from C++?
  41. How to force link from iframe to be opened in the parent window
  42. When to use the !important property in CSS [duplicate]
  43. Should I use px or rem value units in my CSS? [closed]
  44. Add centered text to the middle of a horizontal rule [duplicate]
  45. Best practices for styling HTML emails [closed]
  46. How to align two elements on the same line without changing HTML
  47. How to run an external program, e.g. notepad, using hyperlink?
  48. Text-align class for inside a table
  49. How To Isolate a div from public CSS styles?
  50. Is there a `pointer-events:hoverOnly` or similar in CSS?

Leave a Comment