Encoding uses the browser FileReader API (readAsDataURL). Images are not uploaded to any server. Base64 is encoding, not encryption. Output is ~33% larger than the original binary.
Upload an image and get a ready-to-paste data URL or raw Base64 string for HTML, CSS, or JSON APIs. Encoding runs locally with FileReader — files are never uploaded.
Loading tool…
Image to Base64 converts JPG, PNG, GIF, WebP, or SVG files into text strings (data URLs or raw Base64) using the browser FileReader API — files stay on your device, no upload.
Image to Base64 encoding turns binary image bytes into ASCII text so they can be embedded in HTML, CSS, JavaScript, JSON APIs, and email HTML. This tool outputs a full data URL (data:image/png;base64,…) or raw Base64 payload only.
Encoding runs locally with FileReader.readAsDataURL — nothing is sent to EverydayTools servers. Base64 adds roughly 33% size versus the original file. Use for small icons and logos; host or compress large photos normally.
Supported formats: PNG, JPG/JPEG, GIF, WebP, and SVG. Maximum 10 MB per file.
Concise answers for common searches — definitions, steps, and comparisons.
Upload your .png file. The tool outputs data:image/png;base64,… for HTML and CSS. Use Data URL mode for img src and background-image; use Raw Base64 if your API expects the payload without the prefix.
Upload a .jpg or .jpeg file. Output uses the image/jpeg MIME type in the data URL prefix. JPEG photos produce long strings — compress with Image Compressor before encoding if size matters.
Upload a .webp file. The data URL prefix is data:image/webp;base64,…. Ideal for embedding modern web assets in JSON or inline CSS where WebP is supported.
Upload an .svg file. SVG encodes as data:image/svg+xml;base64,…. Works well for small icons and logos inlined in HTML or CSS.
Base64 maps 3 bytes to 4 ASCII characters (~33% overhead). A data URL also includes the MIME prefix. That is expected — use Base64 only for small assets.
No. FileReader runs entirely in your browser. The file never leaves your device.
When you select an image, the browser FileReader API reads the file from disk into memory and calls readAsDataURL(), which returns a string starting with data:image/…;base64, followed by the encoded bytes. No network request occurs. You can copy the full data URL for HTML img tags and CSS backgrounds, or switch to raw Base64 for APIs that expect the payload without the prefix.
Click the upload area or drop a JPG, PNG, GIF, WebP, or SVG file (max 10 MB). Encoding starts automatically.
Check the thumbnail, original size, estimated encoded size, character count, and Base64 overhead percentage.
Select Data URL (full string with MIME prefix) or Raw Base64 (payload only) depending on your HTML, CSS, or API needs.
Click Copy to place the string on your clipboard, or Download .txt to save the output locally.
Input
icon.png · 4 KBOutput
<img src="data:image/png;base64,iVBORw0KGgo…" alt="Icon">Use Data URL mode and paste the full string as the img src to avoid a separate HTTP request for tiny icons.
Input
avatar.jpg · 80 KB · Raw Base64 modeOutput
{ "avatar": "/9j/4AAQSkZJRg…" }Many REST endpoints accept raw Base64 in JSON fields without the data:image prefix.
Input
hero.webp · 120 KB (compress first)Output
background-image: url('data:image/webp;base64,UklGR…');Compress large WebP files before encoding to keep CSS files manageable.
Input
logo.svg · 2 KBOutput
data:image/svg+xml;base64,PHN2ZyB4bWxucz0…Small SVG logos are ideal for Base64 inlining on landing pages.
Common real-world scenarios where this tool saves time.
Embed small PNG, SVG, or WebP icons as data URLs to cut HTTP requests on landing pages.
Send avatars, receipts, or thumbnails as Base64 fields in JSON without multipart uploads.
Embed banner images when external image hosting is blocked by email clients.
Store small default avatars or placeholders as text in JSON configs.
Step-by-step chains that connect related tools for common tasks.
Shrink large photos before encoding to keep JSON payloads smaller.
| Approach | Best for | Trade-off |
|---|---|---|
| Base64 data URL | Icons, small UI assets, offline demos | ~33% larger than binary |
| Hosted image URL | Photos, heroes, product galleries | Extra HTTP request; needs hosting |
| Image to Base64 (this tool) | Quick encode before paste | Local only — no upload |
| Format | Includes MIME prefix | Typical use |
|---|---|---|
| Data URL | Yes — data:image/png;base64,… | HTML img, CSS background-image |
| Raw Base64 | No — payload only | JSON APIs, some backend decoders |
Keep Base64 for assets under ~20–50 KB. Host or compress larger images first.
Use Data URL mode for HTML/CSS. Use Raw Base64 only when your API docs require it.
Base64 is reversible encoding. Do not use it to hide sensitive images.
Likely cause: Very large images produce multi-million-character strings that stress browser memory and the main thread.
Fix: Compress the image first with Image Compressor, or use files under 1–2 MB for inline embedding.
Likely cause: Some browsers block clipboard access without a user gesture, or deny it on insecure contexts.
Fix: Click Copy again after interacting with the page. Select the textarea manually and press Ctrl+C / Cmd+C as a fallback.
Likely cause: The file may be AVIF, HEIC, BMP, or missing a MIME type on upload.
Fix: Convert to PNG or JPG in your OS or browser, then re-upload. This tool supports JPG, PNG, GIF, WebP, and SVG.
Likely cause: The source file may be truncated, zero bytes, or not a real image.
Fix: Open the file in an image viewer to verify it. Re-export from the source app and try again.
Likely cause: Browsers may not fire change events when re-selecting the same path.
Fix: Click Clear, or select the file again — the upload input resets automatically on each pick.
Upload or drag a JPG, PNG, GIF, WebP, or SVG file (up to 10 MB). The tool encodes it locally and shows a data URL or raw Base64 string you can copy or download.
Upload a .png file. Copy the data:image/png;base64,… string for HTML img tags or CSS background-image properties.
Upload a .jpg or .jpeg file. The output uses the image/jpeg MIME type in the data URL prefix.
Yes. WebP outputs data:image/webp;base64,… and SVG outputs data:image/svg+xml;base64,…. Both run locally in your browser.
A data URL includes the MIME prefix (data:image/png;base64,). Raw Base64 is the payload only. Use Data URL for HTML/CSS; use Raw Base64 when your API expects unprefixed strings.
No. Encoding uses FileReader in your browser. Files never leave your device.
Base64 encoding adds about 33% overhead. Data URLs also include a short text prefix. That is normal.
10 MB per image in the UI. Larger files may fail due to browser memory limits — compress before encoding.
Use the Base64 to Image tool to paste a string, preview, and download PNG, JPG, or WebP.
No. Base64 is encoding, not encryption. Anyone can decode the string back to an image.
All encoding runs in your browser via FileReader. Images are never uploaded to EverydayTools servers.
FileReader.readAsDataURL() converts your file locally. Choose Data URL or raw Base64 output, then copy or download — no account required.
Base64 is not encryption. Do not use it to protect sensitive images. Output is ~33% larger than the original binary.
Part of Image Tools
More free tools for the same workflow.
Decode Base64 and data:image URLs to PNG, JPG, WebP, GIF, or SVG. Live preview, metadata, .txt import, Base64url support. Browser-only — nothing uploaded.
Compress JPG, PNG & WebP in your browser—up to 80% smaller, batch 25 files, 50/100/200 KB presets. Files stay on your device. No signup.
Advertisement
Reviewed on 2026-06-03.
Need to decode instead? Base64 to Image
Drop an image here or click to browse
JPG, PNG, GIF, WebP, SVG · Max 10 MB