Görselden Base64'e

Nasıl çalışır?

Base64, ikili dosyayı yalnızca metin karakterleriyle ifade eden bir kodlamadır. Bir görseli bu biçime çevirdiğinizde onu doğrudan HTML veya CSS dosyanızın içine gömebilir, ayrı bir dosya isteği yapmaktan kurtulabilirsiniz. Bunun bedeli boyuttur: Base64 veriyi yaklaşık üçte bir oranında büyütür. Bu yüzden yöntem küçük ikonlar ve tekrar eden desenler için uygundur, büyük fotoğraflar için değil.

Bu araç image to base64, css base64 aramalarıyla da biliniyor.

Base64 nedir?

Base64, ikili (binary) veriyi yalnızca harf, rakam ve iki noktalama işaretinden oluşan 64 karakterlik güvenli bir alfabeyle yazma yöntemidir. Metinden başka bir şey taşıyamayan kanallardan — e-posta protokolleri, HTML/CSS dosyaları, JSON gövdeleri — dosya geçirmek için geliştirilmiştir. Kodlama şifreleme değildir: veriyi gizlemez, yalnızca biçimini değiştirir ve boyutunu yaklaşık üçte bir oranında büyütür.

Data URI nedir?

Data URI, "data:" ile başlayan ve dosyanın kendisini adresin içinde taşıyan özel bir URL türüdür: data:image/png;base64,… kalıbında önce dosyanın türü, ardından Base64 kodlanmış içeriği gelir. Tarayıcı bu adresi gördüğünde ağa çıkmadan görseli doğrudan adresin içinden çözer. Bu sayede küçük bir ikon, ayrı bir dosya isteği yapılmadan HTML veya CSS'in içine gömülebilir.

Base64 ile data URI aynı şey mi?

Aynı şey değildir ama iç içedir: Base64 kodlamanın kendisi, data URI ise o kodu tarayıcının anlayacağı adres kalıbına saran zarftır. Ham Base64 çıktısını bir API'ye veya yapılandırma dosyasına verirsiniz; data URI çıktısını ise doğrudan src özniteliğine veya CSS url() içine yapıştırırsınız. Bu araç her iki biçimi de üretir; hangi alanda kullanacağınıza göre çıktı türünü seçmeniz yeterlidir.

Ne zaman kullanmalı?

Birkaç kilobaytlık ikon, logo veya arka plan deseni gömmek sayfanın istek sayısını azaltır ve ilk açılışı hızlandırır. E-posta şablonlarında da işe yarar, çünkü bazı istemciler harici görselleri engeller.

Buna karşılık büyük görselleri gömmek HTML dosyasını şişirir ve tarayıcı önbelleğinden yararlanmayı engeller; her sayfa yüklemesinde veri yeniden iner.

• Uygun: küçük ikon, logo, desen, e-posta şablonu
• Uygun değil: fotoğraf, büyük kapak görseli, sık değişen içerik

Çıktı biçimleri arasındaki fark

Data URI, başında biçim bilgisi taşıyan tam adrestir ve doğrudan src ya da url() içine yazılabilir. CSS ve HTML seçenekleri bu adresi hazır bir satırın içine yerleştirir.

Ham Base64 ise yalnızca kodlanmış veridir; API'ye göndermek veya bir yapılandırma dosyasına koymak gibi durumlarda kullanılır.

Sık sorulanlar

Base64 görseli daha mı büyük oluyor?

Evet, kodlama veriyi yaklaşık üçte bir oranında büyütür. Bu yüzden yalnızca küçük görsellerde tercih edilmelidir.

Çıktıyı nasıl kullanırım?

CSS seçeneğinde çıkan satırı stil dosyanıza, HTML seçeneğinde çıkan etiketi sayfanıza yapıştırmanız yeterlidir.

Dosyam bir yere yükleniyor mu?

Hayır. Kodlama tarayıcınızın içinde yapılır, görsel hiçbir sunucuya gönderilmez.