Convert images to data URLs at the command line (Mac OS)

Converting images to data URLs using the Mac OS command line is a fun demonstration of the command line’s capabilities.

To convert an image file to a data URL, we can use the following shell function:

function img-data() {
  TYPE=$(file --mime-type -b $1)
  ENC=$(base64 $1)
  echo "data:$TYPE;base64,$ENC"
}

What follows is a walkthrough of what data URLs are, why they’re useful and how to compose the file and base64 command line utilities to build the img-data shell function.

What’s a data URL & why should I use them?

Data URLs (formerly known as “data URIs”) are URLs that use the data: scheme. In other words, they start with data:, much like websites use the HTTP(S) scheme and therefore you go to https://codewithhugo.com, you can use a data URL and load data:image/jpeg;base64,base64-encoded-value.

You can read more about data URLs on MDN.

If we decompose the data URL, you’ll see the following sections:

• the scheme, data:: all data URLs start with data:
• the mediatype: a MIME type string eg. image/jpeg, image/png, image/svg
• the base64 token for non-textual (ie. binary, eg. image data) data: ;base64
• the data itself prefixed by a ,

Putting all the above together for an example of data:image/jpeg;base64,base64-encoded-value.

data: is the scheme, image/jpeg is the MIME type string, ;base64 denotes base64-encoded binary data, , precedes the contents, base64-encoded-value is the contents of the image.

Note that “base64-encoded-value” is not a valid base64 encoded image.

Data URLs are especially useful when you want to embed images into your webpage either when using an img tag (you would use the data URL under the src attribute) or when using it in styles (eg. you can use a data URL using the url() CSS function).

Converting an image to a data URL

In order to convert an image to a data URL, we’ll need to get the MIME type of the file and base64 encode the contents in order to build a data URL.

To get the MIME type of a file, we can use the file command line tool. We use the --mime-type option (to read the MIME type) and the -b option (b for “brief”) which will suppress the filename.

file --mime-type -b <path-to-file>

To base64 encode an image file we can use the base64 command:

base64 <path-to-file>

Putting it all together, we can create a shell function that reads 1 argument ($1).

We store the MIME type string in a TYPE variables using TYPE=$(file --mime-type -b $1).

We get the base64 contents of the file and store them in an ENC variable (for “encoded”) using ENC=$(base64 $1).

To build up our data URL, we start with data:, followed by the value of TYPE ($TYPE in shell), then ;base64, and finally the value of ENC ($ENC in shell).

Which gives us: echo "data:$TYPE;base64,$ENC".

The img-data function looks as follows:

function img-data() {
  TYPE=$(file --mime-type -b $1)
  ENC=$(base64 $1)
  echo "data:$TYPE;base64,$ENC"
}

Photo by Markus Spiske on Unsplash.