Base64 Nedir, Web Siteleri Görsellerde Neden Kullanır?

Base64, görsel gibi herhangi bir ikili (binary) dosyayı yalnızca 64 güvenli karakterle düz metin olarak yazmanın bir yoludur: A'dan Z'ye büyük ve küçük harfler, 0'dan 9'a rakamlar, bir de + ve /. Web siteleri bunu görsellerde kullanır, çünkü ortaya çıkan metin doğrudan HTML, CSS veya JSON'un içine yapıştırılabilir; böylece küçük bir simge ayrı bir dosya olarak indirilmek yerine sayfanın içinde gelir. Tek dezavantajı boyut: Base64 metni, temsil ettiği dosyadan yaklaşık üçte bir daha büyüktür. Bu rehberde kodlamanın nasıl çalıştığını, gerçekten nerede işe yaradığını ve ne zaman normal bir görsel dosyasının daha iyi bir seçim olduğunu anlatıyoruz.

Base64 kodlaması aslında ne yapar?#

Bilgisayarlar bir görseli ham baytlar olarak saklar ve bu baytların çoğu yazdırılabilir bir karaktere karşılık gelmez. Metin taşımak için tasarlanmış her şeyde bu bir sorundur: bir HTML özniteliği, bir CSS dosyası, bir JSON alanı ya da bir e-postanın gövdesi. Base64 bu sorunu, baytları her metin sisteminden bozulmadan geçen karakterlerle yeniden yazarak çözer.

Yöntem, çoğu yazılımın izlediği standart olan RFC 4648 ile tanımlanmıştır. Küçük gruplar halinde çalışır:

1. Dosyadan 3 bayt alınır (24 bit).
2. Bu 24 bit, her biri 6 bitlik 4 parçaya bölünür.
3. Her 6 bitlik parça 0 ile 63 arasında bir sayıdır, bu yüzden 64 karakterlik alfabedeki karşılığına bakılır.

Klasik örnek Man kelimesidir. Üç baytı, TWFu şeklinde dört karaktere dönüşür. Dosyanın uzunluğu 3'ün katı değilse çıktının sonuna dolgu olarak bir ya da iki = işareti eklenir; Base64 metinlerinin çoğunun = veya == ile bitmesinin nedeni budur.

Base64'ün olmadığı bir şey var: şifreleme. Herkes onu anahtar ya da parola olmadan anında çözebilir. Yalnızca verinin nasıl yazıldığını değiştirir, kimin okuyabileceğini değil.

Base64 dosyaları neden yaklaşık %33 büyütür?#

Her 3 bayt 4 karaktere dönüştüğü için Base64 çıktısı her zaman girdinin yaklaşık 4/3'ü kadardır, yani kabaca %33 daha büyüktür. Bu bir tahmin değil, basit bir hesap:

