Image to Base64 Converter
Convert images to Base64 data URIs for HTML, CSS and Markdown.
- Runs in your browser
- Nothing is uploaded
- Free, no sign-up
Encoding happens in your browser; the images are never uploaded. A data URI embeds the file in the page, which saves a request for very small images but makes the page heavier and cannot be cached separately.
About this tool
Drop an image and get it back as a Base64 data URI, with ready-made snippets for an HTML img tag, a CSS background and Markdown. SVGs can use a smaller URL-encoded form instead. The file is read in your browser and is never uploaded.
How to use it
- Drop one or more images onto the page.
- Choose the output: data URI, HTML, CSS, Markdown or the raw Base64.
- Copy it, or download it as a text file.
What a data URI is
A data URI puts a file's contents inside a URL instead of pointing to a file elsewhere:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB...
Wherever a page accepts an image address, such as an <img src> or a CSS url(), it can take one of these, and the image arrives with the page itself.
When inlining helps and when it hurts
Embedding saves a network request, which was once a big deal. It is worth it for very small images, a few kilobytes at most: a tiny icon, a loading placeholder, a one-pixel pattern.
For anything larger it costs you:
- Base64 is a third bigger than the file, because every three bytes become four characters.
- It cannot be cached separately. The image is re-downloaded every time the page or stylesheet is.
- It delays the page. A large embedded image makes the HTML or CSS bigger and slower to parse before anything renders.
Many email clients, including Gmail, do not show data URI images at all, so host images for email instead.
SVG does not need Base64
SVG is already text, so it can go into a data URI with only a few characters escaped, which comes out smaller than Base64 and compresses far better when the page is gzipped. That is the compact form offered for SVG files. You can also paste the SVG markup directly into the HTML.
Use the Base64 form for SVG only where something requires it.
Using the output
- HTML: the
imgsnippet drops straight into a page, including a supplied alt text from the file name. - CSS:
background-image: url("data:..."), for a rule in a stylesheet. - Markdown: works in renderers that allow data URIs, but many sanitise them away, so check yours.
- Raw Base64: the encoded text without the prefix, for APIs and config files that ask for it. To go the other way, or to encode text, use the Base64 encoder.
If a page's content security policy restricts images, it needs img-src data: to allow these.
Frequently asked questions
Does Base64 make an image smaller?
No, it makes it about 33% larger. It is an encoding that lets binary data travel as text, not compression.
How large an image can I embed?
Technically as large as the browser can handle, but under about 10 KB is a sensible limit. Above that, a normal image file is almost always better.
Can I turn a data URI back into an image?
Paste it into the address bar to view it, or decode the Base64 part with the Base64 encoder and save the result with the right file extension.
Are my images uploaded?
No. They are read and encoded in your browser and never sent anywhere.
Related tools
Base64 Encoder & Decoder
Encode text to Base64 or decode it back, with full Unicode support.
Bulk Image Compressor
Compress and resize many images at once, entirely offline.
Bulk Image Converter
Convert images between PNG, JPEG, WebP and AVIF in batches.
URL Encoder & Decoder
Percent-encode and decode URLs, full strings or single components.