Image to Base64
Convert images to Base64 encoded strings for use in HTML, CSS, or JSON. Also decode Base64 strings back to images.
🔤
Click or drag an image here
Output includes the data:image/... prefix
Your files are never uploaded. All processing happens in your browser.
How to Use
- 1
Upload your image
Click to upload or drag and drop any image file.
- 2
Copy Base64 string
The Base64-encoded string is generated instantly — click Copy.
- 3
Use in your project
Paste the string directly in HTML src attributes, CSS, or API payloads.
How It Works
This tool converts images to Base64-encoded text strings for embedding directly into HTML, CSS, or JSON — and can decode Base64 strings back into downloadable images.
Why embed an image as text at all
A Base64 data URI lets an image be embedded directly inside HTML/CSS/JSON as text, rather than referencing an external image file — useful for email templates (where external images are often blocked by default), small icons bundled inline with code, or any context where a separate file request isn't practical.
The tradeoff
Base64 encoding increases the data size by roughly 33% compared to the original binary image file — worth it for small icons or when avoiding an extra network request matters, but not efficient for large images that are better served as a normal file.
Examples
Embedding a small icon in CSS
Converting a small logo or icon to Base64 and embedding it directly in a CSS `background-image: url(data:image/png;base64,...)` declaration avoids an extra HTTP request for a tiny file.
Decoding a Base64 string back to an image
Pasting a Base64 data URI string found in code or a JSON payload and switching to "Base64 → Image" mode to view and download the actual image it represents.
Common Use Cases
- Embedding small icons or logos directly into HTML/CSS without a separate image file request
- Including images inline in email templates where external image loading is often blocked
- Decoding a Base64 image string found in an API response or data file to view or save it as a real image
Tips
- Only use Base64 embedding for small images (icons, small logos) — the roughly 33% size increase and lack of browser caching make it inefficient for larger photos that would be better served as a normal linked image file.
- Everything happens locally in your browser — this is safe to use even for images you don't want uploaded anywhere, since the encoding/decoding never leaves your device.
Frequently Asked Questions
Related Tools
Resize Image
Resize any image to exact pixel dimensions or a percentage of the original. Lock aspect ratio to prevent distortion.
Compress Image
Reduce image file size by adjusting JPEG quality. See original vs compressed size comparison and download instantly.
Convert Image Format
Convert images between JPG, PNG, and WebP formats. Transparent PNGs are handled correctly. No upload required.