Image to Base64 Encoder

How the encoder works

1. Add one image. Drop it on the box or click the box to pick a file. You see a preview and four facts: the file name, the file size, the MIME type and the size in pixels.
2. Pick the output. "Include data URI prefix" is on by default. "Wrap in <img> tag" is off. The text box updates as soon as you change either one. While the <img> option is on, the prefix stays on and cannot be turned off.
3. Copy or save it. Click Copy to Clipboard, or Download as .txt. The text file is named after your image, for example logo_base64.txt.

Under the text box you see two numbers. String length is the number of characters in the output. Decoded size is the size of the image data inside the Base64 text, so it should match your file size.

The three kinds of output

The MIME type in the prefix comes from your browser, based on the file type. If the browser gives none, the tool works it out from the file name or content. A PNG gets image/png, a JPG gets image/jpeg and an SVG gets image/svg+xml. Every PNG starts with iVBORw0KGgo and every JPG with /9j/, which helps you spot the type later.

An <img> tag with only raw Base64 would not show in a browser. So when you turn on the <img> option, the tool turns the prefix on and locks it. When you turn the <img> option off again, your earlier prefix choice comes back.

The tool does not write CSS for you, but the prefixed output drops straight into a rule like this:

.icon-search {
  background-image: url("data:image/png;base64,iVBORw0KGgo…");
}

Base64 makes the data about 33% bigger

Base64 turns every 3 bytes of the file into 4 text characters. So the text is 4/3 the size of the file. The exact number is 4 × (file bytes ÷ 3, rounded up), plus the prefix.

Example: a 30 KB PNG is 30,720 bytes. 30,720 ÷ 3 = 10,240, and 10,240 × 4 = 40,960 characters. Add the 22 characters of data:image/png;base64, and you get 40,982 characters, about 40 KB of text. The page that holds it gets about 10 KB heavier than a linked file would be.

Gzip or Brotli compression on your web server wins back part of this extra size, but not all of it.

When inlining is a good idea

• Small icons and simple graphics. An image of a few KB, used in one place, saves the browser a separate request. That is the classic use.
• Single-file pages. A report, demo or offline page that must work as one file, with no image files next to it.
• APIs that take images as text. Many JSON APIs expect plain Base64. Turn the prefix off for these.

When a normal image file is better

• Photos and large images. The HTML or CSS file gets much heavier. The browser must download all that text before it can use the rest of the file. An image inside a CSS file is worse, because browsers wait for CSS before they show the page.
• Images used on many pages. A normal image file is downloaded once and then cached. An image inlined in HTML is downloaded again with every page that contains it.
• Images that change often. Every change to the image means a change to the HTML or CSS file too.
• HTML email. Many email programs, including Gmail, do not show data URI images. Link to an image hosted on a server instead.

A common rule is to inline only images of a few KB or less. If you do inline a bigger image, shrink it first with Resize Image or Compress Image. This tool encodes the file exactly as it is and does not make it smaller.

A note on SVG

SVG files are already text. For SVG icons, Base64 is often not the smallest choice. You can put the SVG code in a data URI after URL-encoding it, for example data:image/svg+xml,%3Csvg …. That is usually shorter than Base64. This tool only makes Base64. You can still use its output for SVG, and it works fine.

Limits

• One image at a time.
• There is no size limit, but big files make very long text. A 5 MB photo becomes about 7 million characters, and the text box can get slow.
• It only goes one way. It does not turn Base64 back into an image file.
• Sometimes the browser gives a file no type, for example when the name has no ending. Then the tool finds the type from the file ending or from the first bytes of the file. If it still cannot tell, or the file is not an image, a message says so.