Base64, ikili (binary) verileri yalnızca harf, rakam ve birkaç işaretten oluşan düz metne çevirmenin bir yoludur. Görseller için en sık kullanıldığı biçim Data URI'dir: görselin tamamı data:image/png;base64, ile başlayan tek bir metin satırına dönüşür ve ayrı bir dosyaya gerek kalmadan HTML'e, CSS'e ya da JSON'a yazılabilir. Web geliştiricileri, e-posta şablonu hazırlayanlar ve API test edenler bu dönüşüme sık ihtiyaç duyar.
Araç iki sekmeden oluşur ve her iki yönde de işlem tarayıcında yapılır; ne görselin ne de yapıştırdığın kod bir sunucuya gönderilir.
Nasıl kullanılır?
Resimden Base64'e
- Resimden Base64'e sekmesini aç ve görselini sayfaya bırak.
- Araç dört çıktı üretir: Data URI, ham Base64 metni, HTML img etiketi ve CSS background-image satırı.
- İhtiyacın olan çıktının yanındaki kopyala düğmesine bas ve kodunu yapıştır. Kodlanmış metnin uzunluğu da ekranda gösterilir.
Base64'ten resme
- Base64'ten resme sekmesini aç.
- Bir Data URI ya da ham Base64 metni yapıştır.
- Araç görselin formatını algılar ve önizlemesini gösterir; görseli dosya olarak indirebilirsin.
Hangi çıktıyı kopyalayacağın, kodu nereye yapıştıracağına bağlıdır. Görseli doğrudan bir sayfanın içine koyacaksan HTML img etiketini, bir stil dosyasında arka plan ya da küçük bir simge olarak kullanacaksan CSS satırını al. JavaScript, JSON veya bir adres beklenen herhangi bir alan için Data URI uygundur. Görsel türünü ayrı bir alanda isteyen API'ler ise genellikle yalnızca ham Base64 metnini bekler.
Base64 neden yaklaşık yüzde 33 daha büyük?
Base64, her 3 baytlık veriyi 4 karakterle ifade eder. Her karakter yalnızca 6 bitlik bilgi taşıdığı için metin, orijinal dosyadan yaklaşık üçte bir daha uzundur. Örneğin 30 KB'lık bir ikon yaklaşık 40 KB'lık bir metne, 300 KB'lık bir fotoğraf ise yaklaşık 400 KB'lık bir metne dönüşür. Araç bu yüzden kodlanmış uzunluğu gösterir ve bu farkı hatırlatır.
Bu artış küçük görsellerde önemsizdir, büyük görsellerde ise ciddi bir yüktür. Kodlamadan önce görseli resim sıkıştır ya da PNG küçült araçlarıyla hafifletmek, ortaya çıkan metni de aynı oranda kısaltır.
Ne zaman kullanmalı, ne zaman kaçınmalı?
Base64 şu durumlarda pratiktir:
- Birkaç KB'lık küçük ikonlar ve basit grafikler.
- Tek bir dosyadan oluşması gereken HTML sayfaları ya da raporlar.
- Görseli metin olarak bekleyen API'ler ve test verileri.
Şu durumlarda ise ayrı bir görsel dosyası daha doğrudur:
- Büyük fotoğraflar. Metin sayfanın kodunu şişirir, sayfa görsel inmeden önce de yavaşlar.
- Birçok sayfada tekrar eden görseller. Ayrı dosyalar tarayıcı önbelleğinde saklanır; koda gömülü görsel ise her sayfayla yeniden iner.
- E-postalar. Bazı e-posta programları Data URI ile gömülmüş görselleri göstermez. Şablonunu farklı programlarda mutlaka dene.
Sık sorulan sorular
Base64 bir şifreleme yöntemi mi?
Hayır. Base64 yalnızca bir kodlama biçimidir; herkes metni kolayca görsele geri çevirebilir. Gizli kalması gereken bir görseli Base64'e çevirmek onu korumaz.
Data URI ile ham Base64 arasındaki fark ne?
Ham Base64 yalnızca kodlanmış veridir. Data URI ise başına görselin türünü belirten data:image/jpeg;base64, gibi bir önek ekler; tarayıcılar görseli doğrudan bu biçimle gösterebilir.
Yapıştırdığım kod neden görsele dönüşmüyor?
En sık neden metnin eksik kopyalanmasıdır; başı ya da sonu kesilmiş bir Base64 dizisi çözülemez. Metnin gerçekten bir görsele ait olduğundan da emin ol.
Görselim ya da kodum bir yere gönderiliyor mu?
Hayır. Kodlama ve çözme işlemleri tamamen tarayıcında yapılır. İndirdiğin görselin gerçek formatını ve ölçülerini görmek istersen boyut ve DPI öğren aracını kullanabilirsin.