Base64 ve URL encoding nedir, ne zaman kullanılır?

Bir e-postadaki ekin, bir web sayfasına gömülü küçük bir görselin ya da tarayıcının adres çubuğundaki %C5%9F gibi garip görünen karakterlerin arkasında iki basit kodlama yöntemi vardır: Base64 ve URL encoding (yüzde kodlama). İkisi de verinin, onu taşıyan sistemin “anlayabileceği” karakterlerle yazılmasını sağlar. Bu rehberde nasıl çalıştıklarını, nerede kullanıldıklarını ve sık yapılan hataları anlatıyoruz. Denemek için Base64 çevirici ve URL encode/decode araçlarımızı kullanabilirsiniz.

Kodlama, şifreleme ve özetleme farkı

Base64 ile “gizlenmiş” bir parola, aslında açık metinden farksızdır. Parolaların nasıl güvenli saklandığını güçlü şifre rehberimizde ve özet fonksiyonlarını hash oluşturucu aracında görebilirsiniz.

Base64 nasıl çalışır?

Bilgisayardaki tüm veriler baytlardan oluşur; ama e-posta gibi eski metin tabanlı sistemler her baytı güvenle taşıyamaz. Base64, veriyi yalnızca 64 güvenli karakterle (A–Z, a–z, 0–9, + ve /) ifade eder:

1. Veri 3 baytlık (24 bit) gruplara ayrılır.
2. Her grup 6 bitlik 4 parçaya bölünür.
3. Her 6 bitlik değer (0–63) tablodaki bir karaktere karşılık gelir.
4. Son grup eksikse sona = dolgu karakteri eklenir.

Örnek:

"Merhaba"        → TWVyaGFiYQ==
"Merhaba dünya"  → TWVyaGFiYSBkw7xueWE=

İkinci örnekteki “ü” harfi UTF-8’de iki bayt olduğu için kodlanmış çıktıda w7x olarak görünür. Base64’e çevirmeden önce metnin hangi karakter kodlamasında olduğu (neredeyse her zaman UTF-8) önemlidir.

Base64 nerelerde kullanılır?

• E-posta ekleri (MIME): Ekler Base64 ile kodlanır; bu yüzden 10 MB’lık bir dosya e-postada yaklaşık 13,3 MB yer kaplar. E-posta ek sınırlarıyla ilgili ayrıntılar PDF küçültme rehberimizde.
• Data URL’ler: Küçük görselleri HTML veya CSS içine gömmek için:

<img src="data:image/png;base64,iVBORw0KGgo..." alt="simge">

• API’ler: JSON içinde dosya veya görsel göndermek.
• HTTP Basic Authentication: kullanici:parola Base64 ile kodlanır; bu yüzden yalnızca HTTPS üzerinden kullanılmalıdır.
• JWT: Token’ın başlık ve gövde kısımları Base64URL ile kodlanmış JSON’dır.

Base64URL

Standart Base64’teki + ve / karakterleri URL’lerde özel anlam taşır. Base64URL bunların yerine - ve _ kullanır ve genellikle = dolgusunu atar. JWT ve bazı API’ler bu varyantı kullanır; standart Base64 çözücüyle açılmaya çalışıldığında hata verebilir.

URL encoding (yüzde kodlama) nasıl çalışır?

URL’ler yalnızca sınırlı bir ASCII karakter kümesini doğrudan içerebilir. ?, &, =, #, / gibi karakterlerin özel anlamı vardır. Bu karakterleri veri olarak kullanmak veya ASCII dışı karakterleri (Türkçe harfler, emojiler) yazmak için yüzde kodlama kullanılır:

1. Karakter UTF-8 baytlarına çevrilir.
2. Her bayt % ve iki onaltılık rakamla yazılır.

Örnek: “çay & simit” → %C3%A7ay%20%26%20simit

JavaScript’te doğru fonksiyon

encodeURIComponent('çay & simit'); // '%C3%A7ay%20%26%20simit'
encodeURI('https://ornek.com/arama?q=çay');
// 'https://ornek.com/arama?q=%C3%A7ay' (/, ?, = korunur)

• encodeURIComponent: Bir parametre değerini kodlarken kullanılır; &, =, / dahil her şeyi kodlar.
• encodeURI: Tam bir URL’yi kodlarken kullanılır; URL yapısını bozan karakterlere dokunmaz.

Parametre değerinde encodeURI kullanmak, değerin içindeki & işaretinin yeni bir parametre gibi yorumlanmasına yol açar.

SEO açısından URL’ler

URL yollarında Türkçe karakter kullanmak teknik olarak mümkündür, ancak paylaşıldığında %C5%9F gibi uzun ve okunaksız adreslere dönüşebilir. Bu yüzden genellikle “şişe” yerine “sise” gibi sadeleştirilmiş yazım tercih edilir. Arama dostu URL’ler oluşturmak için SEO URL oluşturucu aracını kullanabilirsiniz.

Pratik örnekler

Bir görseli CSS’e gömmek

Çok küçük bir simgeyi ayrı bir HTTP isteği yapmadan CSS içine gömebilirsiniz:

.ikon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
}

SVG dosyaları için Base64 yerine doğrudan URL kodlanmış SVG kullanmak genellikle daha kısa sonuç verir. Fotoğraflar için ise data URL yerine normal dosya kullanmak ve resim sıkıştırma aracıyla boyutu küçültmek daha doğru bir yaklaşımdır.

Bir arama bağlantısı oluşturmak

Kullanıcının yazdığı “çay & simit” ifadesiyle bir arama bağlantısı oluşturuyorsanız:

Yanlış: /arama?q=çay & simit
Doğru:  /arama?q=%C3%A7ay%20%26%20simit

Yanlış örnekte & işareti yeni bir parametre başlatır ve sunucu yalnızca “çay “ ifadesini alır.

Sorun giderme

Bir e-postada veya logda =?UTF-8?B?...?= biçiminde bir ifade görürseniz, bu Base64 ile kodlanmış bir e-posta başlığıdır (örneğin Türkçe karakterli bir konu satırı). Ortadaki kısmı Base64 çözücüyle çevirerek okunabilir hale getirebilirsiniz. Benzer şekilde adres çubuğundan kopyalanan %C4%B1 gibi dizileri URL çözücüyle Türkçe karakterlere geri çevirebilirsiniz.

Sık yapılan hatalar

• Base64’ü şifreleme sanmak: Gizli veri için gerçek şifreleme kullanın.
• Çift kodlama: Zaten kodlanmış bir değeri tekrar kodlamak %25C5%259F gibi bozuk sonuçlar üretir (% → %25).
• Büyük görselleri data URL olarak gömmek: Boyut %33 artar ve tarayıcı önbelleğinden yararlanılamaz; yalnızca çok küçük simgeler için uygundur.
• Karakter kodlamasını karıştırmak: UTF-8 dışındaki bir kodlamayla kodlanan Türkçe metin, çözüldüğünde bozuk karakterler (ç, ü gibi) üretir.
• Base64 ile Base64URL’yi karıştırmak: - ve _ içeren bir dizgi standart çözücüde hata verebilir.