How to Base64 Encode an Image in Your Browser (Safe & Private)

When you Base64 encode an image, its binary data becomes a string of ASCII characters that can be embedded directly inside HTML, CSS, or JSON. Doing it in your browser rather than on a remote server keeps the file on your machine and skips the upload. This guide shows how to Base64 encode image files in the browser, when the result suits small assets like icons, logos and CSS backgrounds, and how to do it safely.

How do I Base64 encode an image in my browser?

Open a client-side encoder, drag your image file into the drop zone, and the browser uses the FileReader API to read the file as a Data URL. The output is a Base64 string you can copy and paste into your HTML or CSS. Nothing ever leaves your device, which makes it safe and private.

What Base64 encoding does

Base64 is a binary-to-text encoding scheme that represents binary data using 64 printable ASCII characters (A-Z, a-z, 0-9, plus + and /, with = as padding). When you Base64 encode image data, you trade roughly 33% extra size for the ability to put that image anywhere text is allowed: JSON payloads, CSS files, HTML attributes or email bodies. What is Base64 encoding walks through the encoding itself.

Why encode in the browser?

Some online "image to Base64" converters upload your file to a remote server, encode it there and send back the result. Your image leaves your machine, the round trip adds time, and you have to trust the operator's privacy policy. Our Image to Base64 converter runs entirely in your tab with the JavaScript FileReader API, so there's no upload and nothing on a server to log.

Step by step: encoding an image client-side

1. Open a client-side tool

Use a converter that explicitly states it processes files locally. The InDemandTools image-to-Base64 converter runs purely in your browser. You can verify this by opening DevTools and checking the Network tab while you encode a file. You will see zero outbound requests.

2. Select or drop your image

Our converter accepts PNG, JPG, GIF, WebP, SVG and ICO files up to 5 MB. The browser reads the file via FileReader.readAsDataURL(), which returns a string already prefixed with the correct MIME type, like data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA....

3. Copy the output

The converter gives you four versions, each with its own copy button: the bare Base64 string, the full Data URI, a CSS background-image line and an HTML <img> tag that uses the file name as its alt text. For plain text, use the general-purpose Base64 encoder/decoder.

The result is only as small as the file you start with, so resize the image to the size it will be displayed at first. A 512 px logo shown at 64 px carries far more bytes than it needs; the image resizer fixes that before you encode.

Worked example: image to Base64 in numbers

Here is a complete, working data URI for a 1 × 1 pixel transparent PNG. The file is 68 bytes, its Base64 string is 92 characters, and with the 22-character data:image/png;base64, prefix the whole data URI is 114 characters:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNgAAIAAAUAAen63NgAAAAASUVORK5CYII=

Every PNG's Base64 starts with iVBORw0KGgo, because every PNG file starts with the same eight bytes. For larger files the length follows the formula 4 × ceil(bytes / 3):

Server compression narrows the gap on the wire. A 6,351-byte PNG icon became 8,468 Base64 characters, and gzip at level 9 brought that text down to 6,353 bytes, almost the size of the original file. The browser still has to parse the full 8,468 characters and decode them, and the bytes still can't be cached apart from the page.

When to use Base64-encoded images

Good use cases

• Small UI icons of a few KB: inlining saves an extra HTTP request.
• Email signatures, with a caveat: support for data: images varies between email clients, so test in the clients your recipients use before relying on it.
• An alternative to CSS sprites: embed a handful of decorative backgrounds directly in a stylesheet that ships with your app.
• Offline-first PWAs: bundle critical images inside cached HTML so they render without a network connection.
• Single-file HTML demos: share a self-contained .html file with no external dependencies.

When to avoid Base64

• Images larger than about 10 KB: the 33% size penalty plus the loss of separate browser caching outweighs the saved request.
• Anything used on more than one page: an external image file is cached by the browser once, while an inlined Data URL is downloaded again inside every HTML document that contains it.
• Hero images and photos: these benefit from responsive sizes with srcset, lazy loading and CDN caching, and an image whose bytes are already inside the HTML can't be lazy-loaded or cached on its own.

Using a Base64 image: HTML, CSS and JSON

A data URI goes wherever a normal image URL would. The data: syntax is defined in RFC 2397: the MIME type, ;base64, a comma, then the encoded bytes.

