Image to Base64
Convert an image into a Base64 data URI you can paste into CSS or HTML. Runs in your browser.
Select or drop your file
JPG, PNG, WebP images — add several to process in one batch
Batch: up to 5 files at once · Premium for 100
Processed locally in your browser — nothing is uploaded.
Base64 lets you embed an image directly inside your HTML or CSS as a text string, with no separate file to host or request. Image to Base64 turns any picture into a ready-to-paste data URI — handy for tiny icons, email templates and cutting an extra network round-trip.
How to image to base64
- 1. Add your image.
- 2. It's encoded into a Base64 data URI.
- 3. Copy the string and paste it into your CSS or HTML.
When to use Image to Base64
Inline a small icon
Embed a tiny logo or icon straight into CSS so it loads with the stylesheet — no extra request.
Self-contained email HTML
Put images inline so an email template doesn't depend on externally hosted files.
Quick prototypes
Drop an image into a single HTML file with nothing else to manage.
Best for small images only
Base64 encoding makes the text roughly a third larger than the original file, and inlined images can't be cached separately by the browser. That's a fine trade for a small icon, but a poor one for large photos — for those, keep a normal image file and link to it.
Frequently asked questions
How do I use the Base64 string?
Paste it as an image source, e.g. background-image: url('data:image/png;base64,...') in CSS or a src attribute in HTML.
Why is the string larger than my file?
Base64 represents binary data as text, which adds about 33% overhead. That's why it's best kept to small images.
Is my image sent anywhere?
No — the encoding happens in your browser.