Image to Base64 Converter
Convert images to Base64 encoded strings. Perfect for embedding images in CSS or HTML.
Click to select an image
Supports JPEG, PNG, WebP, GIF, SVG
Convert any image to a Base64 encoded string that can be embedded directly in HTML, CSS, or JSON. Includes data URI format for easy copy-paste into your code.
Base64-encoding an image turns the binary file into an ASCII string you can embed directly into HTML, CSS, JSON, or a REST payload. A data URI like `data:image/png;base64,iVBORw0KGgo...` can sit in an `<img>` tag's src attribute, a CSS background-image, or a JSON field — no separate HTTP request needed.
The tradeoff is size: Base64 encoding inflates the file by about 33% because it uses six bits per character to represent each eight-bit byte. That extra bandwidth is worth it for tiny assets (under ~5 KB) where an extra HTTP round-trip would cost more than the inflation, which is why email clients, icon systems, and some PDF libraries embed small images this way. For anything above ~50 KB, you're usually better off keeping the binary file and referencing it by URL.
This tool outputs both the raw Base64 string and the full data URI with the correct MIME type prefix, so you can paste it straight into your markup. Common uses include inlining small icons into CSS sprites, embedding signature images in email templates, storing thumbnails in JSON API responses, and bundling assets into self-contained HTML exports.
- 1
Upload an image
Drop any image file onto the uploader. PNG, JPEG, GIF, WebP, and SVG all encode correctly.
- 2
Copy the output
The encoded string appears in two forms: a raw Base64 block and a ready-to-paste data URI with the correct MIME type prefix.
- 3
Paste into your code
Use the data URI in an img src, CSS background-image, or JSON field. The browser decodes it inline — no separate request.
Inline CSS icons
Embed small SVG or PNG icons as data URIs in a stylesheet so the icon loads with the CSS, not as a separate request.
Email template images
Some email systems require inline Base64 for logos and signatures since external images are blocked by default.
JSON API payloads
Include thumbnails or profile pictures directly in a JSON response when you can't serve them from a CDN.
Self-contained HTML
Create a single HTML file with all images inlined — useful for offline documentation, exports, or email-safe reports.
Why is the Base64 output larger than the original file?
Base64 uses six bits per character to represent eight bits of data, so encoded output is ~33% larger. That's the cost of turning binary into ASCII.
When should I use Base64 instead of a URL?
Inline Base64 makes sense for tiny assets under ~5 KB (icons, 1-pixel spacers), email templates where external images are blocked, or self-contained HTML exports. For anything larger, use a regular URL.
What's the data URI prefix for?
The `data:image/png;base64,` prefix tells the browser what MIME type the content is and how it's encoded. Without it, the browser can't render the image. This tool includes the correct prefix automatically.
Does it work with SVG?
Yes. SVGs can be Base64-encoded, but they also work inline as-is (with URL-encoding). Base64 is sometimes easier because it avoids escaping the quotes and angle brackets in SVG markup.
Is my image uploaded anywhere?
No. The Base64 encoding runs in your browser via the FileReader API. Your image never leaves your device.