Image to Base64 Converter
Image to data URI, CSS, HTML, Markdown or JSON, and back. Runs in your browser.
About this image to base64 converter
This tool turns an image into Base64 text you can paste straight into HTML, CSS, Markdown or JSON, and turns Base64 back into an image you can see and download. It's built for developers, email designers and anyone debugging an image string from an API.
Drop in one image or several and you get six ready-made outputs at once: the data URI, raw Base64, a CSS background-image line, an HTML img tag with width and height, Markdown and JSON. Each has its own Copy button.
You also see what inlining costs. The tool shows the file size, the text size and the overhead, and it can shrink or re-encode the image first so the string stays small. Encoding happens in your browser, so the image never leaves your device.
Features
Six output formats
Data URI, raw Base64, CSS background-image, HTML <img> with alt, width and height, Markdown image syntax and a JSON object with name, MIME type, size and data.
Size overhead shown
Stat tiles show the bytes encoded, the length of the text and the percentage added. A note appears once the string passes 10 KB, the point where inlining usually stops paying off.
Shrink before encoding
Switch to Resize / re-encode to set a maximum side and save as WebP, JPG, PNG or AVIF with a quality slider. A 1 MB photo cut to 400 px WebP usually ends up in the tens of KB.
Shorter SVG data URIs
SVG is text already, so the tool can URL-encode it instead of using Base64. The result is usually noticeably shorter and still works in CSS and img tags.
Base64 back to image
Paste a data URI, raw Base64, a CSS url(), an img tag, Markdown or JSON. The real format is detected from the bytes, and you get a preview, the pixel size and a download with the right extension.
Clear errors
If decoding fails you are told why: a bad character and its position, a string cut short, or data that isn't an image.
How to use the image to base64 converter
- 1Drop, browse or paste images. A sample icon is already encoded.
- 2Keep the original bytes, or resize and re-encode to make the string shorter.
- 3Copy the data URI, raw Base64, CSS, HTML, Markdown or JSON, or switch to Base64 → Image to decode.
When to use it
Inlining small icons in CSS
A 1 to 2 KB icon used on every page can live inside the stylesheet as a background-image, saving a separate request.
Images in JSON APIs and fixtures
Some APIs expect an image as a Base64 field. The JSON output gives you the name, MIME type, dimensions and data ready to drop into a request body or test file.
Checking a broken image string
Paste the string from a log or database into Base64 → Image to see whether it decodes, what format it really is and whether it was truncated.
How does Base64 encoding of an image work?
Base64, defined in RFC 4648, writes binary data using 64 safe text characters: A to Z, a to z, 0 to 9, + and /. Every 3 bytes of the image become 4 characters, and = signs pad the end when the byte count isn't a multiple of 3.
A data URI, defined in RFC 2397, wraps that text with a small header so browsers know what it is: data:image/png;base64, followed by the Base64. Put that anywhere a URL is allowed and the browser decodes it in place, with no extra request.
Base64 is an encoding, not encryption. Anyone can decode it, so never treat it as a way to hide an image.
Does Base64 make an image bigger?
Yes, by about a third. Four characters for every three bytes means 33% more, plus the header. A 30,000 byte PNG becomes 40,000 Base64 characters, and the data URI adds 22 more for data:image/png;base64,.
Gzip or Brotli claws some of that back, but not all. And an inlined image can't be cached apart from the file it sits in, so it is downloaded again whenever that file changes.
When should you use a data URI, and when not?
Inline an image when it is small, used on the page that contains it, and rarely changes. Skip it for photos and anything large or shared across many pages, where a normal file the browser can cache will load faster.
- Good fit: icons and logos under a few KB, CSS sprites, email signature images, test fixtures, single-file demos
- Poor fit: photos, hero images, anything over about 10 KB, images reused across many pages
- Often better for icons: an inline SVG, which is smaller than a Base64 PNG and stays sharp at any size
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Where the image is encoded | In your browser | Uploaded to a server |
| File size limit | None beyond your device's memory | Often 1 to 5 MB for free use |
| Output formats | Six, each with its own Copy button | Often only data URI and raw text |
| Size overhead shown | Bytes, characters and percentage | Rarely |
| Resize or re-encode before encoding | Built in | Separate tool or not offered |
| Decode back to an image | Same page, accepts CSS, HTML and JSON wrappers | Separate page, raw Base64 only |
Tips
- Shrink first. A 64 px icon displayed at 32 px is plenty for sharp high-DPI screens, and every pixel you drop shortens the string.
- For SVG icons, clean the markup with the SVG optimizer first, then encode. Editor metadata can double a small file.
- Building browser icons? The favicon generator makes the .ico, PNG sizes and link tags in one go, so you don't have to inline them.
- To encode text, PDFs or other non-image files, use the general Base64 encoder and decoder.
- Decoding a string copied from JSON or a log? Paste it as is. Line breaks, spaces and escaped slashes are ignored.
- For large photos, compress the image and serve it as a file rather than inlining it.
Questions
How do I convert an image to Base64?
Drop, browse or paste the image and the outputs appear right away. Copy the data URI for an img src, the CSS line for a stylesheet, or the raw Base64 for an API field.
How much bigger is a Base64 image?
About 33% bigger, plus a short header. Base64 turns every 3 bytes into 4 characters, so a 9 KB icon becomes roughly 12 KB of text. The tool shows the exact figure for your file.
How do I convert Base64 back to an image?
Switch to Base64 → Image and paste the string. A data URI, raw Base64, CSS url(), img tag or JSON all work. You'll see a preview and can download the file with the correct extension.
Why does my Base64 image not display?
Usually the string is cut short, contains a stray character, or has the wrong MIME type in its header. Paste it into Base64 → Image and the error message tells you which one it is.
Should I include the data:image/png;base64, prefix?
Include it wherever a URL is expected, such as img src, CSS url() or Markdown. Leave it out when an API or database field asks for plain Base64, which is what the Raw Base64 output gives you.
Can I convert SVG to a data URI without Base64?
Yes. With an SVG loaded and Original file selected, tick URL-encode instead of Base64. The output is a data:image/svg+xml, URI that is usually shorter and easier to read.
Is my image uploaded?
No. Reading, resizing and encoding all happen in your browser, and the decoder also runs locally. Nothing is sent anywhere, so it works offline after the page has loaded.