Image to Base64 Converter

Image → Base64 Client-side

Drop an image here or click to upload

JPG, PNG, WebP, GIF, SVG, BMP, ICO · Processed 100% in your browser

100% Private: Your image never leaves your device. All encoding is done locally using the browser's FileReader API.

Image Preview

New Image Download .txt

Output Format

Data URI Base64 only HTML <img> CSS background CSS variable Markdown {} JSON JS const

Copy

Large file warning: This Base64 string is over 1MB. Embedding very large images inline can slow down page rendering. Consider using an <img src="..."> with an external file instead.

Line wrap

No wrap 76 chars 64 chars

What is Base64 Image Encoding?

Base64 encoding converts binary image data into a string of ASCII characters that can be safely embedded in text-based formats like HTML, CSS, JSON, and XML. Instead of linking to an external image file, you can embed the image data directly as a Data URI (e.g. data:image/png;base64,iVBORw0K…). This eliminates an HTTP request, which can improve performance for small images like icons and logos.

When to Use Base64 Images

• Small icons and logos — Images under ~10KB benefit most. Saves one HTTP request per image.
• Email HTML — Many email clients block external images but allow inline Data URIs.
• Single-file apps — When distributing a single HTML file with no external assets.
• CSS sprites alternative — Embedding small images directly in stylesheets.
• API payloads — Sending images inside JSON requests when file uploads aren't available.

Base64 Size Overhead

Base64 encoding increases the file size by approximately 33%. A 100KB PNG becomes ~133KB as a Base64 string. For large images, this overhead plus the inability to cache the Base64 string separately makes external image files more efficient. The break-even point is generally around 5–10KB for HTTP/1.1 connections.

Output Formats Explained

• Data URI: Complete URI including MIME type prefix — ready to paste into any src or url().
• Base64 only: The raw encoded string without the data:…;base64, prefix.
• HTML img tag: A complete <img src="data:…"> element ready to paste.
• CSS background: A background-image: url('data:…') declaration.
• CSS variable: A --var-name: url('data:…') custom property declaration.
• JSON: A JSON object with MIME type, Base64 string, and metadata.
• JS const: A JavaScript constant declaration with the Data URI string.