🖼️

Image to Base64 Converter

Turn any image into a Base64 data URI — with optional resize, format change and ready-made HTML/CSS snippets. Files never leave your device.

Image Input
🖼️ Click to choose an image or drag & drop
PNG, JPEG, GIF, WebP, SVG — processed locally, never uploaded.

About Base64 Image Encoding

A data URI embeds an image directly inside HTML, CSS or JavaScript as Base64 text, removing the need for a separate file and HTTP request. That is genuinely useful for small icons in a single-file HTML report, email signatures, quick prototypes, favicons, or embedding a logo in a script-generated page. The trade-off is size: Base64 inflates the data by about 33%, and embedded images cannot be cached separately, so it is the wrong choice for large photos on a normal website.

This converter reads the image with your browser’s FileReader — nothing is uploaded — and can optionally downscale it to a maximum width and re-encode it as PNG, JPEG or WebP using an off-screen canvas. The size readout shows original versus encoded size so you can judge whether embedding is sensible. For decoding text the other way, see the Base64 Encoder / Decoder.

How to Use This Tool

1
Drop an image onto the tool or click to browse — PNG, JPEG, WebP, GIF and SVG all work, and the file never leaves your browser.
2
Optionally set a max width to downscale, pick an output format, and adjust JPEG/WebP quality — the size readout updates so you can watch the payload shrink.
3
Copy whichever snippet you need: the raw data URI, a ready-made HTML <img> tag, or a CSS background-image rule.
4
Paste it straight into your HTML, stylesheet or email template.

Common Use Cases

  • 📧
    HTML email signatures. Embed a small logo directly in the signature so it renders without an external image request — no more broken-image icons or "download pictures" prompts.
  • 🎨
    Inlining small UI assets. Icons and tiny decorations under a few KB can live inside the stylesheet, removing HTTP requests from the critical path.
  • 📄
    Self-contained documents. Single-file HTML reports, offline documentation and email templates need images that travel with the file.
  • 🧪
    Quick prototypes and CodePens. Embed test images directly in a demo instead of hosting them somewhere first.
  • 🖨️
    PDF and canvas workflows. Libraries like jsPDF accept data URIs directly — convert once here and paste into the script.

Good and Bad Uses

  • ✅
    Good: icons under ~10 KB, single-file HTML reports, email signatures, offline pages, CSS sprites replacement.
  • ✅
    Good: embedding a small logo in a PowerShell/HTML monitoring report so it renders without a web server.
  • ❌
    Bad: photos and hero images on a public site — 33% larger, uncacheable, slows first paint.
  • 💡
    Tip: resize to the display size and use WebP or JPEG for photographic content before embedding.

Frequently Asked Questions

Why is the Base64 version bigger than my original file?
Base64 encodes 3 bytes as 4 characters, adding roughly 33–37% overhead. That's the trade-off for embedding. Claw it back by resizing to the display dimensions and using WebP or JPEG at 80–90% quality — the size readout shows the effect live.
When should I not embed an image as Base64?
Large images, anything reused across multiple pages (embedding defeats browser caching), and photos on performance-sensitive pages. The technique shines for small, single-use assets — think under ~10 KB — not hero images.
Is my image uploaded to a server?
No. The file is read and converted entirely in your browser with the FileReader and Canvas APIs — the page makes no network requests with your data, and it works offline once cached.
Why is the Base64 bigger than my file?
Base64 represents every 3 bytes of binary as 4 text characters, an overhead of roughly 33%. Resizing or converting to WebP usually more than makes up for it on oversized source images.
Why does SVG skip the resize options?
SVG is vector text, so it embeds as-is (re-rasterising it to PNG would lose scalability). The other options apply to raster formats.