Skip to main content

Image to Base64

Encode an image as a Base64 data URL for inline HTML, CSS, or JSON — runs locally.

Written by Golam Rabbani, Founder & Lead Engineer

The file is read locally with FileReader; no upload happens.

How to use this image to base64

  1. Choose an image file from your device.
  2. The tool reads the bytes with FileReader and produces a Base64 data URL automatically.
  3. Preview the output string and inspect its size — Base64 inflates payloads by ~33%.
  4. Click "Copy Data URL" to copy the entire string to your clipboard for embedding.
  5. Use "Reset" to clear the result and convert a different file.

About this image to base64

An image-to-Base64 converter turns a binary picture file into an ASCII string of the form data:image/png;base64,iVBORw… so the picture can be embedded directly in HTML, CSS, JSON, or markdown without a separate HTTP request. The encoding is defined by RFC 4648 and uses 64 printable characters to represent groups of three bytes as four characters.

This tool uses the browser's built-in FileReader.readAsDataURL — the same API the Web Platform has shipped since 2010 — to read your file and emit the encoded string. Nothing is uploaded; the entire conversion happens in your tab, so your image is never sent to a server.

As a worked example, a 4 KB transparent PNG icon becomes a roughly 5.5 KB Base64 string. Pasting that string into the src attribute of an img tag (or the url() of a CSS background) means the browser can render the icon without a separate network request — handy for inline emails, single-file demos, and tools that need to ship one self-contained HTML file.

The 33% size penalty matters. For files larger than 1 MB the tool surfaces a warning because the resulting string can bloat HTML responses, hurt Time To First Byte, and slow down JavaScript bundlers that have to parse those long strings. For larger assets, prefer a hosted URL or an object URL.

FAQ

Are my images uploaded anywhere during conversion?
No, conversion is entirely local in your browser via FileReader. The Base64 string is generated in memory and never transmitted.
How much does Base64 grow the file size?
Roughly 33%. Three bytes of binary data become four characters of Base64, plus a small constant overhead for the data URL prefix.
When should I embed images as Base64 instead of linking to them?
For tiny icons, single-file HTML demos, inline email signatures, or generated PDFs where one self-contained string is easier than managing assets. For anything over ~10 KB, a hosted URL is almost always better for performance.
Can I convert any image format?
Yes. The data URL preserves the source MIME type, so PNG, JPG, WebP, GIF, and SVG all work. The tool warns when the source file is over 1 MB because the encoded result can become unwieldy.
How do I decode a Base64 image string back to a file?
Paste the data URL into a browser address bar and the image will render; right-click and "Save image" to write it back to disk. Many code editors also have built-in Base64 decoders.