Online image to Base64 converter: drag & drop, paste, or upload an image to get a Base64 Data URI. Perfect for inline images and CSS.
TL;DR: Free online image to Base64 converter. Drag and drop, paste, or upload an image to get a Base64 Data URI. Perfect for inline images and CSS, runs locally.
For local tools, open DevTools → Network and search your input — it should not appear in requests.
Usage Guide
Convert an image to Base64 and switch output shape for the job: full Data URI, pure Base64, HTML img, CSS url(), or Markdown image syntax. Conversion runs locally; the image never uploads. The page shows original size vs encoded length (~+33%) and warns when the file is past roughly 100KB so you can decide whether to compress first.
1. How to use
For large files, run Image Compressor before encoding — compress-then-Base64 usually beats encode-then-regret. Use Base64 to Image for the reverse preview.
- Upload, drop, or paste an image (clipboard screenshots work).
- Pick an output chip: Data URI / pure Base64 / HTML img / CSS url() / Markdown — HTML/Markdown can take alt text.
- Check the size hint (encoded length and inflation %), then copy into HTML, CSS, JSON, or docs.
2. When inlining pays off
- Small logos, icons, first frames of loaders: saves a request and shows up immediately on first paint.
- Email templates: some clients block remote images aggressively; inline is more reliable (still keep payloads roughly under 20–30KB).
- API payloads: embed tiny images in JSON with no image host — use the pure Base64 chip.
3. The cost you must know
Base64 inflates the payload by ~33%, and once inlined into HTML/CSS the image can no longer be cached separately — every page load re-transfers it. Small multi-KB images often benefit; around 100KB and above the page warns and you should prefer a separate file with long-lived caching. It is a trade-off, not a rule — inline the critical above-the-fold smalls, link the rest.
4. Picking among the five output shapes
- Data URI: drop straight into src or config fields that want the data:image/...;base64, prefix.
- Pure Base64: for APIs or SDKs that add the prefix themselves.
- HTML img / CSS url() / Markdown: ready-to-paste snippets for docs and stylesheets — fill alt for img and Markdown.
5. Formats and privacy
Common bitmaps (PNG/JPEG/GIF/WebP/BMP, …) work via local file reads; nothing is uploaded, which matters for ID scans and chat screenshots. Remember: once you paste Base64 into chat or a ticket, it enters someone else's system — local conversion means this site never handles the bytes, not that the string can never leak afterward.
6. Pairing with compress and format convert
Resize to the real display size and compress before Base64; converting to WebP/JPEG first often shrinks payloads by an order of magnitude versus raw PNG. To verify, paste the Data URI into Base64→Image. When the size warning appears, compress — do not silence the warning and keep inlining.
7. Output formats and size
Switch among Data URI, raw Base64, img tags, CSS background, and Markdown. Expect ~33% size growth — compress large images first. Files stay local; watch screen-share and clipboard when content is sensitive.
FAQ
Yes for this page: images are read and encoded only in your browser, with no server in the loop. What happens after you copy is on you — once the Base64 goes into a chat or ticket, it lives in someone else's system. If you must commit Base64 to a repo, keep it in private config or inject it at build time rather than permanently embedding a private Data URI in a public frontend bundle.
Upload, drag-and-drop, or paste straight from the clipboard (screenshots included); common bitmaps like PNG, JPEG, GIF, WebP, and BMP all work. Output switches between Data URI, pure Base64, HTML img, CSS url(), and Markdown, with alt text available for HTML/Markdown.
Base64 encodes 3 bytes as 4 characters, inflating the payload ~33%. The page shows the inflation ratio and warns when the original passes roughly 100KB — an image inlined into HTML/CSS can't be cached separately by the browser, so every visit re-downloads it. Compress large images before encoding, or serve them as standalone URLs with long cache lifetimes instead.
Small logos, icons, and the first frame of loading animations — one fewer HTTP request and instant first paint. Email templates — some clients block external images aggressively, so inlining is safer (compress to roughly 20–30KB). API payloads — drop small images straight into JSON reports or config and skip the image host, usually via the pure Base64 output.
Resize to the actual display size and compress before encoding: converting to WebP/JPEG first often comes out an order of magnitude smaller than raw PNG. Run the image compressor first, and to verify integrity, paste the result back into the Base64-to-image tool and check the render.
Repeating the same Data URI across a stylesheet bloats it fast — extract it into one custom property or a background utility class instead. When the same image serves both web and email, compress each to its own threshold before encoding rather than sharing one oversized Base64.
Related Tools
Related Articles
Online Base64 to Image Converter: Decode Base64 Strings to Image Files
Learn how to convert Base64 encoded strings back to image files. Understand Base64 decoding principles, common image MIME types, and real-world Web development use cases.
Online Image to Base64 Converter: Encode Images to Text Strings
Learn how to convert image files to Base64 encoded strings. Understand Base64 encoding principles, use cases, and how to inline images in frontend development.
Base64 vs Base64URL: Padding, JWT Segments, and PEM Line Wraps
Standard Base64 and Base64URL differ in alphabet and padding. Learn how JWT’s three segments use Base64URL, why PEM wraps at 64 characters, and how to stop decode failures when tools disagree.