Base64 Resim Kodlaması Nedir?
Base64 resim kodlaması, bir görsel dosyasının ikili baytlarını 64 yazdırılabilir karakter kullanarak bir ASCII dizesine dönüştürür. Sonuç; metin gösterimi gereken her yerde HTML, CSS, JavaScript, JSON veya Markdown içine doğrudan gömülebilir ve böylece ayrı bir görsel dosyasına ya da HTTP isteğine gerek kalmaz.
Kodlanmış veri çoğunlukla Veri URI'si içine sarılır ve data:image/png;base64,<payload> biçimini alır. Bu biçim RFC 2397 ile tanımlanmıştır; Base64 alfabesinin kendisi ise RFC 4648'de belirtilmiştir.
Geliştiricilerin bilmesi gereken kritik bir gerçek: Base64 ile kodlanmış görseller, orijinal ikili dosyadan yaklaşık %33 daha büyüktür. Bu matematiksel olarak kaçınılmazdır — ikili verinin her 3 baytı 4 ASCII karaktere dönüşür. Bu fazlalığın önemli olup olmadığı tamamen bağlama bağlıdır; aşağıda bunu ele alıyoruz.
Base64 Ne Zaman Kullanılır (ve Ne Zaman Kullanılmaz)
İnternetteki eğitimlerin çoğu Base64 gömmeyi ya "her zaman iyi" ya da "her zaman kötü" diye aşırı basitleştirir. Gerçek ise bağlama bağlıdır. Üretim kodumuzda kullandığımız karar matrisi şöyle:
| Senaryo | Base64 kullanılsın mı? | Gerekçe |
|---|---|---|
| Gömülü logolu e-posta imzası | ✅ Gerekli | Birçok e-posta istemcisi dış görsel bağlantılarını engeller |
| Kritik CSS içinde 2 KB altı simge | ✅ Önerilir | Bir gidiş-dönüşten tasarruf ettirir; kazanç %33'lük boyut maliyetini aşar |
| Tek dosyalık HTML demosu / hata raporu | ✅ Önerilir | Kendi kendine yeter, dış bağımlılık yok |
| Service Worker / PWA açılış varlıkları | ✅ Bazen | SW kurulumu sırasındaki kaynak yarışını önler |
| Birim testlerdeki test verileri | ✅ Önerilir | Testler kendi kendine yeterli ve okunabilir kalır |
| CSS veya HTML içinde 10 KB üstü görsel | ❌ Anti-desen | Kritik render yolunu engeller; ayrıca önbelleğe alınamaz |
| HTTP/2 ortamındaki herhangi bir görsel | ❌ Genellikle kötü | HTTP/2 çoğullama zaten istek maliyetini ortadan kaldırır |
| CSS arka planında kullanılan SVG | ❌ Anti-desen | URL kodlamalı SVG daha küçüktür ve CSS ile yönetilebilir |
Base64 gömme, bir HTTP isteğinden kurtulmak için %33'lük dosya büyümesini göze alır. HTTP/2'nin 2015'te yaygınlaşmasından sonra bu takas ~2 KB üzerinde nadiren karşılığını verir.
Resmi 4 Adımda Base64'e Dönüştürme
Ücretsiz resim Base64 dönüştürücümüz tamamen tarayıcınızda FileReader API'si ile çalışır. Hiçbir dosya yüklenmez — araç çalışırken tarayıcınızın Ağ sekmesinden bunu kendiniz doğrulayabilirsiniz.
Resmi bırakın veya yapıştırın
Sürükleyip bırakın, gözatmak için tıklayın ya da panonuzdaki ekran görüntüsünü yapıştırmak için Ctrl/⌘+V tuşlarına basın.
Çıktı formatını seçin
Ham, Veri URI'si, HTML, CSS, Markdown, JSON ve JavaScript dizesi çıktıları arasında geçiş yapın.
Kopyalayın veya indirin
Tek tıkla panoya kopyalayın ya da kodlanmış metni .txt dosyası olarak indirin.
Kodunuzda doğrulayın
HTML, CSS veya React bileşeninize yapıştırın. Veri URL'si her modern tarayıcıda doğal olarak görüntülenir.
Base64 Çıktısını Kullanmanın 7 Yolu
Aynı Base64 verisi, birbirinden farklı yedi üretim senaryosuna hizmet eder. Aracımızdaki her sekme, ihtiyacınız olan format için kopyalayıp yapıştırmaya hazır bir parçacık üretir.
E-posta imzası
Logonuzu gömün ki Outlook, Gmail ve Apple Mail'de dışarıdan yükleme olmadan görünsün.
<img src="data:image/png;base64,iVBOR..." alt="Logo" />CSS arka planı
Kritik CSS'te bir HTTP gidiş-dönüşünü ortadan kaldırmak için 2 KB altı simgeleri gömün.
background: url("data:image/svg+xml;base64,PHN2..")React önizlemesi
Dosyayı sunucuya göndermeden önce yükleme önizlemesi gösterin.
<img src={`data:image/jpeg;base64,${b64}`} />Markdown hata raporu
GitHub issue'ları için kendi kendine yeten markdown — zamanla kırılan görsel bağlantıları olmaz.
JSON API
Şema yalnızca metin alanlarına izin verdiğinde görselleri yapılandırılmış JSON içinde iletin.
{ "image": "data:image/png;base64,..." }JavaScript sabiti
Çalışma anında kaynak indirmeyi sıfırlamak için varlıkları doğrudan derlemenize gömün.
const logo = "data:image/png;base64,...";TinyImagePro ve Diğer Resim-Base64 Araçları
Bu aracı, altı farklı Base64 dönüştürücüyü kullandıktan ve her birinin bir yerde ödün verdiğini gördükten sonra geliştirdik — dosya boyutu sınırı, eksik çıktı formatları, sunucuya yükleme ya da hiç dokümantasyon olmaması. Alternatiflerin durumu şöyle:
| Araç | İstemci tarafı | Dosya sınırı | Çıktı formatı | Gerçek SSS |
|---|---|---|---|---|
| TinyImagePro | ✅ | RAM ile sınırlı | 7 | ✅ 8 soru |
| base64.guru | ❌ yükler | 50 MB | 10 | ❌ |
| base64-image.de | ✅ | 1 MB | 2 | Kısmen |
| browserling | ✅ | Belirtilmemiş | 1 | ❌ |
| jam.dev | ✅ | 4 MB | 3 | ❌ |
| codebeautify | ✅ | Belirtilmemiş | 1 | ❌ |
Hassas içerikler (tıbbi görüntüler, şirket içi ürün taslakları, yayınlanmamış logolar) söz konusu olduğunda istemci tarafı dönüştürme tek seçenektir. base64.guru'nun 50 MB sınırı etkileyici olabilir, ama dosyayı zaten yükleyemiyorsanız hiçbir anlam ifade etmez.
Performans ve En İyi Uygulamalar
%33'lük Base64 fazlalığı rakamı, geliştiricileri diğer tüm web performans sayılarından daha çok yanıltır. Sayfa yüklenmesi için asıl önemli olan, gzip ya da brotli sonrası sıkıştırılmış boyuttur — ve Base64 dizeleri ikili veriden çok farklı sıkışır.
| Varlık | Orijinal | Base64 | Fazlalık | Gzip sonrası |
|---|---|---|---|---|
| PNG simge (1 KB) | 1,0 KB | 1,4 KB | +%40 | +%5 |
| PNG (10 KB) | 10 KB | 13,4 KB | +%34 | +%12 |
| JPG fotoğraf (50 KB) | 50 KB | 66,8 KB | +%34 | +%30 |
| SVG (küçük simge) | 0,5 KB | 0,7 KB | +%40 | URL kodlamalı SVG: −%10 |
Gzip sıkıştırması Base64'ün boyut maliyetini belirgin şekilde azaltır. 10 KB'lık bir PNG, Base64 olarak ikili haline göre %34 daha büyüktür, ancak gzip sonrası yalnızca %12 daha büyüktür — bu da küçük varlıklarda Base64 gömmeyi göründüğünden daha az maliyetli kılar.
5 İyi Uygulama
2 KB altındaki varlıkları gömün. Bu boyutun üzerinde paket şişkinliği ve önbellek geçersizleştirme maliyeti, kazanılan istekten ağır basar.
LCP (Largest Contentful Paint) görsellerini asla gömmeyin. Bunlar kritik render'ı engeller ve tarayıcının onlara öncelik vermesini önler.
SVG için Base64 değil, URL kodlamalı SVG kullanın. URL kodlamalı SVG daha küçüktür ve CSS ile yönetilebilir (currentColor, animasyonlar).
Görselinizi önce PNG veya JPEG araçlarımızla sıkıştırın — Base64, ne kodlarsanız onun boyutunu devralır.
Base64 varlıklarını çapraz kaynaklı sunuyorsanız, img-src ve style-src içinde data: şemasına izin veren bir Content-Security-Policy ekleyin.
Resim Base64 Dönüştürme Hakkında Sık Sorulanlar
Görsellerim sunucularınıza yükleniyor mu? Hayır. TinyImagePro her dosyayı tarayıcının FileReader API'si ile okur ve yerel olarak işler. Sayfa yüklendikten sonra internet bağlantınızı kesseniz bile dönüştürme çalışmaya devam eder. Tarayıcınızın Ağ sekmesinden doğrulayabilirsiniz.
Base64 dizesi neden orijinal görselden yaklaşık %33 daha büyük? Base64, ikili verinin her 3 baytını 4 ASCII karakteriyle temsil eder — satır sonları ve data:image/...;base64, öneki hesaba katılmadan bile matematiksel olarak %33,3'lük bir fazlalık. Gzip sonrası küçük varlıklarda gerçek maliyet %5–15'e iner.
Bunu SVG için kullanabilir miyim? Evet, ancak özellikle SVG için URL kodlamalı SVG'yi değerlendirmelisiniz — hem daha küçüktür hem de CSS ile biçimlendirilebilir. Denemeler yapabilmeniz için SVG girişini destekliyoruz, ama vektörleştirme akışları için PNG SVG dönüştürücümüz daha doğru bir başlangıç noktasıdır.
Base64'ü tekrar resme nasıl çeviririm? Veri URL'sini tarayıcınızın adres çubuğuna yapıştırın — modern tarayıcılar data:image/... URL'lerini doğal olarak görüntüler. Programatik olarak JavaScript'te atob(), Python'da ise base64.b64decode() ile çözün. Ayrı bir Base64'ten resme aracı yol haritamızda.