Convert an image to Base64

How to convert an image to Base64

What is Base64 and when should I use it?

Base64 turns binary data, like an image, into plain text made of letters, numbers, + and /. A data URI wraps that text with the file type (for example data:image/png;base64,…) so a browser can display it without downloading a separate file.

It's handy for small images: icons in a stylesheet, a logo in an HTML email signature, placeholder images, images inside JSON or API payloads, and single-file HTML pages. Because the image travels inside the code, there's one fewer network request.

When not to use Base64

Base64 makes files about 33% larger, and an embedded image can't be cached separately by the browser — it's downloaded again with every copy of the page or stylesheet. For photos and anything over roughly 10 KB, a normal image file is faster. If your image is large, compress it first or use a regular file instead.

Using the output

• HTML: <img src="data:image/png;base64,…" alt="…">
• CSS: background-image: url("data:image/png;base64,…");
• Markdown: ![alt](data:image/png;base64,…) (support varies by platform)

Frequently asked questions