TPToolpazar

Global Araç

Image To Base64

Drop an image (JPG, PNG, WebP, GIF, SVG, or any other format your browser can decode) and get back a base64-encoded data URL you can paste straight into HTML, CSS, JSON payloads, email signatures, Markdown documents, or anywhere else that accepts an inline image.

A data URL looks like data:image/png;base64,iVBORw0KGgo… — the prefix tells the browser the MIME type, the rest is the file's bytes encoded in base64. Inlining is useful when you need the image to ship as part of a single document (no separate image request, no CORS, no relative-path bugs) — the classic uses are email signatures (where remote images often get blocked), CSS background images for tiny icons (saves an HTTP request), HTML email templates, and pasting screenshots into JSON or Slack-style chat payloads where attachments aren't supported.

The encoding adds about 33% to file size — a 30 KB PNG becomes a ~40 KB data URL. That's the tradeoff: portability for size. For images larger than ~50 KB, prefer hosting them and linking instead — large data URLs make HTML files slow to parse and break copy/paste in many contexts.

Nasıl Kullanılır

  1. Drag-drop your image into the upload area or click to browse.
  2. The data URL appears immediately — there's no convert button.
  3. Click Copy to put the full data URL on your clipboard. The MIME prefix (data:image/png;base64,) is included so you can paste it directly into <img src="..."> or background-image: url(...).
  4. Use Copy as <img> tag for HTML, Copy as CSS background-image for stylesheets, or Copy raw to grab just the encoded bytes (useful for JSON / email API payloads).
  5. If your image is over 100 KB, the tool warns you — at that size, hosting a real file is almost always better than inlining.

Ne Zaman Kullanılır

  • Email signatures — most email clients block remote image requests, so an inlined logo always renders.
  • HTML emails / newsletters — same reason: data URLs survive when relative paths and remote hosts don't.
  • Tiny icons in CSS (under 5 KB) — saves an HTTP request, faster than hitting a CDN.
  • Pasting screenshots into JSON or chat APIs that don't accept binary attachments.
  • Self-contained HTML demos / proof-of-concepts where you don't want a separate image folder.

Ne Zaman Kullanılmaz

  • Large images (>100 KB) — the +33% size tax balloons quickly. Host the file and link instead.
  • Any image used on multiple pages — a hosted file gets cached by the browser; a data URL re-downloads with every page.
  • Production websites at scale — bloating HTML with megabytes of base64 makes initial render slow.
  • Images that benefit from compression / CDN — Cloudinary or imgix will deliver a smaller, more cache-friendly file than a data URL.

Örnek

Girdi
A 1×1 transparent PNG (67 bytes binary)
Çıktı
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==

The 67-byte binary becomes a 100-character data URL. The '~33% overhead' is constant: every 3 bytes of binary become 4 base64 characters, plus the MIME prefix.

Sık Sorulan Sorular

Why does base64 add 33% to the file size?

Base64 encodes 3 bytes of binary into 4 ASCII characters (each character represents 6 bits, and 3×8=24=4×6). So every 3 bytes become 4 characters — a 33% size increase. Plus a small fixed overhead for the MIME prefix and any padding (=) at the end.

Is the data URL the same size as the original file plus 33%?

Almost — the percentage is the byte ratio, but you also gain the MIME prefix (data:image/png;base64,) which is roughly 22 bytes. So a 30 KB image becomes ~40 KB; a 1 KB image becomes ~1.36 KB plus the prefix.

Will browsers cache data URLs?

Sort of — they're cached as part of the HTML/CSS that contains them, but they don't have their own cache entry. So if the same image appears as a data URL in 10 different pages, the browser downloads it 10 separate times. A regular image URL would be cached once and reused.

Can I use this for SVG?

Yes, but for SVG specifically you can also use URL-encoded SVG (no base64) — usually smaller. Encode special characters (#, %, <, >) and you can embed SVG directly: `data:image/svg+xml,%3Csvg…`. The tool gives you both options for SVG inputs.

Is the image uploaded anywhere?

No. The base64 conversion uses FileReader.readAsDataURL() in your browser. Open DevTools → Network and you'll see zero outbound requests during conversion. Your image stays in browser memory.