Image ↔ Base64

Convert any image to Base64 string or decode Base64 back to image. Perfect for developers.

Drop your image here

or click to browse · PNG, JPG, WebP, GIF supported

Want the full walkthrough? Read our guide: How to Convert an Image to Base64

How to Convert an Image to Base64

  1. Drag and drop your file, or click to browse. Works with PNG, JPG, WebP and GIF.
  2. Copy the raw Base64 string, a ready-to-use CSS background-image url(), or a full HTML img tag.
  3. Or switch to the Base64 → Image tab, paste a Base64 string, and download it as an image file.

Frequently Asked Questions

What is a Base64 image string used for?

Base64 encodes binary image data as text, so it can be embedded directly inside HTML, CSS, or JSON without a separate file request — common for icons, small images, and email templates.

Does converting to Base64 increase file size?

Yes, Base64 encoding adds roughly 33% overhead compared to the original binary file size, since it represents binary data using only text-safe characters.

Can I decode a Base64 string back to an image?

Yes. Switch to the Base64 → Image tab, paste the string (with or without the data:image/...;base64, prefix), and click Decode to Image, then download it.

What output formats does the copy button support?

You can copy the raw Base64 string, a ready-to-use CSS background-image: url() rule, or a complete HTML <img src="..."> tag.

Is my image uploaded to a server?

No. Encoding and decoding both happen entirely in your browser using the FileReader API. Your image and the resulting Base64 string never leave your device.

Free Image to Base64 Converter -- Encode and Decode Online

Convert any image to a Base64 string for embedding directly in HTML, CSS, or JavaScript -- or decode a Base64 string back to an image file. Eliminate extra HTTP requests for small icons and inline images in your code.

Encode to Base64

Get the full data: URI string ready to paste into src attributes or CSS background-image.

Decode Back to Image

Paste any Base64 string and download the decoded image file.

Copy HTML and CSS Snippets

Copy ready-made img src and CSS background-image snippets with one click.

Client-Side Only

Encoding and decoding happen in your browser. No data is sent anywhere.

Frequently Asked Questions

When should I use Base64 encoding for images?

For small images (under ~10KB) embedded in HTML emails or CSS that must avoid separate HTTP requests. Large images should never be Base64-encoded -- the string is ~33% larger than the binary file and blocks rendering.

How do I embed a Base64 image in HTML?

Use the data: URI as the src attribute. The generator provides the complete img tag snippet ready to copy.

What formats can I convert to Base64?

PNG, JPG, WebP, GIF, and SVG -- any image your browser can load.

Is there a file size limit for Base64 conversion?

No hard limit, but Base64 encoding large files produces strings that degrade performance when embedded inline. For large files, always serve images as separate URLs.

Related guide: How to Convert an Image to Base64