Convert an image to a data URI with your browser

You probably know that you can use data URIs in just about any browser now, but how do you convert an image to a data URI? Turns out, most browsers can do it for you.

What is a data URI?

Data URIs are all the rage these days. They let you reduce HTTP requests by putting small images right in your HTML or CSS. For a full overview about what they are and how to use them, check out this post on CSS Tricks.

Here's what they look like in case you need a refresher:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAU1QTFRFNjtAQEVK////bG9zSk9T/v7+/f39/f3+9vf3O0BETlJWNzxB/Pz8d3t+TFFVzM3O1NXX7u/vUldbRElNs7W3v8HCmZyeRkpPW19j8vLy7u7vvsDC9PT1cHR3Oj9Eo6WnxsjJR0tQOD1Bj5KVgYSHTVFWtri50dLUtLa4YmZqOT5D8vPzRUpOkZOWc3Z64uPjr7Gzuru95+jpX2NnaGxwPkNHp6mrioyPlZeadXh8Q0hNPEBFyszNh4qNc3d6eHx/OD1Cw8XGXGBkfoGEra+xxcbIgoaJu72/m52ggoWIZ2tu8/P0wcLE+vr7kZSXgIOGP0NIvr/BvL6/QUZKP0RJkpWYpKaoqKqtVVldmJqdl5qcZWhstbe5bHB0bnJ1UVVZwsTF5ubnT1RYcHN3oaSm3N3e3NzdQkdLnJ+h9fX1TlNX+Pj47/DwwsPFVFhcEpC44wAAAShJREFUeNq8k0VvxDAQhZOXDS52mRnKzLRlZmZm+v/HxmnUOlFaSz3su4xm/BkGzLn4P+XimOJZyw0FKufelfbfAe89dMmBBdUZ8G1eCJMba69Al+AABOOm/7j0DDGXtQP9bXjYN2tWGQfyA1Yg1kSu95x9GKHiIOBXLcAwUD1JJSBVfUbwGGi2AIvoneK4bCblSS8b0RwwRAPbCHx52kH60K1b9zQUjQKiULbMDbulEjGha/RQQFDE0/ezW8kR3C3kOJXmFcSyrcQR7FDAi55nuGABZkT5hqpk3xughDN7FOHHHd0LLU9qtV7r7uhsuRwt6pEJJFVLN4V5CT+SErpXt81DbHautkpBeHeaqNDRqUA0Uo5GkgXGyI3xDZ/q/wJMsb7/pwADAGqZHDyWkHd1AAAAAElFTkSuQmCC">

Now I'm going to show you how to generate these URLs using a tool that every web developer has: your browser.

Chrome & Opera

This trick works in Chrome and newer versions of Opera, since they use the same rendering engine.

1. Load the page that contains your image (loading the image directly won't work) and right-click on it. Select Inspect Element.

Chrome data URIs - Step 1

2. You'll see the console appear. Now click on the value of the src attribute.

Chrome data URIs - Step 2

3. The console will switch to the Resources tab and highlight the image. Right click on it and select Copy Image As Data URL.

Chrome data URIs - Step 3

4. Now just paste it into your HTML or CSS!

Firefox

Firefox is the easiest because it works for images on a webpage as well as images loaded directly in the browser. There's also one less step compared to Chrome/Opera.

1. Load the image or the page containing your image and right click on it. Select Inspect Element.

Firefox data URIs - Step 1

2. The image will appear highlighted in the DOM. Right click on it and select Copy Image Data-URL.

Firefox data URIs - Step 2

3. Paste it into your HTML or CSS.

Safari

Safari is similar to Chrome, but the UI is a bit different. It's the same number of steps, and it won't work if you load the image directly in the browser—it has to be on a page.

1. Load the page that contains your image and right-click on it. Select Inspect Element.

Safari data URIs - Step 1

2. The console will appear with the image highlighted. Click on the value of its src attribute.

Safari data URIs - Step 2

3. The image will be shown in the console. Right click on it and select Copy Image.

Safari data URIs - Step 3

4. Paste it into your HTML or CSS.

Internet Explorer

Alas, I haven't found a way to copy an image as a data URI using IE9, 10, or 11, but you can use a free online tool instead.

A free online tool

Another easy way to generate data URIs is to use a free service. DataURL.net lets you drag and drop an image and gives you the resulting code instantly. So if you don't like the in-browser method (or if your browser doesn't support it) you're not out of luck.

Now that you know how to generate data URIs, what will you use them for?

Photo courtesy of Sam Azgor.

Author avatar

About the author

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.