📋 Base64 Encoder
Convert images to Base64 data URLs for embedding in HTML, CSS, and JavaScript. Or decode Base64 back to an image.
🖼️ Try with a sample image
![معاينة]()
How to Use
1
Choose Direction
Switch between Encode (image→text) or Decode (text→image).
2
Input
Upload an image or paste a Base64 string.
3
Get Result
Copy the output or download it directly.
Detailed User Guide
Mode 1: Image → Base64 (Encoding)
Convert any image to a Base64 data URL for embedding directly in code.
Switch between Encode and Decode modes using the tabs at the top
- Upload an image (JPG, PNG, WebP, GIF, BMP)
- Click "Encode to Base64"
- The full data URL appears in the text area (format:
data:image/png;base64,...) - Click "Copy" to copy to clipboard, or "Download as .txt" to save
When to use: Embed small icons directly in HTML/CSS to eliminate HTTP requests. Great for email signatures, single-file demos, and CSS background images.
Mode 2: Base64 → Image (Decoding)
Convert a Base64 string back to a viewable and downloadable image.
- Switch to the "Base64 → Image" tab
- Paste a Base64 string or full data URL into the text area
- Click "Decode to Image"
- The decoded image appears below — click "Download Image" to save
Note: If you paste a raw Base64 string without the
data:image/... prefix, the tool will auto-detect and add the appropriate header.Best Use Cases
- Inline HTML images — Embed small icons and logos directly in HTML without external files
- CSS backgrounds — Use Base64 in
background-image: url()for self-contained stylesheets - Email signatures — Ensure images display correctly in email clients
- Single-file demos — Create standalone HTML files with embedded images
- API testing — Inspect and decode Base64 image data from API responses
Pro Tips
- Base64 increases file size by approximately 33% — only use it for small images (<50KB ideally)
- Data URLs work in all modern browsers and most email clients
- For CSS, use
background-image: url('data:image/png;base64,...') - For HTML, use
<img src="data:image/png;base64,..."> - Very large images (>2MB) will produce extremely long strings that may slow down page rendering
Frequently Asked Questions
Base64 is a method to encode binary data (like images) as text. This lets you embed images directly in HTML/CSS without external files.
Base64 images reduce HTTP requests and can be useful for small icons, email signatures, or single-file HTML demos. However, they increase file size by ~33%.
Very large images (>5MB) will produce extremely long Base64 strings. This tool works best with images under 2MB.
The string must be a valid image Base64 (starting with data:image/...). Raw Base64 without the data URL prefix will be auto-detected if possible.