Image to Base64 Converter: Data URI, HTML and CSS
Convert an image to a Base64 string or data URI, with ready-to-paste HTML img, CSS background and JSON output. Runs in your browser.
Loading Image to Base64 Converter…
Your files never leave your device
How to convert an image to Base64
Base64 turns the binary data of an image into plain text made of letters, digits and a few symbols. That text can be embedded directly where only text is allowed: inside HTML or CSS as a data URI, in a JSON payload sent to an API, in an email template or in a configuration file. The browser decodes it back into the original image when it is displayed.
The Image to Base64 Converter reads your image in the browser and produces the encoded string instantly, together with ready-made snippets: a complete data URI (data:image/png;base64,…), the raw Base64 string only, an HTML img tag, a CSS background-image rule and a JSON object. You can copy any of them to the clipboard or download the output as a text or JSON file. Images up to 10 MB are accepted.
How to use the Image to Base64 Converter
- Upload or drop an image (JPG, PNG, WebP, GIF, SVG and other browser-supported formats, up to 10 MB). The original's format, dimensions and size are shown.
- Choose the output format: Data URI, Base64 Only, CSS Background, HTML Image or JSON.
- Copy the result with one click or download it, then paste it into your HTML, CSS, JavaScript or API request.
- Check the character count and encoded size in the statistics panel before using very large images.
When Base64 images make sense
- Small icons and logos in CSS or HTML, saving a separate HTTP request.
- HTML email templates where external images may be blocked.
- APIs and JSON that accept images only as text fields.
- Single-file demos and prototypes that must work without external assets.
Example outputs
A data URI looks like data:image/png;base64,iVBORw0KGgo… and can be used anywhere a URL is expected. As HTML it becomes <img src="data:image/png;base64,…" alt="">, and in CSS background-image: url(data:image/png;base64,…). The JSON output wraps the string with its MIME type and dimensions, which is convenient for API payloads and test fixtures.
Size and performance
Because Base64 is about 33% larger than the binary file and is parsed together with the HTML or CSS that contains it, embedding pays off mainly for images below a few kilobytes, such as icons, tiny logos and placeholders. Compress or resize the image first, ideally to the exact display size, so the encoded string stays short and your pages stay fast.
Base64 makes data about one third larger than the original file, and embedded images cannot be cached separately by the browser. Use it for small images; for photos and large graphics, a normal image file compressed with the image compressor is faster.
Private, free and fast
The tool runs entirely in your browser: your files and text are processed on your own device and are not uploaded to a server. There is no sign-up, no watermark and no daily limit.
Features
- Data URI and raw Base64 output
- Ready-made HTML img and CSS background snippets
- JSON output for APIs
- Copy to clipboard or download
- Shows character count and encoded size
- Images up to 10 MB, processed in your browser
Frequently asked questions
What is a Base64 image?
An image whose binary data has been encoded as text. As a data URI it can be placed directly in HTML or CSS instead of linking to a separate file.
Does Base64 make images larger?
Yes, by about 33%, because every 3 bytes become 4 characters. It is best for small images.
How do I use a Base64 image in HTML?
Choose HTML Image output and paste the generated img tag, or put the data URI in the src attribute of any img element.
How do I use it in CSS?
Choose CSS Background output; it generates a background-image rule with the data URI that you can paste into your stylesheet.
How do I convert Base64 back to an image?
Paste the data URI into a browser's address bar to view the image, or decode the Base64 string with any Base64 decoder and save the bytes with the right extension.
Are my files uploaded to a server?
No. Everything is processed locally in your browser and nothing is sent to a server. Closing the tab discards your data.