What Is Base64 Image Encoding and When Should You Use It?

What Base64 is

Base64 is a way of writing binary data, like the bytes of a picture, using only ordinary text characters. It is not compression and it is not encryption. It simply turns a file into a long string of letters, numbers and a few symbols that can travel safely inside text.

What a data URI looks like

When Base64 is used for an image in a web page, it is wrapped in a data URI, which begins with the file type, such as data:image/png;base64,, followed by the encoded text. You can use it where you would normally put a link to an image.

When it is useful

• Tiny icons embedded directly in a stylesheet.
• HTML email templates that need images without separate files.
• Single-file demos and offline pages.
• JSON and APIs that only accept text.

When it is a bad idea

• Large images. Base64 makes data about a third bigger.
• Images used on many pages. A normal image file can be cached and reused, but an embedded one is repeated in every page.
• Anything where speed matters. Big encoded strings slow down page parsing.

How to do it

1. Resize or compress the picture first to keep it small, with the resize and compress tools.
2. Open the image to Base64 tool and drop the picture in.
3. Copy the data URI.
4. Paste it into an img tag’s src or into a CSS background-image: url(...).

Alternatives

For many small images, a sprite sheet loads them as one file. For simple icons, inline SVG is often smaller and sharper than any encoded bitmap.

A size rule of thumb

As a rough guide, embedding makes sense when the image is only a few kilobytes, such as a small icon. Once it reaches tens of kilobytes, a separate file is nearly always better, because browsers can cache it and the page markup stays light and readable.

Security note

Because Base64 is not encryption, anyone can decode it. Never use it to hide private information.

Frequently asked questions