Image to Base64

Turn an image into text you can embed

Converting an image to Base64 turns the file into a long string of text. You can then embed it directly in a web page or stylesheet as a data URI, for example <img src="data:image/png;base64,iVBOR...">, put it in a JSON payload, or store it in a text field, with no separate image file needed.

Upload an image and copy the encoded result. The tool gives you the raw Base64 only, so add the data:image/png;base64, prefix (with the right image type) yourself when you build a data URI. It's a common trick for small icons, logos in HTML email signatures, placeholder images and assets in single-file demos.

There's a trade-off: Base64 makes the data about a third larger than the original file, and embedded images can't be cached separately by the browser. Use it for small images and keep large photos as normal files.

How to use the image to base64

1. Choose the image file from your device.
2. Let the tool encode it.
3. Copy the Base64 output.
4. Paste it into your HTML src, CSS url(), JSON or code.

Examples

A tiny PNG

Input: A 69-byte, 1×1 pixel PNG

Output:

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mPonL4bAAOIAdw0rRDJAAAAAElFTkSuQmCC

92 characters of Base64, about a third more than the 69-byte file.

Using the result in HTML

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

Add the prefix that matches the file type: image/png, image/jpeg, image/gif, image/webp or image/svg+xml.

Common uses

• Embedding small icons and logos directly in HTML or CSS.
• Including images in single-file HTML demos and prototypes.
• Sending images inside JSON to an API that expects Base64.
• Building email templates (note that some email apps block data-URI images).
• Storing small images in databases or config files.

Tips and things to know

• Optimize the image first with the image optimizer; a smaller file means a much shorter string.
• Base64 is best for images under a few kilobytes. Larger images load faster as normal cached files.
• Gmail and some other clients don't display data-URI images in emails. Host important email images instead.
• Check the result by pasting it into Base64 to image.

Edge cases and limitations

• Uploads are limited by the site's maximum file size; the tool shows an error above it.
• The output is one long line with no breaks, which is what data URIs need.
• SVG files are text already. For SVG you can often skip Base64 and embed the URL-encoded SVG directly, which is shorter.

Frequently asked questions

What is a data URI?

It's a URL that contains the file's data itself, like data:image/png;base64,... Browsers display it just like a linked image.

Does Base64 make images bigger?

Yes, by about 33%, because every 3 bytes become 4 characters.

Is Base64 good for website performance?

For tiny images it can save an HTTP request. For larger images it usually hurts, because the page HTML or CSS gets heavier and can't be cached separately.

Which image formats are supported?

Common web formats such as JPG, PNG, GIF, WebP and SVG.

Related tools

• Base64 to Image: Decode Base64 input to an image.
• Image optimizer: Compress and optimize images for a smaller image size but still high quality.
• Base64 encoder: Encode any string input to Base64.
• Color picker: The easiest way to select a color from the color wheel and get the results in any format.
• Exif reader: Upload a image and extract the data out of it.