Image to Base64 Converter
Turn an image into a Base64 data URI and copy it as a raw string, a CSS background rule, an HTML img tag or a JSON value.
Preview (rendered from the generated data URI)
About the Image to Base64 Converter
A data URI lets a file live inside a document instead of alongside it. Rather than pointing at logo.png and triggering a separate network request, the image is written directly into the HTML or CSS as a long Base64 string beginning with data:image/png;base64,. The browser decodes it and renders the picture with no extra round trip.
This is genuinely useful in narrow circumstances. Tiny icons embedded in a stylesheet avoid a request each. An HTML email that must render without external images can carry its own graphics inline. A single-file report, an offline documentation page or an exported artefact can be fully self-contained. Some APIs and configuration formats accept only Base64 for binary values, so encoding is not optional there.
It is equally important to know when not to do it. Base64 inflates the payload by roughly 33%, embedded images cannot be cached separately from the document that contains them, and a large data URI bloats the HTML or CSS file that every visitor downloads on the first paint. The practical guideline most performance engineers use is a few kilobytes: below that, inlining usually wins; above it, a normal file reference almost always does.
How to use it
- Add your imageDrag a file in or click to browse. PNG, JPG, SVG, GIF, WebP and ICO are all supported.
- Read the size warningThe tool shows the encoded length and flags images large enough that inlining will hurt more than it helps.
- Pick an output formatRaw Base64, a full data URI, a CSS background-image rule, an HTML img tag or a JSON-escaped string.
- Copy the snippetOne click copies the selected format, ready to paste into your stylesheet, template or config file.
- Or download itSave the encoded string as a text file when it is too long to move through the clipboard comfortably.
Features
- Five output formatsRaw Base64, data URI, CSS background rule, HTML img element and JSON string value.
- Correct MIME detectionThe data URI carries the right media type, so SVG, WebP and ICO all render correctly.
- Size guidanceOriginal size, encoded size and the 33% overhead are shown, with a warning when inlining is a bad idea.
- Live previewThe decoded image is rendered from the generated data URI, proving the string is valid before you use it.
- SVG friendlySVG files encode cleanly and keep working as CSS backgrounds and mask images.
- Local processingEncoding uses FileReader in your browser — no upload, so logos and client assets stay private.
Who uses this tool
- Front-end developersInline small icons and textures in CSS to remove render-blocking requests from the critical path.
- Email developersEmbed images in HTML email that must display even when a client blocks remote content.
- API integratorsProduce the Base64 payload an endpoint expects for an avatar, attachment or document upload field.
- Documentation writersBuild a genuinely single-file HTML page or report that keeps its images when it is emailed around.
Tips worth knowing
- Keep inlined images under roughly 4 KB. Past that the added weight on every page load outweighs the saved request.
- For SVG, URL-encoding is often smaller than Base64 and stays human-readable — worth comparing if the icon is large.
- Data URIs cannot be cached independently. If an image appears on many pages, a normal file reference will be faster overall.
Frequently asked questions
What is a Base64 data URI?
It is a way of writing a file's binary contents as text so it can be embedded directly in HTML, CSS, JSON or an API request. The string starts with the media type and encoding — for example data:image/png;base64, — followed by the encoded bytes.
Why is the encoded string bigger than the original file?
Base64 represents every three bytes of binary data as four ASCII characters, which adds about 33% overhead by design. That is the cost of making binary data safe to transport as text.
When should I inline an image instead of linking to it?
When the image is small — a few kilobytes — appears on a critical rendering path, and is not reused across many pages. Icons, tiny textures and email graphics are good candidates. Photographs and hero images almost never are.
Do data URIs work in every browser?
Yes, in every browser in current use, for images in both HTML and CSS. The historical exceptions are all long obsolete. Some strict email clients are the remaining edge case worth testing.
Can I convert a Base64 string back into an image?
Yes — paste the string into the Base64 Encoder & Decoder and decode it, or simply paste the full data URI into a browser address bar and the image will render, ready to save.
Is my image uploaded to convert it?
No. Encoding happens with the FileReader interface inside your browser, so nothing is transmitted. Client logos and unreleased assets are safe to encode here.