I recently discovered this incredible tool from Arbitrary.io to help you instantly encode images to Data URI's. If you ever need to encode an image, an SVG or a file, all you have to do is right-click it and you're done.

Why Data URI's?

So far, I've found Data URI's to be useful in three different scenarios:

  1. Performance. As a product owner, I like for the logo to my website to be the first thing that loads. If I load the actual image as a Data URI, it will never fall victim to page delays, poor connectivity or most of those network issues.

  2. You've been asked to create a simple HTML web page without having to spin up a entire server or service. For example, suppose you wanted to create a single page HTML file and you didn't want to upload your images to AWS, Heroku or Openshift. In this scenario, just pasting the image into the HTML file will work brilliantly.

  3. Sometimes you'll have to store something sensitive like a QR code image and you'd rather not have to deal with creating permissions, access keys, authentication, etc. In this instance, you might want to store the image as a string and publish it to your database.

Getting Started

All you have to do is download and install Source

Format

Here's what the format of a Base64 image looks like.

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Resources