Base64 vs Binary: Dosya Boyutu Ek Yükü, Ağ Gecikmesi ve Web Performansı

Matematiksel %33 Bayt Enflasyon Cezası

Web geliştirmede, Veri URI'lerinde Base64 kodlu dizelerle sıklıkla karşılaşırsınız (ör. data:image/png;base64,iVBORw0KGgo...). Vaat cazip: HTTP isteği gidiş dönüşünü kaydetmek için varlığı doğrudan HTML veya CSS'ye gömün.

Ancak, Base64 kaçınılmaz bir fiziksel bayt cezasıyla birlikte gelir:

• Ham bir ikili bayt, 8 bit bilgiden oluşur ($2^8 = 256$ olası değer).
• Metin protokolleri (e-posta veya erken HTTP gibi), ham 8 bit baytları güvenilir bir şekilde iletemezdi. kontrol karakterlerini bozuyor.
• Base64 bunu, her bir karakterin temsil ettiği 64 güvenli ASCII karakterini (A-Z, a-z, 0-9, +, / seçerek çözer 6 bit ($2^6 = 64$).

24 bit ikili veriyi (3 bayt) kodlamak için, algoritmanın 4 ASCII karakteri (24 bit) yayması gerekir.

$$\frac{4 \text{ karakter}}{3 \text{ bayt}} = 1,3333...$$

İletim başlıkları hesaplanmadan önce her Base64 varlığının kaynak dosyadan en az %33,3 daha büyük olması garanti edilir.

Base64 Veri URI'leri Gerçekten Anlamlı Olduğunda

Boyut cezasına rağmen, Base64 satır içi oluşturma belirli senaryolarda mimari olarak gerekçelendirilmiştir:

1. Ekranın Üst Kısmındaki Kritik Mikro Simgeler: Kritik CSS'ye 200 baytlık bir SVG logo simgesinin satır içine yerleştirilmesi, stillendirilmemiş simgenin (FOIC) görünür bir şekilde yanıp sönmesini önler.
2. Çevrimdışı Veriler Depolama: Kullanıcı imzalarını veya tuval dışa aktarmalarını yerel olarak localStorage veya IndexedDB içinde metin dizeleri olarak depolama. Bunun tersine, 3B ağlar gibi ağır dosyalar ikili olarak kalmalıdır; bir STL'den GCODE'a Dönüştürücü (STL to GCODE) (Stl To Gcode Converter), metin kod çözme cezaları olmadan takımyollarını dilimlemek için ham ikili bayt arabelleklerini doğrudan okur (STL'yi GCODE'a dönüştürmeyle ilgili kılavuzumuza bakın) çevrimiçi).
3. E-posta HTML Şablonları: Birçok kurumsal masaüstü e-posta istemcisi (Outlook gibi) varsayılan olarak harici görüntü indirmelerini engeller, ancak satır içi Base64 grafikleri oluşturur.

Base64 Satır İçi Sayfa Hızını Yok Edince

2 KB ila 5 KB'den büyük resimleri satır içi yapmak, modern web sitelerinde bir anti-kalıptır:

• Ayrıştırıcı Engelleme: Tarayıcının HTML ve CSS ayrıştırıcıları tek iş parçacıklıdır. 50KB Base64 dizesiyle karşılaşıldığında, dizelerin kodu çözülürken DOM yapımı durdurulur.
• Önbelleğin Geçersiz Kılması: Ana index.html'nizde bir resim satır içi ise, bir paragraftaki tek bir yazım hatasını değiştirmek kullanıcıları zorlar bir sonraki ziyaretlerinde gömülü görüntünün tamamını yeniden indirmek için.
• Bellek Yükü: Tarayıcının hem ham kodu çözülmüş bitmap'i hem de Base64 dizesini aynı anda bellekte saklaması gerekir.

HTTP/2 ve HTTP/3: Çoğullama Kuralları Neden Değiştirdi

HTTP/1.1 çağında, tarayıcılar alan başına 6 eşzamanlı TCP bağlantısıyla sınırlıydı. Resimleri satır içi yapmak, TCP bağlantı anlaşması gecikmesini önlemek için yapılan umutsuz bir hackti.

Modern web standartları (HTTP/2 ve HTTP/3) bunu çoklama ile çözdü: yüzlerce statik varlık, sıfır hat başı engellemeyle tek bir TCP/QUIC bağlantısı üzerinden eşzamanlı olarak akış sağlar. Base64 satır içi oluşturmanın tarihsel motivasyonu neredeyse ortadan kalktı.

ToolDolfen'in Base64 Kodlayıcısını / Kod Çözücüsünü kullanarak varlıklarınızı yerel olarak kodlayın, kodunu çözün ve karşılaştırın.