Image to Base64 Converter — Encode & Decode Online

Encode images to Base64 or decode Base64 to images — get data URI, raw string, or HTML tag. No server upload.

Drop an image here or click to upload

JPG, PNG, WebP, GIF, SVG

How to Use

Choose Encode or Decode — Select the Encode tab to convert an image to Base64, or the Decode tab to preview a Base64 string as an image.
Upload image or paste Base64 — In Encode mode, upload any image file. In Decode mode, paste a Base64 or data URI string.
Copy or preview the result — Copy the Base64 string, data URI, or HTML tag to your clipboard. In Decode mode, see the rendered image preview.

Why Use This Tool

Embedding small images as Base64 data URIs eliminates HTTP requests, which can improve initial page load — especially for icons, logos, and tiny UI sprites. But most online Base64 tools upload your image to their server for encoding, which is unnecessary and insecure.

This tool encodes images entirely in your browser using the FileReader API. Upload any image format — JPG, PNG, WebP, GIF, SVG — and get the Base64 string instantly. Copy the raw string, the full data URI, or a ready-to-paste HTML img tag. The Decode tab does the reverse: paste a Base64 string and see what image it represents.

For images over 100KB, the tool warns you that Base64 embedding will likely hurt performance. In those cases, use a regular file URL with proper caching instead.

Frequently Asked Questions

Base64 encoding converts binary image data into a text string using 64 ASCII characters. This lets you embed images directly in HTML, CSS, or JSON without needing a separate image file. The encoded string is about 33% larger than the original file, so it's best for small images like icons and logos.

Use Base64 for small images (under 10KB) like icons, logos, and tiny UI elements — it eliminates an HTTP request, which can improve page load speed. Avoid Base64 for larger images because the 33% size increase makes the HTML or CSS file significantly bigger, which hurts performance more than the saved HTTP request helps.

A data URI is a Base64-encoded image wrapped in a format that browsers can render directly: data:image/png;base64,iVBOR... You can use it as the src attribute of an img tag or as a url() value in CSS background-image. It renders the image inline without loading a separate file.

Yes — switch to the Decode tab and paste any Base64 string or data URI. The tool renders it as an image preview so you can verify the content. You can also right-click the preview to save the decoded image as a file.

There's no hard limit, but images over 100KB produce very large Base64 strings (130KB+ of text) that bloat your HTML or CSS files. For images larger than 10–20KB, serving them as separate files with proper caching is almost always better for performance.