Image to Base64
Convert an image to a Base64 / Data URI ready to paste into HTML img tags or CSS backgrounds. One-click copy, 100% local processing.
Full mode works directly in img src or CSS background; Base64-only suits cases where you assemble the prefix yourself.
How to use
- Drag an image onto the dashed area or click it to pick a local file. PNG, JPG, WebP, GIF and other common formats are supported.
- The image is converted automatically into a Data URI such as
data:image/png;base64,……. - Under "Output content", choose the full Data URI or the Base64 body without the
data:prefix. - Click the "Copy" button in the corner of the result box, or download the string as a .txt file.
FAQ
Where can I use a Data URI?
src attribute of an HTML img tag or background-image: url(...) in CSS: handy for small icons and signatures that should not trigger an extra network request.Why is the converted string so long?
What does "Base64 only" mean?
data:image/png;base64,AAAA...: the data:image/png;base64, part is the prefix. The "Base64 only" mode strips this prefix and keeps just the encoded content after the comma.Is my image uploaded anywhere?
How to use
- Load the image
Click or drag a file into the dashed zone. PNG, JPG, WebP, GIF and other common formats are accepted. Encoding starts automatically once the file loads.
- Choose the output mode
Under output content pick Full Data URI for use in an img src or CSS background. Base64 only strips the prefix for manual assembly.
- Check the length stats
The result box shows file size, result length in characters and the prefix. Base64 output runs roughly 1.37 times the original size, so judge from these numbers whether it is small enough.
- Copy or download
Hit the copy button in the corner of the result box for one-click copying. Press download as txt to save the whole string as a text file.
- Paste into your code
Paste the full Data URI into an img src attribute or a background-image url in CSS. Inline icons, placeholders and signatures are the classic uses.
About this tool
Base64 encodes binary data as plain text. The image bytes are regrouped and mapped onto 64 safe characters, inflating the result to roughly 1.37 times the original size. A data:image/png;base64, prefix turns the string into a Data URI that embeds straight into HTML or CSS. That saves one network request and removes any dependence on an image host. The encoding happens entirely in your browser; the picture never leaves your device.
The classic cases are small assets of a few to a few dozen kilobytes: email signatures, button icons, skeleton-screen placeholders. Inlining them cuts request count and speeds up first paint. It also suits offline pages and single-file demos that must carry images inside the code. Big files are different: long Base64 strings bloat HTML and CSS and defeat browser caching. Anything above a few dozen KB works better as a separate file.
How it works
The 1.37x figure has an exact explanation. Base64 repacks every 3 bytes into 4 characters of 6 bits each, which inflates the data to 4/3, about 1.333. The data: prefix and the final padding equal signs bring the practical total to about 1.37. The encoding is lossless: it changes representation, not content, and the original bytes survive a decode. The alphabet holds only letters, digits, plus and slash, characters every protocol layer passes through untouched. That is why the string sits safely inside HTML attributes, CSS values and JSON fields.
The real difference between inlining and linking is caching. An external image is its own request: the browser caches it separately and reuses it across pages. An inline string is welded into the HTML or CSS document and re-downloaded with it on every load. The working rule is to inline critical graphics of a few kilobytes and keep anything larger or reused on external URLs. Skeleton placeholders, small icons and email signatures all sit in that range. HTTP/2 lowers request cost but changes nothing about cache behavior, and whole-page inlining still means one icon edit re-ships the entire document.
When to use it
- Inline blur-up placeholders
Convert a 20-pixel-wide blurred thumbnail into a Data URI and bake it into the page. A color block then appears before the real image arrives, even on poor connections. This is the blur-up technique behind most modern loading effects, with zero extra requests.
- Tiny background textures
Repeating gradients and noise textures of a few dozen bytes inline cleanly into CSS. That saves a request and a file path to get wrong. After the 1.37x inflation they are still negligible in the stylesheet, so nothing measurable is sacrificed.
- Preview straight in the address bar
Paste a Data URI into the browser address bar and press Enter. The image appears immediately, no local server needed. It is the fastest way to confirm an encoding survived copying and to isolate whether corruption came from the string or the page.
Tips & tricks
- Switch to Base64 only mode when you just need the encoded body. It spares you the manual prefix cleanup.
- Compress the image before inlining. A few-KB icon fits Base64 far better than a dozen-KB screenshot.
- The generated string runs very long. Paste it into an editor with line wrapping so you can inspect it.
Things to watch
- Base64 encodes, it does not encrypt
Anyone holding the string can decode the picture instantly; publishing it in a page means publishing the image. Screenshots with sensitive content still need authenticated delivery, because the encoding offers no secrecy whatsoever.
- Keep the MIME prefix honest
A data:image/png prefix wrapping JPEG bytes renders in most browsers through content sniffing, but strict parsers reject it outright. Let the tool generate the prefix from the actual format, and never hand-assemble one from memory.
- CSP can block data: images
When a site's img-src or style-src whitelist omits the data: scheme, the content security policy blocks the image. Visitors see a broken-file icon instead. Inline usage needs data: added to the policy explicitly by whoever owns it.