Image to Base64 Converter

Convert any image file to a Base64-encoded string instantly in your browser. No server upload required.

Image to Base64 Converter tool

Loading...

Example

Input: An 800 x 600 PNG of 11.6 KB, Output Format set to Data URI (with prefix)

Result: A string starting data:image/png;base64, with a Base64 size of 15.5 KB - a 33.3% increase over the original file

Base64 writes every 3 bytes of the file as 4 text characters, so the encoded string is about one third larger than the image itself.

  1. Click the upload area or drag and drop an image file into the drop zone.
  2. The tool instantly reads the file and generates the Base64 output as a complete data URI.
  3. To get the raw Base64 string without the data URI prefix, change the Output Format option and click Reprocess.
  4. Click the Copy button to copy the output to your clipboard.
  5. Paste the Base64 string into your HTML, CSS, or JSON where an embedded image is needed.

Embedding Images as Base64 Text

This tool turns an image file into Base64 text, ready to paste into HTML, CSS or JSON. By default you get a full data URI, such as data:image/png;base64,iVBOR... that works anywhere an image URL is expected.

Base64 writes binary data using only 64 safe text characters. Every 3 bytes of the file become 4 characters, so the text is about a third larger than the image. A 12 KB icon becomes roughly 16 KB of text. The tool shows the original size, the Base64 size, the exact increase and the character count, so you can judge whether embedding is worth it.

Inline images make sense for small things: icons, a logo in an email template, or an image inside a JSON payload. The browser gets the picture without a separate request. For large photos it is a poor trade. The page gets heavier, and the image cannot be cached on its own. A good rule of thumb is to embed files of a few kilobytes and link to anything bigger.

Switch Output Format to Raw Base64 if your code adds its own prefix, then click Reprocess. Files up to 10 MB are accepted. The browser reads the file locally with the FileReader API, so nothing is uploaded. To turn text back into a picture, use Base64 to Image. If the image is large, shrink it first with the Image Compressor to keep the string short.

Sources

Frequently Asked Questions

Copy the full data URI. In HTML, put it in the src of an img tag: <img src="data:image/png;base64,..." alt="Logo">. In CSS, use it inside url(), for example background-image: url(data:image/png;base64,...). The data:image/...;base64, prefix tells the browser what kind of file it is.
Base64 stores every 3 bytes as 4 text characters, so the output is about 33% larger than the file. A 30 KB image becomes about 40 KB of text. That is the cost of fitting binary data into formats that only accept text, like HTML, CSS and JSON.
A data URI includes a prefix such as data:image/jpeg;base64, followed by the encoded data, so a browser can use it directly as an image source. Raw Base64 is just the encoded characters. Use raw output when an API or database field expects only the data and stores the file type separately.
Usually not. Base64 makes files about a third bigger, and an embedded image is downloaded again with every page or stylesheet that contains it, rather than being cached once. Keep inline images to small icons and logos, and serve larger photos as normal image files.

Related Tools

Base64 to Image Converter

Decode a Base64 string back into a viewable and downloadable image file directly in your browser.

Image and Media

Base64 Encode and Decode

Encode text to Base64 and decode Base64 strings back to readable text, with full UTF-8 support.

Developer Tools

Image Resizer

Resize images to exact pixel dimensions with an optional aspect ratio lock, entirely in your browser.

Image and Media

SVG to PNG Converter

Convert SVG vector files to PNG raster images at any resolution directly in your browser using canvas.

Image and Media

Favicon Generator

Upload an image and generate favicon files in multiple sizes for websites and web apps. Client-side only.

Image and Media