Image to Base64
Encode any image as a base64 data URL, ready to paste into HTML, CSS, JSON, or email.
Drop an image or click to browse
JPG · PNG · WebP · GIF · BMP · TIFF — max 25 MB
When to base64-encode an image
A data URL bakes an image directly into a text document — HTML, CSS, JSON, email — so it travels with the document and needs no separate HTTP request. It is useful for small icons, one-off emails, Jupyter notebooks, unit-test fixtures, and Markdown that must work offline.
The trade-off: base64 inflates file size by roughly 33% (four ASCII characters per three binary bytes), and most browsers cannot cache a data URL independently — the image is re-downloaded every time the parent document is. For anything above a few KB or shared across pages, a regular <img src="/logo.png"> reference is almost always faster.
Good candidates
- SVG and small PNG icons (under ~4 KB)
- Email signatures and HTML newsletters (no external hosting)
- Placeholder images during tests or mockups
- Self-contained HTML demos and PDF exports
Avoid for
- Hero images or photographs larger than ~10 KB
- Assets used on many pages (you lose browser caching benefits)
- Images that change often (no cache invalidation)
Your files never leave this page.
Every step runs in your browser. Close the tab when you're done — nothing gets uploaded.
Image to Base64 in 4 steps
Upload your image
Drag and drop an image onto the page or click to browse. The tool header shows whether processing is local or server-backed.
Pick an output format
Choose Data URL for <img src> use, raw base64 for APIs, an <img> tag ready to paste, or a CSS background-image rule.
Copy or download
Click Copy to put the string on your clipboard, or download a .txt file for long values.
Paste into your code
Inline the string directly into HTML, CSS, or JSON — no extra HTTP request required.
Frequently asked
When should I inline images as base64?
For tiny icons or email templates where an extra HTTP request is not possible. Base64 adds about 33% to file size, so large images are usually better left as separate files.
Can I decode base64 back to an image?
Paste the full data URL (including the data:image/… prefix) into a browser address bar to view, or use any base64 decoder to save the bytes.
Are my images uploaded to a server?
Client-side tools process in your browser. Server-backed tools send the image to the MakeMyImgs API temporarily, process the requested job, and return the result.