Dev Tools
Client-sidefiles never upload

Image ↔ Base64

Drop images to get a data URI, raw base64, HTML img and CSS background snippets — one click each. Or paste base64 to preview + download. Pure client-side, files never leave your browser.

›How to use
  1. Image → Base64: drop files (or click). Each image shows its thumbnail, the original size vs the data URI size, and how much bigger the encoded form is.
  2. Click Copy on any of the four sections (data URI / raw base64 / HTML / CSS) to grab the snippet.
  3. Base64 → Image: switch to the second tab, paste the string, hit Decode & preview, then download.
  4. When pasting raw base64 (no data: prefix) pick the right MIME above; a full data URI brings its own MIME.
Tips
  • Base64 inflates payloads by ~33% — keep that in mind before inlining into CSS / HTML.
  • Data URIs are great for small assets (icons, placeholders); larger images are usually better via CDN.
  • If you label a payload PNG but the magic bytes say JPEG, we auto-correct the MIME and download extension.
  • Everything runs in your browser; the bytes never leave your machine.

Image to Base64: The Complete Guide — Data URIs, CSS Backgrounds, Email Inline

Embedding images directly into HTML / CSS / JSON — Base64 has been the front-end engineer's image-bundling tool for 15 years. But when does inlining actually help, and when does it hurt? What exactly is a Data URI? Why must email images be inline? This guide uses our `image-base64` tool as the worked example to clarify Base64's real use cases and avoid three classic misuses.

What is a Data URI, and why not just use a URL?

A Data URI is the contents of a file base64-encoded directly into a URL: data:image/png;base64,iVBORw0.... The upside is zero HTTP requests — the browser doesn't fetch a separate .png. Great for tiny icons, email signatures, loading placeholders. The downside: ~33% larger bundle (base64 overhead) and uncacheable (every HTML document re-transmits the image). So inlining only suits images that are tiny and non-repeating.

When to inline, when not to

Inline when: - < 2 KB icons / logos / placeholders - Email signatures (most email clients block external image links) - Dynamically generated SVG / QR (used once per session) - Background patterns in critical CSS (avoid blocking first paint) Don't inline when: - > 10 KB — URL + HTTP cache is faster - Image appears on multiple pages — CDN cache saves requests - You need lazy loading — Base64 in HTML can't defer Rule of thumb: when in doubt, use a URL. Inlining is a last-mile optimization, not a first move.

Data URI vs raw Base64 vs HTML img vs CSS background

Same image, four common output forms: - Data URI: data:image/png;base64,xxx — for or - Raw Base64: xxx (no data:image/png;base64, prefix) — for backend APIs, JSON payloads - HTML img tag: — paste straight into HTML - CSS background: background-image: url("data:image/png;base64,xxx"); — for stylesheets The tool gives you all four; copy whichever fits. The most confused pair is raw vs Data URI — the former for JSON, the latter for browser rendering.

Reverse: paste base64 → preview + download

Another common need is reverse: you get a base64 blob from a Slack message, GitHub Issue, or API response and want to see what it is. Manually: write and reload — fiddly, easy to get the prefix wrong. The tool's reverse mode: paste the blob directly. Auto-detects format (JPEG / PNG / GIF / WebP / SVG), handles the data: prefix, renders a preview, gives you a download button. Hugely useful when debugging webhook payloads.

Why email images must be inline

Email clients (Gmail / Outlook / Apple Mail) block external images by default — clicking an image reveals your IP / email location to the sender, effectively becoming a tracking tool. So marketing emails, event invites, signatures must inline images (Base64 into the HTML email body) for the recipient to see them. The cost: larger email body, higher spam-filter score. Industry practice: inline logo / signature under 5 KB; use CDN URLs for hero / main visuals — but on your own domain, not a third-party host. Gmail at least trusts owned domains more.

Next time you write an email signature or tune critical CSS, use [the Image → Base64 tool](/en/tools/image-base64) — get all 4 output forms in one click. The image never leaves the browser — it's base64-encoded locally, then copied.

Related tools