Image to Base64
Encode an image as a Base64 data URI, CSS background or HTML img tag, entirely offline.
Drop your image here
or click to browse
Processed locally — never uploaded
How to use image to base64
- 1Add your image
Drop the file onto the panel. Keep it small; a few kilobytes is the sensible range for this technique.
- 2Choose an output format
A plain data URI, a CSS rule, an HTML img tag, or a CSS variable.
- 3Copy the result
The encoded string appears in the output box. Select it all and paste it into your markup.
About image to base64
Image to Base64 converts a picture into the text form that can be pasted straight into HTML, CSS or JSON. Instead of pointing at a file path, you paste a string that contains the image itself.
The main reason to do this is to avoid a second request. A data URI is embedded in the file that uses it, so the browser does not need to fetch the image separately. That matters for a small icon or logo, and hardly matters for a photograph, because Base64 encoding inflates the file by about a third and inlining a large image makes every page carrying it heavier.
There is a second good reason: an image embedded this way cannot be hotlinked or scraped out of your page by path, which is why it is sometimes used for email HTML, where most clients block external images by default. The same property makes it a poor choice for anything you want cacheable across pages. For most projects a real image file with a proper URL is the better engineering decision.
Frequently asked questions
What is Base64 actually used for?
Embedding small images directly in HTML or CSS, storing an image as text inside JSON, and email HTML, where external images are frequently blocked by default.
Does Base64 compress the image?
No, and it is not compression. It is an encoding that represents binary data as text, which makes the file about 33 percent larger. Any size reduction has to come from compressing the image first.
Should I Base64 a photograph?
Generally no. You make the file bigger, you cannot cache it separately, and you cannot lazy-load it. Base64 is for small icons, logos and sprites.
Can I turn a Base64 string back into an image?
Yes, with an ordinary image decoder: paste the data URI into a browser address bar and it will display, or use any online Base64 decoder. That does not need to happen here, since this page only encodes.
Does this work with CSS?
Yes. Choose the CSS background or custom property option and you get a ready declaration to paste into a stylesheet.
Are my files uploaded?
No. The encoding is done in your browser with the FileReader API.
Related tools
Private by design. Your files are processed on this device and are never uploaded to the 1xmobcas.com server. Use image to base64 offline with total confidence.