Skip to content

Creating a Data URI from an image using your browser’s Developer Tools

What is a Data URI?

Data URIs (also called Data URLs) are a scheme for encoding data using a base64 encoding that can be included in your HTML in place of an external file.

A use case for this is embedding an image in HTML without needing to the image file. This saves on network requests. This might not be as important with HTTP/2, but can still a useful.

Creating a Data URI in Firefox

I was working on a page in Firefox the other day and came across a feature I’d forgotten was there. You can create a Data URL from any image on the page using the Developer Tools.

To create a Data URL from an image:

  1. Open the Web Developer Tools
  2. Right click on the <img> element containing the image you want to copy.
  3. Click on the “Image Data-URL” option, in the “Copy” sub-menu.
A screenshot of Firefox's Developer Tools.  The context menu is open after the URL to an image on the page had been right-clicked on.  The "copy" sub-menu is open, showing the "Image Data-URL" option.
Copying an image to a Data URI in Firefox’s Developer Tools

Your clipboard now contains a copy of the image as a Data URI. You can use this code in the src attribute of an <img> element in place of the URI of the image.

Creating a Data URI in Chrome

In Google Chrome, the steps are slightly different.

To create a Data URL from an image:

  1. Open the Web Developer Tools
  2. In the “Network” tab, select the filename image you want to copy.
  3. In the “Preview” tab (under Network), right click on the image and choose “Copy image as data URI”
A screenshot of Google Chrome's Developer Tools.  It is open in the Network tab.  An image has been selected from the file list and the context menu is open.  The selected menu item is "Copy Image as Data URI"
Copying an image to a Data URI in Google Chrome’s Developer Tools
Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.