🖼️ Image to Base64 Encoder

Convert images to Base64 data URIs for embedding in HTML, CSS, or JSON. Supports JPEG, PNG, GIF, SVG, and WebP. Free online image to Base64 converter — runs in browser.

🖼️

Drop an image here or

PNG, JPG, GIF, WebP, SVG supported

How to Use

Upload your image

Click the upload area or drag and drop any PNG, JPG, GIF, WebP, or SVG file.

Choose output format

Toggle between full Data URI (data:image/png;base64,...) and raw Base64 string only.

Copy the result

Click Copy to clipboard. Use the data URI directly in your CSS background-image or HTML src attribute.

Frequently Asked Questions

What is a Base64 image data URI? +

A data URI embeds the image directly in your HTML or CSS as text: data:image/png;base64,iVBORw0KGgo.... This eliminates a separate HTTP request for the image file, useful for small icons, backgrounds, and email templates.

What image formats are supported? +

PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, and most common image formats are supported. The MIME type is automatically detected from the file and included in the data URI.

How large will the Base64 output be? +

Base64 encoding increases file size by approximately 33%. A 100KB image becomes roughly 133KB as Base64 text. For images over 50KB, linking to the file is usually better for performance than embedding.

How do I use this in CSS? +

Copy the full data URI and use it as: background-image: url("data:image/png;base64,..."); In HTML: <img src="data:image/png;base64,...">. For email templates, inline data URIs ensure images display without external loading.

Is my image uploaded to a server? +

No. The entire conversion runs in your browser using the FileReader API. Your image never leaves your device and is never sent anywhere.

Tam Rehber: Resimden Base64'e Dönüştürücü

Resimden Base64'e Dönüştürücü, görüntü dosyalarını HTML, CSS veya JavaScript'e doğrudan gömebileceğiniz Base64 kodlu veri URI'larına dönüştürür — görüntüyü yüklemek için ayrı bir HTTP isteğine gerek kalmaz. JPEG, PNG, GIF, WebP, SVG ve ICO formatlarını destekler.

Veri URI Biçimini Anlama

Bir veri URI şu yapıyı izler:

data:[mimetype];base64,[base64-kodlu-veri]

PNG görüntüsü için şöyle görünür:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

Tarayıcı bu dizeyi harici bir dosyaya işaret eden URL gibi davranır ancak tüm görüntü verileri satır içi gömülüdür. Ağ isteği yapılmaz.

HTML'ye Gömme

<img
  src="data:image/png;base64,iVBORw0KGgo..."
  alt="Şirket logosu"
  width="120"
  height="40"
>

Bu, harici resimlerin e-posta istemcileri tarafından varsayılan olarak sık sık engellendiği e-posta HTML'inde özellikle kullanışlıdır. Satır içi veri URI'ları bu kısıtlamayı atlar.

CSS'e Gömme

.logo {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxu...");
  background-size: contain;
  background-repeat: no-repeat;
}

Boyut Yükü: ~%33 Kuralı

Base64 kodlaması, her 3 bayt ikili veriyi 4 ASCII karaktere dönüştürür; bu da kodlanmış boyutu yaklaşık %33 artırır. 10 KB'lık bir PNG, Base64 dizesi olarak yaklaşık 13,3 KB olur. Tarayıcılar satır içi veri URI'larını gömüldükleri HTML veya CSS belgesinden ayrı olarak önbelleğe alamaz.

Veri URI'ları ne zaman kullanılır

İyi adaylar: 2–3 KB altındaki küçük simgeler, tek bir sayfada kullanılan logolar, e-posta şablonlarındaki resimler, favicon'lar.
Kötü adaylar: Hero görselleri, ürün fotoğrafları, 10 KB üzerindeki her şey, birden fazla sayfada paylaşılan resimler.

SVG: Özel Durum

SVG dosyaları XML metni olduğundan Base64 kodlaması olmadan gömülebilir. URL kodlamalı SVG, Base64 kodlamalı SVG'den biraz daha küçüktür ve hata ayıklama sırasında daha okunabilirdir. Ayrıca SVG'yi değiştirmenize olanak tanır — örneğin CSS özel özellikleri aracılığıyla dolgu rengi değiştirme — bu, SVG opak blob olarak Base64 kodlandıktan sonra mümkün değildir.

İlgili Araçlar

Genel metin ve dize kodlama görevleri için Base64 Kodlayıcı'ya bakın. Büyük resimleri gömmeden önce, Base64 çıktısını yönetilebilir tutmak için boyutlarını Resim Sıkıştırıcı ile küçültün.