# Görüntüden Base64'e Dönüştürücü: HTTP İstekleri Olmadan Görüntüleri Gömün
Base64, bir görüntü gibi ikili verileri saf bir ASCII metin dizisine dönüştüren bir kodlama tekniğidir. Sonuç bir Data URI'dir: data:image/png;base64,... ile başlayan ve kodlanmış görüntünün tamamını içeren bağımsız bir URL. Bu kodu doğrudan HTML, CSS veya JSON'unuza gömerek, görüntü sunucuya ek bir HTTP isteği olmadan yüklenir; sıfır ağ gecikmesi, anında yükleme. # Base64 görüntüleri ne zaman kullanılır
Base64 lehine en büyük argüman, ağ isteklerinin ortadan kaldırılmasıdır. Bir web sayfasındaki her görüntü, bağlantı, DNS, TLS anlaşması ve gecikme yüküyle birlikte bir HTTP isteği anlamına gelir. Çok küçük kritik görüntüler (ana uygulama logosu, favicon, bir kullanıcı arayüzü simgesi) için bunları CSS veya HTML'de Base64 olarak gömmek bu maliyeti ortadan kaldırır ve tarayıcı henüz hiçbir şeyi önbelleğe almadan önce anında görüntülenmelerini garanti eder.Bu teknik, JavaScript ve CSS paketinin derleme zamanında oluşturulduğu SPA (Tek Sayfalı Uygulama) uygulamalarında özellikle güçlüdür: küçük görüntüleri pakete gömmek, ek istekler olmadan kodla birlikte yüklenmelerini garanti eder. Ayrıca, posta istemcilerinin harici görüntüleri engellediği ancak gömülü Data URI'leri neredeyse her zaman görüntülediği HTML e-postaları için de vazgeçilmezdir. # Base64 görüntüleri için kullanım durumları
-
HTML satır içi: Kritik simgeler için <img src="data:image/png;base64,...">.
-
CSS arka planı: Kullanıcı arayüzü SVG'leri için background-image: url("data:image/svg+xml;base64,...").
-
JSON ve REST API'ler: Görüntüleri JSON yüklerinde metin verisi olarak gönderin.
-
HTML e-postaları: İstemci harici URL'leri engellediğinde bile görüntülenen gömülü görüntüler.
-
SVG gömme: Raster görüntüleri satır içi veri olarak SVG dosyalarının içine gömün.
# Dönüşüm tarayıcıda nasıl çalışır
Bir görüntü seçtiğinizde veya sürüklediğinizde, tarayıcının FileReader API'si görüntüyü doğrudan diskten RAM'deki ikili veriler olarak okur. readAsDataURL() yöntemi, bu ikili baytları RFC 4648 algoritmasını kullanarak Base64 gösterimlerine dönüştürür; orijinal verilerin her 3 baytı Base64 alfabesinden 4 ASCII karakteri olarak temsil edilir. Sonuç, otomatik olarak algılanan doğru MIME türünü içerir.
Yalnızca küçük görüntüler için kullanın (10 KB'ın altında)
Base64 dosya boyutunu yaklaşık %33 artırır: 10 KB'lık bir görüntü ~13,3 KB mtn haline gelir. Küçük simgeler ve logolar için bu maliyet minimumdur ve HTTP isteğinin ortadan kaldırılması bunu telafi eder. Fotoğraflar veya büyük görüntüler için boyut yükü önemlidir; büyük görüntüler için her zaman bir CDN kullanın. # Base64 ne zaman KULLANILMAZ
Büyük görüntüler için Base64'ten kaçının — bunun yerine bir CDN kullanın
10-20 KB'tan daha büyük görüntüleriniz varsa, Base64 performansa zarar verir: HTML/CSS boyutunu şişirir, tarayıcının görüntüyü bağımsız olarak önbelleğe almasını engeller ve ayrıştırıcı devasa dizeyi işlerken oluşturmayı engeller. Büyük görüntüler için her zaman uygun önbellek başlıklarına sahip bir CDN'den sunun. # Uyumluluk ve gizlilik
Data URI'ler, modern tarayıcıların %100'ü ve çoğu e-posta istemcisiyle uyumludur. Aracımız her şeyi FileReader API aracılığıyla yerel olarak işler; görüntüleriniz asla cihazınızdan ayrılmaz. Bu, kurumsal görüntüler, özel ekran görüntüleri veya Base64'e dönüştürmeniz gereken herhangi bir gizli görsel içerik için uygun hale getirir. # Sonuç: En hızlı ve en özel gömme aracı
Görüntüleri Base64'e dönüştürmek, doğru uygulandığında hedeflenen ancak çok güçlü bir tekniktir. Sıfır HTTP isteğinin fark yarattığı küçük, kritik görüntüler için kullanın ve bir CDN'nin her zaman kazandığı büyük görüntüler için bundan kaçının. Aracımızla, herhangi bir sunucuya hiçbir şey yüklemeden anında Data URI alırsınız.