Image to Base64 Converter

Convert any image to a Base64-encoded string or Data URI — or paste a Base64 string to decode it back into an image. Supports PNG, JPG, SVG, GIF, and WebP. Completely private: everything runs in your browser.

Drag & drop an image here, or

Supports PNG, JPG, GIF, SVG, WebP, BMP

How to Use This Tool

Image → Base64

  1. Upload an image — Drag and drop or click "Browse File" to select any image (PNG, JPG, GIF, SVG, WebP, BMP).
  2. Choose output format — Select Raw Base64, Data URI, HTML img tag, or CSS background-image syntax.
  3. Copy or download — Click "Copy to Clipboard" to copy the result, or "Download as .txt" to save it as a file.

Base64 → Image

  1. Switch to the "Base64 → Image" tab at the top of the tool.
  2. Paste your Base64 string — Paste either a raw Base64 string or a full Data URI (e.g., data:image/png;base64,...).
  3. Click "Decode Image" — The image will be rendered as a preview instantly.
  4. Download — Click "Download Image" to save the decoded image to your device.

Benefits & Use Cases

  • •
    CSS Inline Images: Embed small icons or background images directly in your CSS using background-image: url(data:...) to eliminate extra HTTP requests.
  • •
    Email Templates: Many email clients block externally linked images. Embedding images as Base64 Data URIs ensures they always display in HTML emails.
  • •
    API Payloads: Send image data via REST APIs or GraphQL as a Base64 string in JSON without requiring multipart/form-data uploads.
  • •
    Offline / Single-file HTML: Package all assets including images into a single self-contained HTML file for sharing or archiving.
  • •
    Debugging & Verification: Decode a Base64 image from a log file, database record, or API response to visually verify it rendered correctly.
  • •
    100% Private: Your images are never uploaded anywhere. All processing uses browser-native APIs (FileReader, atob/btoa) with zero data transmission.

Frequently Asked Questions

What is a Base64 image Data URI?

A Base64 image Data URI is a way to embed image data directly into HTML or CSS as a text string, instead of linking to an external file. It begins with "data:image/png;base64," followed by the Base64-encoded image bytes.

Which image formats are supported?

This tool supports all common image formats that browsers can read via FileReader, including PNG, JPEG/JPG, GIF, SVG, WebP, BMP, and ICO files.

Is there a file size limit for conversion?

There is no hard server-side limit since all processing happens in your browser. However, very large images (over 5 MB) may produce extremely long Base64 strings and could slow down your browser when pasting or displaying the output.

Does Base64 encoding increase file size?

Yes. Base64 encoding increases the data size by approximately 33% compared to the original binary file. This is a trade-off for the convenience of embedding images directly in text-based formats like HTML, CSS, or JSON.

Is my image uploaded to a server?

No. All conversion happens 100% in your browser using the FileReader API and JavaScript. Your images never leave your device and are never sent to any server.

What is the difference between Raw Base64 and a Data URI?

Raw Base64 is just the encoded bytes string (e.g., "iVBORw0KGgo..."). A Data URI includes a prefix with the MIME type (e.g., "data:image/png;base64,iVBORw0KGgo...") which allows it to be used directly as an image source in browsers.

Can I use a Base64 image in an HTML img tag?

Yes. Set the src attribute of an img tag to the full Data URI string: <img src="data:image/png;base64,...">. This tool can generate the complete img tag markup for you.

When should I use Base64 images vs external files?

Base64 is best for small images (icons, logos under ~10 KB) where eliminating an HTTP request is beneficial, or in email HTML templates where external image links may be blocked. For larger images, external files are preferable to avoid bloating your HTML/CSS.

Related Tools

Base64 Encoder / Decoder

Encode and decode plain text strings with Base64

Image Compressor

Reduce image file size without visible quality loss

URL Encoder / Decoder

Encode and decode URL-safe percent-encoded strings

All Image Tools

Browse all free browser-based image utilities

Technical Notes

  • • Conversion uses the browser's FileReader.readAsDataURL() API.
  • • Base64 encoding adds ~33% overhead over the original binary size.
  • • Data URIs are supported in all modern browsers for img src, CSS, and canvas.
  • • SVG Data URIs may optionally use data:image/svg+xml in plain text (not Base64) for smaller size.
  • • For CSS use, consider URL-encoding the Data URI if it contains special characters.