Görüntüden Base64'e dönüşüm nasıl çalışır
Tüm dönüşüm, File API ve yerleşik btoa fonksiyonu kullanılarak tarayıcınızda çalışır — hiçbir codec kütüphanesi indirilmez ve hiçbir sunucu görüntüyü görmez. İşte baştan sona pipeline:
- Görüntüyü bırakır veya seçersiniz. Tarayıcı onu yerel diskinizdeki Blob olarak okur, baytları hiçbir zaman sunucuya kopyalamaz.
- Dosya 1 MB'lık parçalar halinde okunur ve her parçanın baytları ikili bir dizeye eklenir. Parçalama, büyük görüntülerin JavaScript çağrı yığınını taşırmasını önler.
- İkili dize btoa'ya iletilir; bu fonksiyon her üç baytı A–Z, a–z, 0–9, artı / alfabesinden dört Base64 karakteriyle eşler.
- Dosyanın MIME türü (image/png, image/jpeg vb.) File nesnesinden okunur ve data: öneki olarak eklenir; böylece eksiksiz bir data:image/…;base64,… URI oluşturulur.
- Sayfa bu URI'den dört çıktı derler — tam data URI, önek olmayan ham Base64, yapıştırmaya hazır
etiketi ve CSS background-image snippet — her biri kendi kopyalama düğmesiyle.
Neden görüntüyü data URI olarak kodlayalım?
- Küçük bir logo veya simgeyi data URI olarak satır içine almak ayrı bir ağ gidiş-dönüşünü ortadan kaldırır; bu nedenle sayfa veya e-posta ilk kareyi biraz daha hızlı render eder.
- Görüntüleri satır içine alınmış bir sayfa veya stil sayfası bağımsız bir bütündür. Çevrimdışı çalışır ve yanında bir varlık klasörü sürüklemeden taşınabilir.
- Birçok posta istemcisi varsayılan olarak bağlantılı uzak görüntüleri engeller. Bir logoyu Base64 olarak satır içine alırsanız mesaj açıldığı anda görünür, uzak getirme gerekmez.
- Kodlama tamamen tarayıcınızda gerçekleşir; bu nedenle hassas görüntüler hiçbir zaman üçüncü taraf sunucusuna ulaşmaz. Bu durum ekran görüntülerini, kimlik taramalarını ve dahili diyagramları kapsar.
Base64 görüntülerinin yaygın kullanımları
Data URI'ler, görüntünün Base64'ün eklediği ~%33'lük boyut artışından daha pahalıya mal olan ayrı bir istekten küçük olduğu her yerde ortaya çıkar. Üç kalıp sürekli karşımıza çıkar:
- CSS satır içi simgeleri: bir stil sayfasına background-image: url(data:…) olarak bırakılan 1–2 KB'lık bir sprite veya simge, kural tamamen bağımsız hale gelir.
- E-posta imzaları ve bültenler: data URI src ile
olarak gömülmüş bir logo, istemci uzak görüntüleri engellediğinde bile render olur.
- Derleme aracı satır içi ekleme: Webpack ve Vite gibi bundler'lar varlıkları otomatik olarak belirli bir bayt eşiğinin altında satır içine alır; bu araç tam olarak bu çıktının nasıl göründüğünü önizlemenizi sağlar.
Base64 görüntüsü nasıl görünür?
Küçük bir 1×1 şeffaf PNG alın. Ham baytları yalnızca 67 bayttır, ancak kodlanmış hali iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= dizisine dönüşür ve tam data URI data:image/png;base64,iVBORw0KGgo… olur. Kodlanmış formun orijinalden yaklaşık üçte bir daha büyük olduğuna dikkat edin. Bu, ikili verilerin doğrudan metin içine güvenle gömülmesinin bedeli.
Görüntüm herhangi bir yere yükleniyor mu?
Hayır. Dönüşüm, görüntüyü tamamen cihazınızda kodlamak için tarayıcının File API'sini ve yerel btoa fonksiyonunu kullanır. Bunu kendiniz doğrulayabilirsiniz: tarayıcınızın geliştirici araçlarını açın, Ağ paneline geçin ve bir görüntü dönüştürün — göreceğiniz tek istekler sayfa yüklemesi ve reklamlardır. Görüntü şeklinde hiçbir şey sunucuya gönderilmez; bu da ekran görüntüleri, kimlik belgeleri ve dahili diyagramlar için güvenli hale getirir.
Base64 çıktısı neden orijinal görüntümden daha büyük?
Base64, her üç bayt ikili veriyi dört ASCII karakteriyle temsil eder; bu nedenle kodlanmış metin kaynak dosyadan yaklaşık %33 daha büyüktür. Bu sayfadaki data URI boyutu göstergesi tam şişirilmiş uzunluğu gösterir. Bu ek yük nedeniyle data URI'ler yalnızca küçük görüntüler için anlamlıdır — 2 MB'lık bir fotoğrafı satır içine almak HTML veya CSS'inizi ayrı bir istekten çok daha fazla şişirir. Kural olarak yaklaşık 4 KB'ın altındaki görüntüleri satır içine alın, daha büyükler için bağlantı verin.
Hangi görüntü formatlarını dönüştürebilirim?
Tarayıcınızın görüntü olarak tanıdığı herhangi bir format çalışır; çünkü araç resmi çözmek yerine ham baytları okur. Bu PNG, JPEG, GIF, WebP, SVG ve BMP'yi kapsar. MIME türü doğrudan dosyadan okunur, bu nedenle data: öneki her zaman gerçek formatla eşleşir — JPEG data:image/jpeg, SVG data:image/svg+xml üretir. SVG özel bir not almayı hak eder: zaten metin olduğundan SVG'ler için URL kodlamalı data URI çoğunlukla Base64 sürümünden daha küçüktür; ancak bu araç tutarlılık için Base64 formunu yayar.
Görüntü bırakın, ihtiyacınız olan data URI veya snippet'i kopyalayın ve HTML, CSS veya e-posta şablonunuza yapıştırın. Her bayt cihazınızda kalır. Yükleme yok, hesap yok, sunucu gidiş-dönüşü yok.