Image to Base64
Convert any image (JPG, PNG, GIF, SVG, WebP) to Base64 or data URI. Paste directly in CSS or HTML.
Drop an image here or click to upload
Supports JPG, PNG, GIF, SVG, WebP
How to use
- 1 Click or drag an image file into the upload area.
- 2 The tool encodes it as a Base64 data URI instantly in your browser.
- 3 Copy the full data URI (for use in CSS or HTML src attributes) or just the Base64 string.
- 4 Useful for embedding small images directly in CSS, HTML, or JSON without a separate HTTP request.
Key features
- Encodes any image to Base64 in your browser — no upload to any server
- Outputs full data URI (for CSS background-image) and plain Base64 string
- Shows the encoded string length and estimated size
- Supports PNG, JPEG, GIF, WebP, and SVG
Why Embed Images as Base64?
Converting an image to Base64 encodes its binary content as a text string, which can then be embedded directly in HTML (<img src="data:image/png;base64,...">) or CSS (background-image: url("data:...")) without requiring a separate file request.
The tradeoff: a Base64-encoded image is approximately 33% larger than the original file (because Base64 uses 4 characters per 3 bytes of data). It also prevents browser caching of the image independently from the page. For large or frequently reused images, an external URL is almost always better. Base64 encoding makes most sense for small, single-use assets.
Common Use Cases
Email template logos and icons
Embed images directly in email HTML so they display even when external content blocking is on.
Self-contained HTML files
Create single-file dashboards, reports, or exports that include all images inline — no external dependencies.
CSS sprite replacements
Inline small decorative images or icons directly in a stylesheet to eliminate additional HTTP requests.
API image payloads
Transmit image data through a JSON or text-based API that cannot carry binary content.
Clipboard and data transfer
Pass images as strings between components, tabs, or services where binary transfer is not supported.
Inspecting image content
Decode a Base64 image from a JWT token, API response, or config file to verify what it contains.
When to Inline vs When to Link
| Use Base64 inline | Use external URL instead |
|---|---|
| Tiny icons (< 5 KB) | Large photos or hero images |
| Email HTML (can't use external links) | Images reused across multiple pages |
| Single-file HTML exports or reports | Images that change frequently |
| Offline or air-gapped environments | Any image over ~10 KB |