How to convert an image to Base64
- 1 Drop an image on the box, or click browse.
- 2 Choose the output: data URI, Base64 only, HTML or CSS.
- 3 Press Copy, or save the text as a file.
- 4 Paste it into your HTML, CSS, JSON or email template.
Embedding images wisely
Base64 is best for tiny images such as icons, logos in emails and placeholders. Compress the image first with Compress Image to keep the text short. To check or reverse the result, use Base64 to Image.
- Images over about 10 KB are usually better linked than embedded.
- SVG icons can often be embedded without Base64.
- Base64 cannot be cached separately by browsers.
Features
Four formats
Data URI, raw Base64, HTML img tag and CSS background.
Size shown
See the extra size before you embed.
Any image
JPG, PNG, WebP, GIF, SVG and ICO.
When to use it
Small icons in CSS
Embed tiny icons to save extra requests. Check the result with Base64 to Image.
Email templates
Some email builders need images inside the HTML.
JSON and APIs
Send small images as text in JSON payloads.
Single-file pages
Make a self-contained HTML file with images inside.
Related Image tasks
Frequently asked questions
What is Base64?
A way of writing binary data, such as an image, using 64 safe text characters, so it can be placed in HTML, CSS or JSON.
Why is the Base64 text bigger than the image?
Base64 uses four characters for every three bytes, so it is about 33% larger than the file.
When should I embed images as Base64?
For very small images such as icons under a few kilobytes. Large images make pages slower, because they cannot be cached separately.
What is a data URI?
Base64 text with a prefix such as data:image/png;base64, that tells the browser what kind of file it is.
Do all email clients show Base64 images?
No. Some, including several versions of Outlook and Gmail, block or strip them. Linked images are more reliable in email.
Can I convert Base64 back to an image?
Yes, with the Base64 to Image converter.
Is SVG better as Base64 or plain text?
SVG can also be embedded as URL-encoded text, which is often smaller than Base64.
Is Base64 a form of encryption?
No. Base64 only changes how data is written. Anyone can decode it back to the original image, so never use it to hide private information.
Can I use Base64 images in React or Vue?
Yes. Paste the data URI as the image source in your component, although bundlers can also inline small images automatically.
How long is the Base64 text for a typical icon?
A small icon of two or three kilobytes becomes roughly three to four thousand characters, which is easy to paste into a stylesheet or template.
Is my image uploaded to create the Base64 text?
No. Your browser reads the file and writes the text itself, so nothing is sent to a server, even for private images.
How this tool works. These image tools run entirely in your browser using the Canvas API built into every modern browser, the open-source libheif decoder for iPhone HEIC photos and Tesseract, a widely used open-source OCR engine, for reading text. Each tool is tested with real phone photos, screenshots and scans before it goes live, and nothing you open is sent to a server.
Built and reviewed by Hamza Farooq, founder and lead developer
· Last updated
· How we check our tools
· Report a problem