Image to Base64 Converter — Free Data URI Encoder
Drop an image here or click to choose
PNG · JPG · GIF · SVG · WebP · encoded locally
Output
Original
0 B
Data URI
0 B
Overhead
+0%
Drop an image and get its Base64 data URI, ready to paste into HTML, CSS, or an email template. The converter also gives you a copy-paste <img> tag, a CSS background rule, and Markdown. Everything runs in your browser using the FileReader API, so your image is never uploaded to a server.
How it works
- 1 Add your image Drag an image onto the drop zone or click to pick one. PNG, JPG, GIF, SVG, WebP, and AVIF all work.
- 2 Choose an output format Switch between a raw data URI, an HTML img tag, a CSS background-image rule, or Markdown depending on where you'll paste it.
- 3 Copy the result Click Copy to grab the encoded string. The size readout shows how much larger the Base64 version is than the original file.
Your data stays private
All processing happens entirely in your browser. No files, text, or data are ever sent to our servers. You can disconnect from the internet and this tool will still work.
Frequently asked questions
- What is a Base64 image, and when should I use one?
- A Base64 image is a picture encoded as text and embedded directly in your HTML or CSS as a data URI, instead of linked as a separate file. It's handy for tiny icons, email templates, and inlining assets to save an HTTP request.
- Is my image uploaded anywhere?
- No. The file is read locally with the browser's FileReader API and encoded on your device. Nothing is sent to a server, so it's safe for private logos, screenshots, and unpublished assets.
- Why is the Base64 string bigger than the file?
- Base64 encoding uses 4 characters for every 3 bytes, so the encoded text is about 33% larger than the original binary. The size panel shows the exact increase for your image.
- Should I inline large images as Base64?
- Usually not. Big data URIs bloat your HTML or CSS, can't be cached separately, and slow the first paint. Base64 pays off for small images — icons, logos, and email graphics under a few kilobytes.
- How do I use the data URI in CSS?
- Pick the CSS output and paste it into a rule, for example: background-image: url("data:image/png;base64,…");. The tool formats it for you so you can drop it straight in.
- Do Base64 images work in email?
- In CSS backgrounds, support is patchy — Outlook blocks them. Inline <img> data URIs work in most modern web clients like Apple Mail and many mobile apps, but always test in the clients your audience uses.