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

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.