Base64 nedir?
Base64, ikili verileri — örneğin bir görseli oluşturan baytları — düz metin karakterlerinden oluşan bir diziye çeviren bir kodlama sistemidir. Adı, her türlü veriyi temsil etmek için 64 farklı karakter kullanmasından gelir: büyük harfler, küçük harfler, rakamlar, + ve /.
Pratikte bu, her görsel dosyasının şuna benzer uzun bir metin dizisine çevrilebileceği anlamına gelir:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4
BCVMAAAAJRQAAAAElFTkSuQmCCBu biçimin adı Data URI (ya da data URL). URL, harici bir dosyayı işaret etmek yerine görselin metne kodlanmış içeriğini kendi içinde taşır. Tarayıcı bu diziyi okur ve görseli ek bir HTTP isteği yapmadan doğrudan çizer.
Bir Data URI'nin yapısı nasıl işler
Her görsel Data URI'si aynı kalıbı izler:
data:[MIME türü];base64,[kodlanmış veri]Bileşenler şunlardır:
- data: — şemayı belirten sabit ön ek
- [MIME türü] — görselin formatı:
image/png,image/jpeg,image/svg+xmlveyaimage/gif - ;base64, — içeriğin Base64 ile kodlandığını bildirir
- [kodlanmış veri] — görselin ikili içeriğinin metne çevrilmiş hâli olan uzun dizi
Şunu unutmamak gerekir: Base64 kodlaması veri boyutunu yaklaşık %33 büyütür. 3 KB'lık bir görsel yaklaşık 4 KB'lık bir diziye dönüşür. Bu bedelin nedeni, sistemin aynı baytları temsil etmek için daha fazla karaktere ihtiyaç duymasıdır.
HTML içinde Base64 nasıl kullanılır
Base64 bir görseli doğrudan HTML içinde göstermek için Data URI'yi <img> etiketinin src özniteliğine yazmanız yeterlidir:
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Simge">Tarayıcı bu öğeyi sıradan bir görsel gibi ele alır. CSS uygulayabilir, genişlik ve yükseklik verebilir, bir <img> etiketinin kabul edildiği her yerde kullanabilirsiniz.
CSS içinde Base64 nasıl kullanılır
CSS'te Data URI en çok arka plan görseli özelliklerinde kullanılır:
.simge {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucy...");
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
}Bu teknik özellikle küçük SVG simgelerde yaygındır; rengi CSS ile dinamik olarak değişen simgelerde ya da kitaplıklardaki yeniden kullanılabilir bileşenlerin parçası olan arka plan görsellerinde.
💡 SVG ipucu: SVG dosyaları Base64 olarak gömülebileceği gibi, hiç kodlanmadan doğrudan HTML içinde satır içi SVG olarak da kullanılabilir. Satır içi SVG genelde daha okunaklıdır ve CSS ile JavaScript üzerinden kolay yönetilir; Base64 ise SVG harici bir CSS dosyasındayken tercih edilir.
Base64 ne zaman kullanılır, ne zaman kullanılmaz
Base64 ile harici dosya arasındaki tercih, çoğunlukla görselin boyutuna ve kullanım bağlamına bağlıdır. Aşağıdaki tablo en yaygın senaryoları özetliyor:
| Durum | Öneri | Gerekçe |
|---|---|---|
| Küçük simgeler ve sprite'lar (< 2 KB) | ✅ Base64 uygun | Dosya boyutunu hissedilir ölçüde artırmadan bir HTTP isteğini ortadan kaldırır |
| CSS içine gömülü faviconlar | ✅ Base64 uygun | Pratiktir ve harici dosyaya bağımlı değildir |
| Yer tutucular ve yükleme iskeletleri | ✅ Base64 uygun | HTML ile birlikte anında yüklenir, içerik sıçraması olmaz |
| HTML e-postalar | ✅ Base64 uygun | Birçok e-posta istemcisi harici görselleri engeller |
| İçerik görselleri (fotoğraflar, bannerlar) | ❌ Kaçının | HTML'i ağırlaştırır ve tarayıcı önbelleğini devre dışı bırakır |
| 5 KB üzerindeki görseller | ❌ Kaçının | Boyut cezası (+%33) yüklenmeyi olumsuz etkiler |
| Birden çok sayfada kullanılan görseller | ❌ Kaçının | Harici dosya önbelleğe alınır; Base64 her sayfada yeniden indirilir |
Görsellerde Base64'ün artıları
Doğru bağlamda kullanıldığında Base64 gerçek faydalar sağlar:
- Sıfır ek HTTP isteği — görsel doğrudan HTML ya da CSS içindedir; bu da sayfanın üst kısmındaki kritik görsellerin yüklenme gecikmesini azaltır.
- Çevrimdışı ve e-postada çalışma — harici bir sunucuya bağlı olmadığı için görsel, bağlantı yokken (çevrimdışı uygulamalarda) ya da dış içeriği engelleyen e-posta istemcilerinde de görünür.
- Tam taşınabilirlik — görselleri Base64 olan tek bir HTML dosyası, hiçbir görsel bağlantısını yitirmeden gönderilebilir ya da arşivlenebilir.
- Bütünsel yükleme — görsel, HTML öğesi çizildiği anda görünür; ek gecikme olmaz. Arayüz simgelerinde yerleşim sıçramasını önlemek için idealdir.
Eksileri ve sınırları
Base64'ün dikkatle tartılması gereken bedelleri de var:
- %33 daha büyük boyut — metne çevirme, aktarılan veri hacmini her durumda artırır. Büyük görsellerde bu, hiçbir karşılığı olmayan fazladan kilobaytlar demektir.
- Tarayıcı önbelleği yok — harici dosyalardaki görseller tarayıcı tarafından önbelleğe alınır ve sayfalar arasında yeniden kullanılır. HTML'e gömülü Base64 ise belgeye bağlı olduğu için her ziyarette yeniden indirilir.
- Bakımı zorlaştırır — koddaki bir görseli değiştirmek, dosyayı yeniden dönüştürüp HTML ya da CSS içine uzun bir diziyi yapıştırmayı gerektirir; zahmetli ve hataya açık bir iştir.
- Kodun okunabilirliğini düşürür — CSS ya da HTML içindeki uzun Base64 dizileri dosyayı okumayı ve gözden geçirmeyi zorlaştırır.
- gzip ile verimli sıkışmaz — gzip ve Brotli tekrarlı metni iyi sıkıştırır, ama Base64 dizilerinin entropisi yüksektir ve ikili bir görsel dosyasının aksine sıkıştırmadan pek yarar görmez.
⚠️ Pratik kural: Base64'ü yalnızca 2 KB'ın altındaki görsellerde kullanın. Geri kalan her şey için optimize edilmiş harici bir dosya — özellikle WebP ya da AVIF formatında — site performansı açısından en verimli seçimdir.
Base64 ve site performansı (PageSpeed)
Base64'ün performansa etkisi, doğrudan neyin kodlandığına bağlıdır. Küçük simgelerde bir HTTP isteğinin ortadan kalkması, algılanan Time to First Byte süresini iyileştirebilir ve gereken paralel bağlantı sayısını azaltabilir. Sayfanın ana öğesi gömülü bir simge olduğunda bu, Core Web Vitals ölçümlerine — özellikle LCP (Largest Contentful Paint) değerine — olumlu yansıyabilir.
Öte yandan büyük görselleri Base64 olarak gömmek HTML belgesini doğrudan ağırlaştırır ve çizimin başlamasını geciktirir. Google PageSpeed Insights aşırı ağır HTML'e sahip sayfaları cezalandırma eğilimindedir. Fotoğraflar ve bannerlar için doğru yol her zaman optimize edilmiş harici bir dosyadır.
Görselleri web için optimize etmeniz gerekiyorsa ilk adım, en verimli formata sıkıştırıp dönüştürmektir. ImageTools'un Sıkıştır aracı bunu doğrudan tarayıcıda yapar; dosyalarınız hiçbir sunucuya gönderilmez.
Bir görsel Base64'e nasıl dönüştürülür
Bir görselden Base64 dizisi üretmenin birkaç yolu var:
- Çevrimiçi araçlar — tek seferlik kullanım için en hızlı yol. ImageTools'un Resimden Base64'e aracı her görseli tarayıcıda dönüştürür ve kodu kopyalamaya hazır biçimde verir.
- Terminal (Linux/macOS) —
base64 image.pngkomutu kodlanmış diziyi üretir. Data URI'nin tamamını almak için:echo "data:image/png;base64,$(base64 -w 0 image.png)". - Tarayıcıda JavaScript —
FileReaderAPI'siyle kullanıcının seçtiği her dosyayı eşzamansız biçimde Base64'e çevirebilirsiniz. - Webpack ve paketleyiciler — Webpack, Vite ve Rollup gibi araçların eklentileri, yapılandırılabilir bir boyut sınırına göre küçük dosyaları derleme sırasında otomatik olarak satır içi Base64'e çevirir.
Görseli hemen Base64'e dönüştürün
Görselinizi yükleyin, HTML ya da CSS'te kullanmaya hazır tam Data URI'yi alın. İşlemin tamamı tarayıcıda yapılır.
Base64 aracını aç →Sıkça sorulan sorular
Görselde Base64 nedir?
Base64, ikili verileri (örneğin görselleri) ASCII metnine kodlamanın bir yoludur. Görsel dosyasını ayrıca yüklemek yerine içeriği, doğrudan HTML ya da CSS içine gömülebilen ve bir Data URI oluşturan uzun bir karakter dizisine çevrilir.
Görseli Base64'e çevirmek site performansını kötüleştirir mi?
Kullanıma bağlı. Küçük görsellerde (simgeler, faviconlar, yer tutucular) Base64 bir HTTP isteğini ortadan kaldırarak performansı iyileştirebilir. Büyük görsellerde ise sayfayı ağırlaştırır ve tarayıcı önbelleğini engelleyerek performansı düşürür.
Base64 kullanmak için önerilen azami boyut nedir?
Pratik kural, Base64'ü yalnızca 2 KB'ın altındaki görsellerde kullanmaktır. Bunun üzerinde, kodlamanın getirdiği boyut artışı (yaklaşık %33) ve önbellek kaybı harici dosyayı daha verimli seçenek hâline getirir.
Base64 tüm tarayıcılarda çalışır mı?
Evet. Base64 tabanlı Data URI biçimi, Chrome, Firefox, Safari, Edge ve bunların mobil sürümleri dahil tüm modern tarayıcılarda desteklenir. IE6 gibi çok eski tarayıcılar desteklemez ama bu bugün pratikte bir sorun değil.
Bir görsel çevrimiçi olarak Base64'e nasıl dönüştürülür?
ImageTools'un Resimden Base64'e aracını kullanabilirsiniz. Görseli yüklemeniz yeterli; araç Base64 dizisini ve HTML ya da CSS'te kullanıma hazır Data URI kodunu otomatik üretir.