Base64 Resim Kodlayıcı Resimleri HTML ve CSS'de gömme amacıyla Base64-kodlu veri URI'lerine dönüştürün.
Base64 Resim Kodlayıcı
Resimleri HTML ve CSS'de gömme amacıyla Base64-kodlu veri URI'lerine dönüştürün.
Görüntüyü Yükle
Bir görüntü dosyasını seçin veya sürükleyip bırakın (PNG, JPG, GIF, SVG, WebP).
Base64 Çıktısını Görüntüle
Base64 veri URI'si anında oluşturulur.
Veri URI'sini Kopyala
Tam veri URI'sini HTML veya CSS'de kullanmak için kopyalamak üzere Kopyala'ya tıklayın.
What Is Base64 Resim Kodlayıcı?
Bir Base64 Resim Kodlayıcısı, resim dosyalarını HTML, CSS veya JavaScript'te doğrudan gömülebilen Base64-kodlu veri URI'lerine dönüştürür. Harici bir dosya yerine, resim verileri data:image/type;base64,... dizisi olarak satır içi olarak verilir. Bu, ek HTTP isteklerini ortadan kaldırır ve küçük simgeler, logolar ve sprite'ler için idealdir. Araç, resmi FileReader API kullanarak okur, MIME türünü otomatik olarak algılar ve tam bir veri URI'si üretir. PNG, JPEG, GIF, SVG, WebP ve diğer ortak formatları destekler. Tüm işlemler tarayıcınızda gerçekleşir - resimler hiçbir zaman cihazınızdan ayrılmaz.
Why Use Base64 Resim Kodlayıcı?
-
Küçük resimlerin Base64 olarak işlenmesiyle ek HTTP isteklerini ortadan kaldırın
-
Tüm ortak görüntü formatları için otomatik MIME tipi algılama
-
Yüzde 100 müşteri tarafında - görüntüler tarayıcınızdan hiç ayrılmaz
-
HTML ve CSS için hazırlanmış veri URI'leri oluşturur
Common Use Cases
HTML Gömme
Küçük simgeleri ve logoları doğrudan HTML img src özniteliklerine gömün.
CSS Arka Planları
Veri URI'lerini CSS background-image özelliklerinde kullanın.
E-posta Şablonları
Harici kaynakların engellenmesini önlemek için HTML e-postalarına görüntüleri gömün.
Tek Dosya Uygulamaları
Görüntüleri JavaScript'e doğrudan ekleyin ve çevrimdışı uygulamalar oluşturun.
Technical Guide
FileReader API, seçilen resmi bir ArrayBuffer olarak okur, ardından readAsDataURL() aracılığıyla Base64 dizisine dönüştürür. Sonuçtaki veri URI'si data:[MIME];base64,[kodlu-veri] formatını takip eder. MIME türü dosya üzerinden otomatik olarak algılanır. Base64 kodlaması, veri boyutunu yaklaşık %33 oranında artırır, bu nedenle bu teknik 10 KB'den küçük resimler için en verimlidir. Daha büyük resimler için, uygun önbelleğe alma ile harici dosya referansları daha performanslıdır.
Tips & Best Practices
-
1En iyi performans için 10KB'dan küçük resimler - HTML/CSS dosya boyutunu şişirmemek için
-
2Anında yüklenmesi gereken simgeler, logolar ve UI sprite'leri için kullanın
-
3Veri URI'leri ayrı olarak önbelleğe alınmaz - bunlar HTML/CSS dosyasının bir parçasıdır
-
4SVG görüntülerini daha küçük boyut için Base64 yerine URL ile kodlayabilirsiniz
Related Tools
Base64 Şifreleme
Metni anında tarayıcınızda Base64 formatına dönüştürün.
🔐 Encoding & Crypto
Base64 Çözücü
Base64 ile kodlanmış dizeleri anında düz metne dönüştürün.
🔐 Encoding & Crypto
Base64 Resim Dekoderi
Base64 veri URI'lerini tekrar görüntülenebilir ve indirilebilir resimlere dönüştürün.
🔐 Encoding & Crypto
URL Kodlama (Tam)
Bir URL dizesindeki tüm özel karakterleri yüzlük kodlamayla dönüştürün.
🔐 Encoding & CryptoFrequently Asked Questions
Q Bu araç ücretsiz mi?
Q Görüntülerim bir sunucuya yükleniyor mu?
Q Hangi görüntü formatları desteklenir?
Q Dosya boyutu limiti var mı?
Q Çıktıyı CSS'de kullanabilir miyim?
About This Tool
Base64 Resim Kodlayıcı is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.