Image to Base64

Image to Base64: Turn an Image Into Plain Text

This image-to-Base64 tool encodes an image into a text string made of letters, digits, and symbols. You can paste that string straight into HTML, CSS, or JSON, and the browser will reconstruct the original picture. Everything runs entirely in your browser with no uploads, making it fast and private — ideal for developers who need to inline small icons or thumbnails.

Inlining small images is a practical web trick: it removes an extra HTTP request, speeds up page load, and makes it easy to ship single-file apps or emails.

How Is Base64 Encoding Done?

Base64 converts binary data into ASCII text. It splits every 3 bytes (24 bits) into four 6-bit groups, each mapped to a character in the Base64 alphabet, so the encoded text is roughly 4/3 of the original length — about 1.37× larger. The image bytes are read into the browser and remapped into text by that rule, producing the Base64 string you see.

Encoding is reversible: the browser can decode the text back into the original image bytes, so the displayed image is identical to the source.

How to Use It

1. Upload or drag an image (supports JPG, PNG, WebP, and other common formats).
2. The tool immediately encodes it into a Base64 string locally.
3. Click the "Copy" button in the result box to copy the full string.
4. Paste it where you need it: an HTML <img src="data:image/png;base64,....">, a CSS background-image: url(data:...), or a JSON field.

When to Use It — and When Not To

Good fit: small icons, logos, favicons under a few KB, or any "single-file" delivery (SPAs, standalone HTML, signature emails).
Bad fit: large images or many images. Encoding makes the payload bigger, so inlining lots of large images bloats the HTML and slows loading. In that case, keep images as separate files and optimize with a CDN or caching.

Rule of thumb: inline images under ~10KB, externally link anything larger — that balances "fewer requests" against "smaller size".

How to Use the Result

Once you have the Base64 string, embed it via a data: URI. To keep pages small, run the image through our Image Compressor first, then encode it; and if you need a specific size, use our Resize & Crop tool to hit the exact pixels before inlining.

How Much Does Base64 Grow a File?

Base64 splits every 3 bytes into four 6-bit groups and maps each group to a printable character, so the encoded text is 4/3 of the original byte count, padded up to a multiple of four. That overhead is a fixed mathematical result, independent of the image content, which means it can be calculated in advance.

Base64 length for common image sizes

Original size	Bytes	Base64 characters	Growth
1 KB	1,024	1,368	1.336×
5 KB	5,120	6,828	1.334×
10 KB	10,240	13,656	1.334×
50 KB	51,200	68,268	1.333×
100 KB	102,400	136,536	1.333×
500 KB	512,000	682,668	1.333×

Note: character counts follow 4 × ceil(bytes / 3) and include the trailing padding. The growth lands at about 1.334× for every format.

Inline or Link?

Inlining removes a request but costs roughly a third more bytes and cannot be cached separately. Whether that trade is worth it depends on file size and how often the image is reused.

data URI inlining versus an external file

Dimension	Inline data URI	External image file
Extra HTTP request	0	1 (cheap under HTTP/2)
Transfer size	about 1.334×	original size
Caching	Cached with the HTML, cannot expire alone	Can be cached long-term and updated alone
First paint	Blocks HTML parsing	Can be deferred or lazy-loaded
Best for	Small icons, single-file delivery, email signatures	Regular images, anything needing caching

Length Limits and Practical Thresholds

There is no universal specification limit on data URI length; the real ceiling is set by each browser implementation. Early Internet Explorer capped it near 32 KB, while modern browsers handle megabyte-scale values. Parsing cost still grows with length, so beyond a few tens of kilobytes the saved request is usually outweighed by the extra bytes and parsing time.

Frequently Asked Questions

Why is the encoded string larger than the image? Base64 represents 6 bits per character, turning 3 bytes into 4 characters, so the output is fixed at about 1.334× the input.

What image size is worth inlining? A few kilobytes up to roughly ten is the usual band. Beyond that, the extra bytes and parsing cost exceed the benefit of removing one request.

Does encoding change image quality? No. Base64 changes only the representation; decoding returns bytes identical to the source file.

Can I encode only part of an image? The tool encodes the whole file. Crop first if you need a region, then encode the result.

Related Reading

Compressing before encoding shortens the string considerably — see the Image Compressor. To change container format first, use the Format Converter; for plain text rather than images, use the Base64 Text Encoder. More background is in our image to Base64 guide.