Görüntüyü Base64'e Dönüştür

Yeni

Herhangi bir görüntüyü Base64 veri URL dizesine dönüştürün

Geliştirici Araçları

Görüntüyü Base64'e Dönüştür Nasıl Kullanılır

  1. 1Görselinizi yükleyin
  2. 2Oluşturulan Base64 dizesini kopyalayın
  3. 3HTML img src, CSS background-image veya JSON yüküne yapıştırın
  4. 4Paste it directly into your HTML or CSS

Görüntüyü Base64'e Dönüştür Hakkında

Image to Base64 converts your image file into a Base64 text string that can be embedded directly into HTML img tags, CSS backgrounds, or JSON payloads — no separate image file needed. The tool shows the full data URL, the pure Base64 portion, and an example HTML snippet.

Base64 encoding is the standard technique for embedding binary image data inside text-based formats. It is used everywhere: HTML email templates that cannot reference external files, CSS files that inline background icons, JSON API responses that carry image thumbnails, and SVG files that embed raster images. This tool automates the conversion instantly in your browser.

Three output views are provided: the full data URL (ready to paste into an src attribute), the raw Base64 string (for APIs that expect just the encoded data), and a complete HTML img tag example. One-click copy buttons make it easy to grab each piece without manual selection.

Görüntüyü Base64'e Dönüştür Temel Özellikleri

  • Converts PNG, JPG, WEBP, GIF, and SVG to Base64
  • Outputs a ready-to-use data URI string
  • One-click copy of the full encoded output
  • Shows encoded string length and estimated size
  • Supports drag-and-drop image upload
  • Instant encoding with no server upload
  • 100% client-side using the FileReader API
  • Works with any image size up to browser memory limits

Desteklenen Formatlar

Giriş Formatları

PNGJPGWEBPGIFSVGBMPICO

Çıkış Formatları

Base64 data URL stringRaw Base64 stringHTML img snippet

The output data URL includes the correct MIME type prefix (data:image/png;base64, etc.) automatically.

Örnekler

Inline icon in HTML email

Embed the icon directly in your email HTML so it displays even when external images are blocked.

Giriş

Small 32x32 PNG icon

Çıkış

data:image/png;base64,iVBOR... (full data URL)

CSS background image

Use the data URL in a CSS background-image property to avoid an extra HTTP request for small decorative assets.

Giriş

Small decorative PNG texture

Çıkış

background-image: url("data:image/png;base64,...")

Image in JSON API response

Copy the raw Base64 string to use as the value of an "avatar" field in a JSON payload without the data URL prefix.

Giriş

User avatar PNG

Çıkış

Raw Base64 string for JSON field value

Yaygın Kullanım Senaryoları

  • Embed small icons directly in HTML to avoid extra HTTP requests
  • Include images inline in CSS for background graphics
  • Store image data inside JSON API payloads or config files
  • Create self-contained HTML email templates with embedded images
  • Encode signature images for embedding in PDF generation scripts
  • Bundle small sprites directly in JavaScript source files

Sorun Giderme

Output string is extremely long and slows down the editor

Çözüm

Base64 encoding increases size by ~33%. For images over 100 KB, consider serving them as regular files instead of inline data URIs.

Data URI does not display in the browser

Çözüm

Ensure the data URI includes the correct MIME type prefix, e.g. "data:image/png;base64," — the tool generates this automatically, so check for accidental truncation when copying.

SVG encoding produces broken output

Çözüm

For SVG files, URL-encoding is sometimes more reliable than Base64. Use the raw SVG source or URL-encode the SVG string instead.

Sıkça Sorulan Sorular

Görseller için neden Base64 kullanılır?

Base64, ayrı dosya istekleri olmadan görüntüleri doğrudan koda yerleştirmenizi sağlar.

Base64 dosya boyutunu artırır mı?

Evet, yaklaşık %33. Yalnızca yerleştirme gerektiğinde kullanın.

What is the difference between the data URL and the raw Base64 string?

The data URL includes the MIME type prefix (e.g., data:image/png;base64,) followed by the Base64 data. The raw Base64 string is just the encoded data without that prefix. Use the full data URL in HTML src attributes and CSS url() values; use the raw string when an API expects Base64-only input.

Is there a file size limit?

There is no server-side limit since all encoding happens in your browser. Images up to 10 MB encode reliably on modern devices. Very large images may slow down or crash the browser tab.

Which image formats are supported?

Any format your browser can load: PNG, JPG, WEBP, GIF, SVG, BMP, and ICO are all supported. The MIME type is detected automatically from the file.

Can I use the Base64 output in CSS?

Yes. Use the full data URL as the value of a CSS background-image property: background-image: url("data:image/png;base64,..."). Useful for small decorative images and icons.

Can I use the Base64 output in a JSON API?

Yes. Copy the raw Base64 string (without the data URL prefix) to use as the value of an image field in a JSON payload.

What happens to transparency in the Base64 output?

Transparency is preserved in the data URL when the source is a PNG. The MIME type in the prefix (data:image/png;base64,) ensures the browser renders it correctly.