📤 Image to Base64 (Data URI) Generator

Last updated: May 26, 2026

Image to Base64 Data URI Generator

Drop or select an image — get a ready-to-paste data URI. Works entirely in your browser. Nothing is uploaded.

🖼️
Drag & drop an image here
or click to browse
PNG · JPG · GIF · WebP · SVG · BMP · ICO — max 10 MB
Preview
Output
Ready-to-use code snippets

How to Convert Any Image to a Base64 Data URI (Step-by-Step)

Embedding images directly into HTML, CSS, or JSON without referencing an external file is a technique every frontend developer eventually needs. The mechanism behind it is called a Base64 data URI — a compact text representation of binary image data that browsers understand natively. This tutorial walks you through exactly what a data URI is, why you'd use one, and how to generate and apply them correctly in real projects.

What Is a Base64 Data URI, Exactly?

A data URI follows a specific RFC 2397 format that looks like this:

data:[mediatype];base64,[base64-encoded-data]

Breaking that down piece by piece: data: is the URI scheme that tells the browser this is inline data, not an external resource. The [mediatype] part is the MIME type of the content — for a PNG image it would be image/png, for a JPEG it is image/jpeg. The ;base64, segment declares the encoding method. Everything after the comma is the actual image binary, encoded as a Base64 string.

So a 1x1 transparent PNG would produce something like:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQI12NgAAIABQAABjE+ibYAAAAASUVORK5CYII=

That entire string is a valid image source. You paste it into an src attribute and the browser renders it perfectly, no network request required.

Step 1 — Drop or Select Your Image

Using the tool above, either drag your image file directly onto the drop zone or click it to open a file picker. The tool accepts every common image format: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, and ICO. There is a 10 MB size cap enforced client-side to prevent the browser from locking up while encoding very large files.

The moment you select a file, the tool reads it using the browser's built-in FileReader API with the readAsDataURL() method. This method converts the raw binary file data into a Base64-encoded data URI entirely within your browser — your image is never sent to any server. You will see a live preview thumbnail along with the file name, size, and MIME type displayed immediately.

Step 2 — Choose Your Output Format

Before hitting Generate, pick the output format that matches your use case:

  • Full Data URI — the complete data:image/...;base64,... string. This is the most universal output and works anywhere a URL is accepted.
  • Base64 Only — strips the data:[type];base64, header and returns just the raw encoded string. Useful when an API or library expects the raw Base64 without the prefix.
  • HTML <img> — wraps the data URI in a complete <img src="..." alt="image" /> tag ready to paste into markup.
  • CSS background — outputs a background-image: url("..."); declaration you can drop straight into a stylesheet rule.

Step 3 — Generate and Read the Stats

Click Generate Base64 Output. The encoded string appears in the output box, and four statistics appear below it: original file size, total data URI size, size overhead percentage, and total character count of the Base64 string.

The size overhead number deserves attention. Base64 encoding inflates binary data by roughly 33 percent — every 3 bytes of binary become 4 ASCII characters. A 100 KB PNG becomes approximately 133 KB as a data URI. For small icons and decorative elements this overhead is negligible. For large hero images it can meaningfully affect page weight, so inline embedding is best reserved for images under roughly 5–10 KB unless there is a specific reason to go larger.

Step 4 — Copy and Paste the Output

Two copy buttons sit below the output area. Copy Output copies exactly what is shown in the text box according to the format you selected. Copy Raw Data URI always copies the full data:image/...;base64,... string regardless of the selected format tab, so you always have the original to fall back to.

Both buttons use the modern navigator.clipboard.writeText() API with a fallback to the older document.execCommand('copy') for compatibility in older browsers. After clicking, the button turns green and displays "Copied!" for 1.8 seconds to confirm success.

Step 5 — Use the Ready-Made Code Snippets

Below the copy buttons is a snippet panel with four tabs: HTML, CSS, JSON, and Markdown. Each tab shows a complete, paste-ready code block for that context:

  • HTML tab: a full <img> tag with the data URI as the src attribute value.
  • CSS tab: a complete .element { background-image: url("..."); background-size: cover; } block.
  • JSON tab: a JSON object with an "image" key holding the data URI — perfect for REST API payloads or configuration files.
  • Markdown tab: the standard ![alt text](data-uri) syntax for Markdown files and README documents.

Real-World Use Cases Where This Technique Shines

Email HTML templates are perhaps the most common reason developers reach for data URIs. Email clients frequently block externally hosted images by default, but Base64 inline images are embedded in the message body itself and display immediately without requiring the recipient to "load images." Small logos, social icons, and signature images are ideal candidates.

Single-file HTML applications and reports benefit enormously from inline images. A self-contained HTML file with all its images Base64-encoded can be emailed, archived, or shared as a true single artifact with zero external dependencies.

CSS sprite alternatives — rather than managing sprite sheets, small icons and UI elements encoded as data URIs can be referenced directly in CSS without any additional HTTP requests, slightly improving rendering speed for small assets on HTTP/1.1 connections.

API payloads that need to transmit images alongside structured JSON data — for example, sending a user avatar, a generated chart, or a product photo as part of a single JSON request body — use Base64 encoded image strings as the standard approach.

When Not to Use Data URIs

Inline Base64 images are not cached separately by the browser. Each page load that includes the data URI string must parse and decode it inline, whereas an external image URL benefits from browser and CDN caching across page views and across different pages on the same site. For large, frequently reused images, a traditional src URL pointing to a hosted file will almost always perform better overall. Use inline encoding strategically for small, page-specific, or email-bound assets rather than as a blanket replacement for standard image hosting.

With the tool above and these steps, you can go from raw image file to paste-ready data URI in under five seconds — entirely in your browser, with zero data leaving your machine.

FAQ

Is my image uploaded to a server when I use this tool?
No. The entire conversion happens locally in your browser using the FileReader API. Your image file never leaves your device and no network request is made. This makes it safe to use with sensitive or proprietary images.
Why does the Base64 output string look so much longer than the original file size?
Base64 encoding converts every 3 bytes of binary data into 4 printable ASCII characters, which adds approximately 33% overhead. A 100 KB image will produce a data URI string roughly 133 KB in length. The tool shows the exact overhead percentage after generating the output.
What is the difference between the Full Data URI and Base64 Only output formats?
The Full Data URI includes the complete header — for example data:image/png;base64, — followed by the encoded string. This is what browsers accept as an image source. Base64 Only strips that header and returns just the raw encoded characters, which is needed when an API, SDK, or backend library expects the encoded image data without the data URI prefix.
Can I use a data URI image in an email newsletter or HTML email template?
Yes, and this is one of the best use cases for data URIs. Many email clients block externally hosted images by default, requiring recipients to click 'load images.' Base64 inline images are embedded in the email body itself, so they render immediately without any external request. Keep individual images small — large inline images increase email file size significantly and some email providers reject messages over certain size limits.
Does this tool work with SVG files?
Yes. SVG images are supported and will be encoded using the image/svg+xml MIME type. Note that for SVGs you also have the option of embedding them as raw URL-encoded SVG text rather than Base64 (which can produce shorter output), but Base64 encoding of SVGs works correctly in all modern browsers and is the simpler, universally compatible approach.
Is there a maximum image size I can convert?
The tool enforces a 10 MB limit on the input file. In practice, embedding images larger than 5–10 KB as data URIs is rarely advisable because they cannot be cached by the browser between page views, they increase HTML or CSS file size, and Base64 decoding adds a small CPU cost on every page load. Data URIs are best suited for small icons, logos, and decorative elements.