Bazı sistemler ayrıca her 76 karakterde bir satır sonu ekler (e-posta bunu yapar, RFC 2045'te anlatıldığı gibi), bu da boyutu biraz daha artırır. Web sunucusundaki metin sıkıştırması (gzip veya Brotli) bu fazlalığın bir kısmını geri kazanır, ama kodlanmış bir görsel hiçbir zaman orijinal dosyadan küçük olmaz.

Web siteleri görsellerde Base64'ü nasıl kullanır?#

Web'de Base64 görseller neredeyse her zaman bir data URL olarak karşınıza çıkar: normalde görselin bağlantısının duracağı yere görselin kendisi yazılır. MDN'nin data URL sayfasında anlatılan biçim şuna benzer:

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

Aynı şey CSS'te de çalışır, örneğin arka plan görseli olarak:

.icon {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");
}

Tarayıcı metni okur, onu orijinal PNG'ye geri çözer ve ayrı bir dosya indirmiş gibi aynen gösterir. Kendi görseliniz için bu kod parçasını almak isterseniz bir JPG, PNG, WebP veya AVIF dosyasını görselden Base64'e dönüştürücüye bırakın ve hazır img etiketini, CSS kuralını ya da düz metni kopyalayın.

Base64 görseller ne zaman iyi bir fikir?#

Bir görseli metin olarak gömmek birkaç belirli durumda mantıklıdır:

• Küçük simgeler ve arayüz grafikleri. CSS'inize gömülen küçük bir simge stil dosyasıyla birlikte gelir; geç belirmez, tek başına yüklenemeyip kırık da görünmez.
• Kendi kendine yeten dosyalar. Tek bir HTML dosyası, bir e-posta şablonu ya da hiçbir dış dosyaya ihtiyaç duymadan çalışmasını istediğiniz bir belge, görsellerini içinde taşıyabilir.
• Metin olarak taşınması gereken veriler. JSON API'leri, yapılandırma dosyaları ve panoya kopyalanan kod parçaları ham bayt tutamaz, bu yüzden içlerindeki görseller genellikle Base64'tür. E-posta ekleri de aynı nedenle arka planda Base64'tür.
• Hızlı prototipler ve demolar: bir görseli bir yerde barındırmak yerine tek bir metin yapıştırmayı tercih ettiğiniz durumlar.

Base64 görsellerden ne zaman kaçınmalı?#

Gerçek bir web sitesindeki görsellerin çoğu için normal bir görsel dosyası daha iyi bir seçimdir:

• Daha büyük indirmeler. Gömülen her görsel, dosyanın kendisinden yaklaşık üçte bir daha fazla bayt tutar.
• Ayrı önbellekleme yok. Base64 görsel, onu içeren HTML veya CSS'in bir parçası olarak önbelleğe alınır. O stil dosyasında tek bir satırı değiştirdiğinizde tarayıcı görseli de yeniden indirir; ayrı bir görsel dosyası ise kendi başına önbellekte kalır.
• Sayfayı geciktirir. Görsel metni, tarayıcının sayfayı çizmeden önce indirmesi gereken HTML veya CSS'in içindedir. Gömülü büyük bir fotoğraf, normalde önce görünecek metin de dahil her şeyi yavaşlatır.
• İstek sayısı eskisi kadar önemli değil. Görsel gömmenin asıl gerekçesi bir isteği kurtarmaktı, ama HTTP/2 tarayıcının birçok küçük dosyayı tek bir bağlantı üzerinden almasını sağlıyor; bu yüzden bugün bu kazanç çok daha küçük.

Mantıklı bir kural: yalnızca en fazla birkaç kilobaytlık görselleri gömün, geri kalan her şeyi normal dosya olarak sunun. Fotoğraflarda asıl kazanç genellikle dosyanın kendisini küçültmektir; görsel sıkıştırıcı bunu tarayıcınızda yapar. Görselleri kaliteden ödün vermeden sıkıştırma rehberimiz bunu ne kadar zorlayabileceğinizi anlatıyor.

SVG özel bir durum#

SVG dosyaları zaten metindir, bu yüzden bir data URL'ye girmek için aslında Base64'e ihtiyaç duymazlar. Bunun yerine SVG kodunu URL kodlamasıyla yazabilirsiniz; %33'lük fazlalığı atladığı için bu genellikle daha küçük çıkar. Yine de Base64 daha basittir ve tırnak işaretleri ile özel karakterlerden kaynaklanan sorunları önler. SVG'den Base64'e dönüştürücü size iki sürümü de verir, siz seçersiniz. Bir SVG'nin aslında neler içerdiğinden emin değilseniz SVG dosyası nedir yazımız bu konuyu anlatıyor.

İki dönüştürücü de tamamen tarayıcınızda çalışır, yani görselleriniz hiçbir zaman yüklenmez. İlgili araçları görsel araçları ve geliştirici araçları sayfalarında bulabilirsiniz.

Sık sorulan sorular#

Base64 kodlaması basitçe nedir? Base64 kodlaması, görsel gibi herhangi bir dosyayı 64 güvenli karakterle (A'dan Z'ye büyük ve küçük harfler, 0'dan 9'a rakamlar, + ve /) düz metin olarak yazmanın bir yoludur. HTML, CSS, JSON ve e-posta gibi yalnızca metinle çalışan sistemlerden ikili verinin geçebilmesini sağlar.

Web siteleri görsellerde neden Base64 kullanır? Web siteleri, küçük bir görseli ayrı bir dosya olarak indirmek yerine doğrudan HTML veya CSS'in içine koyabilmek için Base64 kullanır. Bu en çok küçük simgelerde ve e-posta şablonları gibi kendi kendine yeten dosyalarda işe yarar.

Base64 görselleri büyütür mü? Evet, Base64 görselleri yaklaşık %33 büyütür, çünkü orijinal dosyanın her 3 baytı 4 karakterlik metne dönüşür. 30 KB'lık bir görsel kabaca 40 KB'lık Base64 metnine dönüşür.

Base64 bir şifreleme yöntemi mi? Hayır, Base64 bir şifreleme değildir, çünkü herkes onu anahtar ya da parola olmadan anında çözebilir. Yalnızca verinin nasıl yazıldığını değiştirir, kimin okuyabileceğini değil; bu yüzden hassas bilgileri gizlemek için asla kullanmayın.

Base64 görselleri ne zaman kullanmamalıyım? Büyük görsellerde ve fotoğraflarda Base64 kullanmamalısınız, çünkü %33'lük ek boyut ve ayrı önbelleklemenin olmaması sayfanızı yavaşlatır. Bunları normal görsel dosyaları olarak sunun ve yalnızca en fazla birkaç kilobaytlık görselleri gömün.

Bir görseli Base64'e nasıl çeviririm? Bir görseli Base64'e çevirmek için onu ConvertOwl'un görselden Base64'e aracı gibi bir dönüştürücüye bırakmanız yeterli; araç tarayıcınızda çalışır ve size kodlanmış metni, yapıştırmaya hazır bir img etiketi veya CSS kuralıyla birlikte verir.

Kısaca#

• Base64 her dosyayı 64 güvenli karakterle metin olarak yazar. Bir kodlamadır, şifreleme değildir.
• Her 3 bayt 4 karaktere dönüşür, bu yüzden sonuç yaklaşık %33 daha büyüktür.
• Web siteleri bunu küçük görselleri data URL olarak doğrudan HTML veya CSS'e koymak için kullanır.
• Yalnızca küçük görselleri gömün; fotoğrafları ve daha büyük her şeyi normal dosya olarak sunun.
• Görselden Base64'e dönüştürücüyü ya da SVG'den Base64'e dönüştürücüyü deneyin, daha fazlası için teknoloji yazılarımıza göz atın.