1

I have a few questions on using base 64 encoding in the src of an <img /> or as the value for a background in CSS?

What does the browser support look like for it? Or does browser support depend on the type of file that it actually is?

Secondly, what are the benefits of base 64 encoding of small ( in file-size / not complex ) files?

Lastly, are there any drawbacks? I heard not to use it for complex or larger files.

Tieson T.
  • 20,774
  • 6
  • 77
  • 92
IMUXIxD
  • 1,223
  • 5
  • 23
  • 44
  • See this other [stackoverflow](http://stackoverflow.com/questions/5258057/images-in-css-or-html-as-data-base64) answer, duplicate ? – soyuka Mar 17 '13 at 17:11
  • @soyuka sorry, i didn't mean to post a duplicate and I didn't find that question in my search. – IMUXIxD Mar 17 '13 at 22:23

1 Answers1

2

I've been using Base64 URIs for a while - seems like all relevant browsers understand the protocol: http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

One of the biggest caveats is that you can (depending on context; see @Jeff Power's note below) lose caching of images when they're Base64-encoded, so it's not recommended for larger files and/or apps that are meant to primarily target mobile devices.

Tieson T.
  • 20,774
  • 6
  • 77
  • 92
  • 2
    You don't lose caching if you us it as a background image in a stylesheet that will be cached. Base-64 encoded images are generally a little larger than an actual image so make sure you're minifying your css and combining it into one file. – Jeffpowrs Mar 17 '13 at 17:43
  • Thank you, this educated me and helped me understand exactly what I was trying to understand. – IMUXIxD Mar 17 '13 at 22:23
  • @JeffPowers Ah, okay. Thank you for sharing. I'll make it a css background when caching / multiple-visits to the page are required. – IMUXIxD Mar 17 '13 at 22:25