Herhangi Bir Resmi Base64’e Dönüştürme
Base64 kodlaması, ikili resim verisini doğrudan HTML, CSS, JavaScript, JSON veya herhangi bir metin tabanlı formata gömülebilen bir metin stringine dönüştürür. Yukarıdaki alana bir resim bırakın, çıktı formatınızı seçin (düz Base64, data URI veya CSS arka plan) ve sonucu kopyalayın.
Resimden Base64’e Dönüşüm Nasıl Çalışır
Bir tarayıcı resim dosyasını okuduğunda, bir bayt akışını işler: JPEG sıkıştırma blokları, PNG parçaları, SVG XML düğümleri. Bu baytlar, yazdırılabilir ASCII aralığının dışındaki değerleri içerir ve bu da onları metin belgelerine gömmeyi güvensiz kılar.
Base64 kodlaması, her 3 baytlık ikili veriyi 64 karakterli bir alfabeden (A-Z, a-z, 0-9, +, /) 4 karaktere eşleyerek bunu çözer. Sonuç, herhangi bir metin tabanlı protokolün bozulmadan taşıyabileceği saf bir ASCII stringidir.
FileReader yaklaşımı
Bu araç, tarayıcının FileReader API’sini kullanır:
const reader = new FileReader();
reader.onload = () => {
const dataUri = reader.result;
// dataUri = "data:image/png;base64,iVBORw0KGgo..."
};
reader.readAsDataURL(file);Çıktı Formatı Seçenekleri
Düz Base64
Herhangi bir önek olmadan ham kodlanmış string. Resmi bir veritabanında saklamanız, bir API yükünde göndermeniz veya saf Base64 girişi bekleyen bir fonksiyona aktarmanız gerektiğinde kullanın.
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJ...Data URI
MIME türü ile tam bir data URI. HTML <img> etiketlerinde, CSS url() fonksiyonlarında veya URL beklenen herhangi bir yerde kullanın:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSU..." alt="Satır içi resim" />CSS Arka Plan
Kullanıma hazır CSS bildirimi:
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSU...);Resimleri Ne Zaman Satır İçine Almalı vs. Ayrı Sunmalı
Satır içi (Base64 data URI)
10 KB altındaki resimler için en iyisi. Satır içine alma, özellikle yüksek gecikmeli bağlantılarda veya çok sayıda küçük resminiz olduğunda önemli olan bir HTTP isteğini ortadan kaldırır.
Ayrı dosyalar
10 KB üzerindeki resimler için daha iyidir. Ayrı dosyalar tarayıcı önbelleklemesinden, CDN dağıtımından, yavaş yüklemelerden ve WebP/AVIF format anlaşmasından yararlanır.
Kritik boyut eşiği
Google Lighthouse ve çoğu web performans kılavuzu, kesme noktası olarak 10 KB önerir. Bunun altında, HTTP istek yükü (DNS + TCP + TLS + başlıklar) genellikle Base64 boyut artışından daha fazla maliyetlidir.
Farklı Bağlamlarda Base64 Resimler
HTML e-posta
E-posta istemcileri harici resimleri varsayılan olarak engeller. Base64 data URI’ları, logolar ve simgeler gibi küçük resimler için bunu aşar. Ancak birçok e-posta istemcisinin toplam e-posta boyutu sınırları vardır (Gmail: kesmeden önce 102 KB), bu nedenle Base64 kullanımını minimumda tutun.
Tek sayfa uygulamalar
SPA’lar bazen yükleme sırasında düzen kaymasını önlemek için kritik ekran üstü resimleri Base64 kodlar. Resim verisi HTML ile birlikte gelir, bu nedenle eksik içerik flaşı olmaz.
Desteklenen Resim Formatları
Bu araç, tarayıcınızın desteklediği herhangi bir resim formatını işler: JPEG, PNG, GIF, WebP, SVG, BMP, ICO ve AVIF. MIME türü dosyadan otomatik olarak algılanır. Format spesifik sayfalar için JPG’den Base64’e, PNG’den Base64’e, SVG’den Base64’e ve WebP’den Base64’e dönüştürücülere bakın.
Base64 stringini indirilebilir bir resme dönüştürmek için Base64’ten Resme dönüştürücüyü kullanın. Sadece metin Base64 kodlama ve çözme için ana Base64 Kodlayıcı bunu halleder.