Upload an image and get a ready-to-paste data:image URL for HTML, CSS, or APIs. Encoding runs in your browser—files are never uploaded.
Need to decode instead? Base64 to Image
Click to upload
or drag and drop your image here
Supports JPG, PNG, GIF, WebP, SVG (Max 10MB)
background-image: url('data:image/jpeg;base64,...');<img src="data:image/png;base64,..." alt="Base64 Image">.logo {
background: url('data:image/svg+xml;base64,...');
}Note: Base64 strings are approximately 33% larger than the original binary file. Use for small images only.
Click anywhere in the red upload area or drag & drop your image file.
The browser converts the image to Base64 using FileReader API.
Click "Copy Base64" to copy the string to your clipboard for use.
Image to Base64 encodes JPG, PNG, GIF, WebP, and SVG into data:image URLs using the browser FileReader API—files stay on your device, no upload.
Image to Base64 is a free browser encoder that turns image files into ready-to-paste data URLs (data:image/png;base64,…). Upload or drag a file up to 10 MB, preview the image, copy the full string for HTML img tags, CSS backgrounds, JSON API payloads, or email HTML.
Encoding runs locally with native FileReader—nothing is sent to EverydayTools servers. Base64 adds ~33% size versus binary; use small icons and logos inline, and compress large photos before encoding. Pair with Base64 to Image to decode strings back to files.
Concise answers for common searches — definitions, steps, and comparisons.
After encoding, paste the entire data URL as the src value: <img src="data:image/png;base64,iVBORw0…" alt="…">. The prefix data:image/png;base64, tells the browser the MIME type; do not strip it unless your framework adds it separately.
Base64 maps 3 bytes to 4 ASCII characters (~33% overhead). That is expected. For web pages, only inline small assets; host large photos normally or compress before encoding.
No. This tool uses the browser FileReader API. The file never leaves your device, which is why it is safe for confidential screenshots or product assets.
Click the upload area or drop JPG, PNG, GIF, WebP, or SVG (max 10 MB). Conversion starts automatically via FileReader.
Check the thumbnail preview, file name, size, and Base64 character count. The output includes the correct data:image/…;base64, prefix for your format.
Click Copy Base64 to place the full string on the clipboard for HTML, CSS, JavaScript, or JSON.
Use in img src, background-image, fetch payloads, or config. For large files, compress first with Image Compressor to keep strings manageable.
Input
logo.png · 5 KBOutput
data:image/png;base64,iVBORw0KGgo…Paste into <img src="…"> to avoid a separate logo.png request on a marketing page.
Input
profile.jpg · 80 KBOutput
JSON: { "avatar": "data:image/jpeg;base64,/9j/…" }Many REST endpoints accept Base64 in JSON instead of multipart form uploads.
Common real-world scenarios where this tool saves time.
Embed small logos and icons as data URLs to cut HTTP requests on landing pages and single-page apps.
Send avatars, receipts, or thumbnails as Base64 fields in JSON without multipart upload endpoints.
Embed banner images as data URIs when external image hosting is blocked by email clients.
Store small assets as text in JSON configs, NoSQL documents, or feature flags when file storage is unavailable.
Step-by-step chains that connect related tools for common tasks.
| Approach | Best for | Trade-off |
|---|---|---|
| Base64 data URL | Icons, small UI assets, offline demos | ~33% larger than binary; bloats HTML/CSS |
| Hosted image URL | Photos, heroes, product galleries | Extra HTTP request; needs CDN/hosting |
| Image to Base64 (this tool) | Quick encode before paste | Local only—no upload |
| Tool | Direction | Typical use |
|---|---|---|
| Image to Base64 (this page) | File → text | Embed in code, APIs, email |
| Base64 to Image | Text → file | Decode API responses, DevTools URIs |
Keep Base64 for assets under ~20–50 KB; host or compress larger images first.
Copy the full string from this tool—it includes the MIME prefix required by browsers.
Advertisement
Base64 encodes binary image data as ASCII text (A–Z, a–z, 0–9, +, /) so it can travel through JSON, HTML, and email. Encoding adds about 33% size versus the original file.
Yes—free with no signup, watermarks, or usage caps. Encode as many images as you need.
Yes—PNG, JPEG, GIF, WebP, and SVG. The output includes the correct data:image/…;base64, prefix for each format.
No. Encoding uses FileReader in your browser. Images never leave your device and are not stored by EverydayTools.
Yes. Paste the full data URL string into JSON fields for avatars, documents, or webhook payloads that expect Base64 image data.
Yes. Upload from your gallery on phones and tablets; copy works where the browser supports clipboard APIs.
10 MB per image in the UI. Larger files may hit browser memory limits; compress before encoding when possible.
Use Base64 for small icons and critical inline assets. Use normal URLs (or a CDN) for photos and large graphics to keep HTML lean and cacheable.
Use the Base64 to Image tool to paste the string, preview, and download PNG/JPG/WebP.
Length scales with file size and the 33% Base64 overhead. A 100 KB JPG produces roughly 133 KB of text characters.
All encoding runs in your browser via FileReader. Images are never uploaded to EverydayTools servers.
Output matches the browser’s readAsDataURL implementation across modern Chrome, Firefox, Edge, and Safari.
Part of Image Tools
More free tools for the same workflow.
Paste Base64 or data:image URLs—live preview, download PNG/JPG/WebP/GIF/SVG. No upload: decoding stays on your device in the browser. Free, no signup.
Free browser image tools—compress JPG/PNG up to 80%, resize pixels, convert HEIC to JPG & WebP, remove backgrounds. Files stay on your device. No signup.
Advertisement
Reviewed by EverydayTools Editorial Team on 2026-05-20.