Image to Base64 — data URIs for HTML, CSS and JS
Turn an image into a base64 data URI you can paste straight into HTML, CSS or JavaScript — with copy buttons and size maths.
Your files never leave your device — everything runs locally in your browser.
No file added yet.
The box shows the first few thousand characters only — Copy or Download gives you the complete string.
What this tool does
A data URI is a file written as text and embedded where a URL would normally go. Instead of the browser making a second request for logo.png, the picture arrives inside your HTML or CSS as a long string beginning data:image/png;base64,. For small assets that is a genuine win: one fewer round trip, no broken link when an email client blocks remote images, and a template that can be handed over as a single file.
Paste an image in here and the tool encodes it and hands back four things: the bare data URI, an HTML `<img>` tag with it already inserted, a CSS `background-image` rule, and a JavaScript string literal. Each is one tap to copy, so you can drop the snippet into a page, a Shopify theme section, an HTML email or a Tampermonkey script without editing by hand. The byte maths is shown too — original size, encoded size and the roughly 33% overhead base64 always costs — because that overhead is the reason you should only inline icons, badges and small backgrounds, never photographs.
Encoding happens entirely in your browser from the file you selected, so an image under contract, a client logo you have not been given permission to host, or a personal photo never touches a server. There is no upload endpoint on this page at all: the string you copy is built from FileReader on your own machine, and closing the tab discards it. HEIC files are decoded first, and you may re-encode to JPG, PNG or WebP if the original is too heavy to inline.
How to use the Image to Base64 | Step by Step Guide
- Drop in the image you want to inline — an icon, logo or small background works best.
- Keep the original bytes, or re-encode as JPG/PNG/WebP to shrink what gets embedded.
- Press Encode and read the size report (encoded output is about a third larger than the file).
- Choose the snippet style — data URI, HTML, CSS or JavaScript — and press Copy.
- Paste it into your code. For anything above roughly 30 KB, host the file instead.
Image dalain, Encode dabayein — base64 data URI ban jayegi, aur sath me HTML, CSS aur JavaScript ki ready snippet bhi. Copy dabakar apne code me paste kar lein. Chhoti icons aur logos ke liye behtareen; bari photos inline na karein kyunke base64 se file ka size takreeban 33% barh jata hai.
Features
- Four output styles: bare URI, HTML img, CSS background, JS string
- Live byte report including the base64 expansion and MIME type
- Optional re-encoding to JPG, PNG or WebP before embedding
- One-tap copy plus a .txt download for very long strings
- Visual preview of what the URI actually resolves to
- Handles HEIC input by decoding it before encoding
Tips
- Inline icons, logos and small textures; a 200 KB photo inlined in HTML delays first paint more than a cached file would.
- For CSS, put the URI in quotes: `background-image:url("data:image/svg…")` avoids surprises with plus signs.
- SVG is already text — paste it into HTML directly instead of base64-encoding it.
- Some email clients cap message size: check the encoded length, not the file size, before inlining.
- Re-encode to WebP first if the target page is heavy — 30% smaller file means 30% smaller string.
Frequently asked questions
Is the image to base64 free to use?
Yes — Image to Base64 has no usage cap, no sign-up and no watermark, and it is not a trial: the page is a static file on https://wafasmart.tech with no billing backend behind it. There is no file-size cap other than your browser's memory.
Does anything get uploaded when I use image to base64?
No. Image to Base64 reads your image straight into page memory, works on it locally and hands the result back as a download — there is no upload request to intercept, store or leak, and no log of what you processed.
Why is the base64 text longer than my image?
Base64 encodes every three bytes as four characters, so any encoded file is about one third bigger. That is the format's fixed cost, not a bug in this tool.
Is a data URI bad for SEO or performance?
For a few small icons, no. Inlining large or many images bloats the HTML document, blocks rendering and cannot be cached separately — that is when a normal file URL wins.
Can I embed a PDF this way?
Not on this page — it is built for images. The PDF tools here work on documents directly instead.
Will the plus signs break my HTML?
Base64 uses + and / which are safe inside attribute values, but if you paste the string into a URL query, encode it first.
Can I use it on my phone?
Yes. Image to Base64 is mobile-first: one column, big tap targets, and the system keyboard opens with sensible number/text input. On iPhone, Files and the share sheet feed the picker the same way Downloads does on Android. The .txt download is the easiest way to move a long string to another app.
Related tools — Try more free tools
Your files never leave your device — everything runs locally in your browser.