Image to Base64

Convert images to Base64 data URIs or decode Base64 to images.

Drop an image or click to upload

Image to Base64 — What It Does

Drop or select an image file to get its full Base64-encoded data URI — ready to paste into HTML, CSS, JSON, or JavaScript. The tool also works in reverse: paste a Base64 string to preview and download the decoded image. Everything runs in your browser with no server uploads, making it safe for confidential assets.

How to Use Base64 Images in Code

  • HTML img tag — <img src="data:image/png;base64,ABC123...">
  • CSS background — background-image: url("data:image/png;base64,ABC123...")
  • JSON payload — Include as a string value in a JSON body field
  • Email (MIME) — Embed images inline in HTML emails without external hosting

Data URI Format Reference

  • data:image/png;base64,... — PNG image
  • data:image/jpeg;base64,... — JPEG image
  • data:image/gif;base64,... — GIF (supports animation)
  • data:image/webp;base64,... — WebP image
  • data:image/svg+xml;base64,... — SVG (can also use URL-encoded, not Base64)

Performance Considerations

  • Size overhead — Base64 adds ~33% to file size. A 10KB icon becomes ~13KB in Base64.
  • No browser caching — Embedded Base64 images cannot be cached independently. Each page load re-downloads the full string.
  • Best for small assets — Recommended for images under 5–10KB. Use external URLs with CDN for anything larger.
  • CSS sprites alternative — For icon sets, consider SVG sprites or icon fonts instead of individual Base64 images.

Frequently Asked Questions

What is a Base64 data URI and how is it used in web development?
A Base64 data URI embeds binary file data directly into a text string using the format data:[mediatype];base64,[encoded-data]. In HTML you can use it as an image src (e.g., <img src="data:image/png;base64,...">), in CSS as a background-image, or in JSON payloads to transfer image data without a separate HTTP request.
Why does a Base64 string look much longer than the original file?
Base64 encoding converts every 3 bytes of binary data into 4 ASCII characters, resulting in approximately a 33% size increase. A 100KB image becomes roughly 133KB as a Base64 string. This overhead makes Base64 suitable for small images but inefficient for large ones.
When should I embed images as Base64 vs using a file URL?
Use Base64 for small, frequently used images like icons and logos (under 5–10KB) where saving an HTTP round-trip is worth the size overhead. Use file URLs for larger images — the browser can cache them, and the 33% Base64 size penalty adds up quickly at scale.
Can I use this tool to embed fonts or other binary files as Base64?
This tool is optimised for images (PNG, JPEG, GIF, WebP, SVG) and produces the correct data URI prefix for each image MIME type. For other binary files like fonts (data:font/woff2;base64,...) or PDFs, the Base64 output is still valid but you will need to construct the correct data URI prefix manually.
Is it safe to encode private images in this tool?
Yes. All encoding and decoding happens entirely in your browser — no image data is sent to any server. Your files stay on your device throughout the process.