How to create a data URI from an image on a Mac

A data URI is a picture pretending to be a link. Instead of pointing at a file somewhere, it carries the file inside itself — which means it works with no server, no second request and no possibility of the image going missing later.

This guide covers producing one in B64, what each part of it does, and when a data URI is the right answer.

What a data URI is made of

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg…
└─┬─┘└───┬───┘└──┬──┘└──────────┬──────────┘
  │      │       │              │
  │      │       │              └─ the Base64 payload
  │      │       └──────────────── the encoding
  │      └──────────────────────── the MIME type
  └─────────────────────────────── the scheme

The MIME type is the part people get wrong by hand, and the part that decides whether the thing renders. B64 writes it from the file's actual bytes rather than from its extension, so a mislabelled source does not become a mislabelled URI.

Make one

1. Open Encode

   Click Encode in the sidebar or press ⌘1.

2. Load the image

   Drag it in, press ⌘O to choose it, or press ⇧⌘V to use one from the clipboard.

3. Choose Data URI

   Pick Data URI from the format menu above the result. The prefix appears with the correct type already in it, and the wrapping control is disabled — a line break inside a data URI would break it.

4. Copy it

   Copy (⇧⌘C) takes the whole thing, prefix included. Paste it straight into a browser address bar to check it before you use it anywhere else.

The MIME types you will see

Where data URIs belong

• A single-file page, demo or bug report. It works from disk, with no assets folder to keep beside it.
• An HTML email. Remote images are blocked by default in most mail clients; an embedded one always appears. See embedding an image in HTML.
• A stylesheet that must be self-contained. See embedding an image in CSS.
• A small icon you never want to 404. A logo or a favicon that cannot go missing because it is not anywhere to go missing from.

And where they do not

A data URI is downloaded every time the document holding it is, cannot be cached separately, and carries the 33% Base64 overhead. For a large hero photograph on a public page, an ordinary image file wins on every measure that matters.

The line is roughly: embed the small things that must not go missing; leave the big things as files.

Getting one back to a picture

Paste the whole data URI — prefix and all — into Decode. There is no need to trim anything off the front; the prefix is read for its type and the payload is decoded. Decoding is free.

Troubleshooting

Nothing renders

In order of likelihood: the string was truncated, a line break got into it, or the declared type is wrong for the bytes. How to fix a data URI that will not load goes through each one.

It works in a browser but not in the consumer I am targeting

Check the type. Some consumers accept only a short list of image types, and a browser that sniffs the bytes will be more forgiving than a parser that does not.

I need it wrapped

You cannot wrap a data URI — a newline inside one invalidates it, which is why the control is disabled. If the destination demands wrapped lines, it wants plain wrapped Base64, not a URI.