Base64'ü Görsele ve Tersine Dönüştürme

Base64 kodlama, ikili görsel verilerini metin olarak temsil etmenin temel bir tekniğidir. İster HTML'de doğrudan görseller gömüyor, ister API üzerinden görsel aktarıyor, ister veritabanında görsel verileri saklıyor olun, Base64 ve görsel formatları arasında dönüşüm yapmayı anlamak web geliştiricileri için temel bir beceridir.

Base64 Kodlama Nedir?

Base64, ikili verileri ASCII dizelerine dönüştürmek için 64 karakterlik bir küme kullanan ikiliden metne bir kodlama şemasıdır: A-Z, a-z, 0-9, + ve /. = karakteri dolgu için kullanılır. Her üç bayt ikili veri, dört Base64 karakteri olarak temsil edilir, bu da Base64 kodlu verilerin orijinal ikili verilerden yaklaşık %33 daha büyük olduğu anlamına gelir.

Bu kodlama başlangıçta yalnızca metin iletebilen e-posta sistemleri için geliştirilmiştir. Günümüzde Base64, küçük görselleri doğrudan HTML, CSS ve JSON yüklerine gömmek için web geliştirmede yaygın olarak kullanılır ve ayrı HTTP isteklerine olan ihtiyacı ortadan kaldırır.

Görseller Neden Base64'e Dönüştürülür?

Görselleri Base64 dizelerine dönüştürmenin birkaç pratik nedeni vardır:

• Satır içi gömme: Küçük görselleri doğrudan HTML veya CSS'e gömmek için Data URI kullanın, sayfanın yapması gereken HTTP isteği sayısını azaltır.
• API yükü: Ayrı dosya yükleme uç noktaları veya CDN referansları olmadan JSON API yanıtlarına görsel verilerini dahil edin.
• Veritabanı depolama: Dosya sistemi veya nesne depolama kullanılamadığında, görsel verilerini metin tabanlı veritabanı alanlarında saklayın.
• E-posta şablonları: HTML e-postalarına görseller gömün, böylece harici kaynaklar olmadan görüntülenebilir ve e-posta istemcisi uyumluluğu artar.
• Veri aktarımı: JSON, XML veya form alanları gibi yalnızca metin destekleyen kanallar üzerinden ikili görsel verilerini güvenli bir şekilde aktarın.

Görseli Base64'e Dönüştürme

Tarayıcıda JavaScript Kullanma

Tarayıcılar, görselleri Base64'e dönüştürmek için FileReader API ve Canvas API sağlar. FileReader yöntemi, görsel dosyasını Data URL olarak okurken, Canvas yöntemi kodlamadan önce görseli yeniden boyutlandırmanıza veya değiştirmenize olanak tanır.

Canvas kullanarak, görseli bir Canvas öğesine çizer ve ardından Base64 dizesini almak için toDataURL() çağırırsınız. Bu yöntem ayrıca 'image/jpeg' gibi parametreler ve 0 ile 1 arasında bir kalite değeri geçirerek çıktı formatını ve kalitesini değiştirmenize olanak tanır.

Çevrimiçi Araç Kullanma

Görseli Base64'e dönüştürmenin en hızlı yolu çevrimiçi bir dönüştürme aracı kullanmaktır. Görseli yükleyin, araç anında Base64 dizesini oluşturur. Bu, kod yazmadan hızlı dönüşüm yapmanız gerektiğinde özellikle kullanışlıdır. Ücretsiz Görselden Base64'e dönüştürücümüzü deneyebilirsiniz.

Komut Satırı Kullanma

Linux ve macOS'ta, base64 komutunu kullanarak doğrudan terminalden görselleri kodlayabilirsiniz. Bu, birden fazla görseli aynı anda işlemesi gereken betik yazma ve otomasyon iş akışları için kullanışlıdır.

Base64'ü Görsele Geri Dönüştürme

Tarayıcıda

öğesinin src özelliğine ayarlayabilirsiniz. Format: data:[MIME-türü];base64,[veri]. Örneğin, bir PNG görsel için data:image/png;base64,iVBORw0KGgo... kullanılır.

Görseli dosya olarak kaydetmek için, Base64 verisini bir Blob nesnesine dönüştürerek ve bir nesne URL'si oluşturarak bir indirme bağlantısı oluşturabilirsiniz. Bu yöntem tamamen tarayıcıda çalışır ve sunucu tarafı işlem gerektirmez.

Çevrimiçi Araç Kullanma

Çevrimiçi Base64'ten Görsele dönüştürücüler, Base64 dizesini yapıştırmanıza ve oluşturulan görseli anında önizlemenize ve indirmenize olanak tanır. Bu, e-posta, API yanıtları veya yapılandırma dosyalarında Base64 dizesi aldığınızda ve gerçek görseli görmeniz gerektiğinde en basit yöntemdir.

Data URI'yi Anlama

Data URI, Base64 kodlu görselleri web sayfalarına gömmek için standart yoldur. Tam sözdizimi, MIME türünü, kodlama bildirimini ve Base64 verisinin kendisini içerir.

Görseller için yaygın Data URI formatları şunlardır:

• JPEG: data:image/jpeg;base64,/9j/4AAQ...
• PNG: data:image/png;base64,iVBORw0KGgo...
• GIF: data:image/gif;base64,R0lGODlh...
• WebP: data:image/webp;base64,UklGRj...
• SVG: data:image/svg+xml;base64,PHN2Zy...

Base64 Görseller Ne Zaman Kullanılır (Ne Zaman Kullanılmaz)

Base64 görseller her zaman doğru seçim değildir. İşte ne zaman kullanılacağı ve ne zaman kaçınılacağına dair bir rehber:

Uygun Kullanım Senaryoları

• 2KB altındaki küçük simgeler ve dekoratif öğeler
• JSON API yanıtlarındaki görseller
• E-posta şablonu görselleri
• Az görsel içeren tek sayfa uygulamalar
• Prototip ve hızlı demo

Base64 Kullanmaktan Kaçınılması Gereken Durumlar

• 10KB üzerindeki büyük görseller (%33 boyut ek yükü belirgin hale gelir)
• Birden fazla görsel içeren sayfalar (her satır içi görsel HTML boyutunu artırır)
• Tarayıcı önbelleğine ihtiyaç duyan görseller (Base64 görseller bağımsız olarak önbelleğe alınamaz)
• Farklı ekran boyutları için farklı sürümler gerektiren duyarlı görseller

Yaygın Sorunlar ve Çözümler

• Bozuk çıktı: Base64 dizesinin tam ve kesilmemiş olduğundan emin olun. Eksik karakterler kod çözme başarısızlığına neden olur.
• Yanlış MIME türü: Data URI'de her zaman doğru MIME türünü ekleyin. JPEG MIME türüyle kodlanmış bir PNG doğru görüntülenmeyecektir.
• Dizedeki satır sonları: Bazı sistemler Base64 dizelerine satır sonları ekler. Kod çözmeden önce bunları kaldırın.
• URL güvenli varyant: Base64URL, + ve / yerine - ve _ kullanır. Standart Base64 kod çözme kullanmadan önce bu karakterleri dönüştürün.