In HTML

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Logo">

In CSS

.hero {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
}

In JSON APIs

{ "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD..." }

How to Base64 encode an image with code

To Base64 encode image files in a build step or in bulk, a few lines of code do the same job as the converter. In the browser, FileReader.readAsDataURL() is the same call our converter uses:

// JavaScript: a file chosen in an <input type="file">
const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.onload = () => console.log(reader.result);  // "data:image/png;base64,iVBORw0KGgo..."
reader.readAsDataURL(file);

// JavaScript: an image URL on your own site
const blob = await (await fetch('/images/logo.png')).blob();
reader.readAsDataURL(blob);

Fetching an image from another domain only works if that server allows it with CORS headers. On the command line and in other languages:

# Python
import base64
with open("logo.png", "rb") as f:
    b64 = base64.b64encode(f.read()).decode("ascii")
print("data:image/png;base64," + b64)

# Linux (GNU coreutils): -w 0 turns off line wrapping
base64 -w 0 logo.png

# PowerShell
[Convert]::ToBase64String([IO.File]::ReadAllBytes("C:\images\logo.png"))

# PHP
echo 'data:image/png;base64,' . base64_encode(file_get_contents('logo.png'));

Without -w 0, the Linux base64 command breaks its output into 76-character lines, and those line breaks will break a data URI pasted into HTML or CSS. The Python, PowerShell and PHP versions print the Base64 string only, so add the data:image/png;base64, prefix yourself (with the right MIME type) when you need a data URI.

Privacy and security considerations

Browser-based encoding is the privacy-safe default because the file bytes never leave your device. A few things still apply. Base64 is encoding, not encryption: anyone who sees the string can decode it back to the original image, so a Data URL in a public page is the same as publishing the file. And a Content Security Policy can block inline images. Images, including CSS background images, are governed by the img-src directive (CSP Level 3), so if your site sends a CSP header, img-src must list data: before inline images will load.

Frequently asked questions

Does Base64 encoding compress my image?

No, quite the opposite. Base64 increases file size by roughly 33% because it uses 4 ASCII characters to represent every 3 bytes of binary data. Compress your image (for example with our image compressor) before encoding, never after.

Is it safe to Base64 encode image files with private content in the browser?

Yes, as long as the encoder runs entirely client-side. Check your browser's Network tab: a true client-side tool makes no outbound requests when you drop a file. The InDemandTools image-to-Base64 converter works this way.

Can I decode a Base64 string back into an image?

Yes, but not with our Base64 decoder, which decodes to text and reports image bytes as invalid. To view the image, put the full Data URI in the src of an <img> tag. To save it as a file, remove the data:image/png;base64, prefix and decode the rest with a command such as base64 -d image.txt > image.png on Linux.

Why is my CSS background showing as a broken link when using Base64?

Three common causes: a missing or incorrect MIME type prefix (data:image/png;base64,), an unquoted url() value containing special characters, or a Content Security Policy blocking data: sources. Wrap the value in double quotes and confirm your CSP allows data: in img-src, which covers CSS background images too.

Does Base64 work for SVG files?

Yes, but for SVGs you usually get smaller output by URL-encoding the markup instead of Base64-encoding it. SVG is already text, so the Base64 step just inflates it. A URL encoder percent-encodes the characters that would otherwise break the url() value.

Will inlined Base64 images hurt my page speed score?

For very small assets (a couple of KB), inlining saves a request and rarely hurts. For anything larger, you lose separate browser caching and make the HTML or CSS heavier, which usually costs more than the request you saved. Measure both versions with Lighthouse before committing.

Checklist before you inline an image

• The file is small: a few KB, an icon or logo rather than a photo. Compress it first; compressing images in the browser without losing quality covers how.
• It appears on one page, or only in one stylesheet that is cached anyway.
• The data URI starts with the right MIME type, such as data:image/png;base64, or data:image/svg+xml;base64,.
• The string has no line breaks in it.
• Your Content Security Policy allows data: in img-src.
• The image isn't private: anyone who can see the page source can decode it.

Use the image-to-Base64 converter for images and the general Base64 tool for text. If you're choosing between Base64 and hex for other binary data, see Base64 vs hex encoding.