Image to Base64 Converter

About Image to Base64

Reads an image from your device and gives you its contents as Base64 text. That string can be inlined in CSS, HTML, Markdown or a JSON body when you would rather ship a picture as text than as a separate file.

How to use it

1. Stay on the Image to Base64 tab, which is already active when the page opens.
2. Click the file field under Upload Image and choose a picture from your device.
3. Wait for the preview to appear, then look in the Base64 String box for the result.
4. Press Copy to grab the string. The line below the box shows the file name and an approximate size.

A 70-byte PNG

A PNG file that is 70 bytes long

A 96-character string beginning iVBORw0KGgo and ending with ==. Every 3 bytes become 4 characters, and 70 bytes round up to 96.

When to use it

• Inlining a small icon into a stylesheet as a data URI to save one network request.
• Embedding a logo in an HTML email template that must render without external links.
• Filling an image field in a JSON test payload for an upload endpoint.
• Dropping a diagram into a Markdown or SVG file so the document stays self-contained.

Questions about Image to Base64

Does the output include the data:image prefix?

No, the prefix is removed and you get only the raw Base64. To build a data URI, put data:image/png;base64, in front of it, using the right type for your file.

How much larger is the text than the original file?

About one third larger, because three bytes always become four characters. A 30 KB image turns into a string of roughly 40 KB.

What is the size shown under the box?

It is the length of the Base64 string divided by 1024 and rounded, so it describes the encoded text rather than your original file. Expect it to be about 33 percent above the file size.

Which files does it accept?

Anything your browser identifies as an image, including PNG, JPEG, GIF, WebP, SVG and BMP. Other files are refused with the message Please upload an image file.

Is inlining a photo a good idea?

Rarely. Inline data cannot be cached separately from the page that contains it, and the extra size slows rendering. It pays off for small icons, not large photographs.

Related tools

• Base64 encoderEncode any string input to Base64.
• Base64 to ImageDecode Base64 input to an image.
• Base64 decoderDecode Base64 input to back to string.
• URL encoderEncode any string input to URL format.
• URL decoderDecode URL input to back to a normal string.
• Binary converterConvert text to binary and the other way for any string input.