Görselden Base64'e Dönüştürücü ve Çözücü

Base64, görsel dosyası gibi ikili verileri yalnızca 64 güvenli metin karakteri kullanarak yazmanın bir yoludur: harfler, rakamlar, artı ve eğik çizgi. Dosyanın her üç baytı dört metin karakterine dönüşür. Bu, ikili içeriğin JSON, HTML öznitelikleri, CSS dosyaları ve bazı e-posta biçimleri gibi yalnızca metin işleyen sistemlerden geçmesini sağlar.

Data URI bu metni tarayıcıya ne içerdiğini söyleyen kısa bir başlıkla sarar; örneğin data:image/png;base64, ardından kodlanmış dosya. Tarayıcılar onu normal bir görsel bağlantısı gibi gösterebilir.

Ne zaman satır içine alınmalı

Base64 ile görsel dosyası bağlantılarını karşılaştırırken mesele boyut ve önbelleklemedir. Base64 metni orijinal dosyadan yaklaşık üçte bir daha büyüktür ve tarayıcı tarafından ayrıca önbelleğe alınamaz. Normal bir dosya bir kez indirilir ve yeniden kullanılır. Base64, fazladan bir isteği kazanmanın birkaç yüz bayttan daha önemli olduğu çok küçük görsellerde parlar.

Görselden Base64'e sekmesine bir görsel ekleyin. Araç onu yerel olarak okur, gerçek türünü dosya baytlarından algılar ve orijinal boyutu, kodlanmış boyutu ve artışı gösterir. Aşağıda kopyalama düğmeli beş hazır parça vardır. Çok uzun dizeler hız için kutularda kısaltılır, ama kopyalama düğmesi her zaman tam metni kopyalar.

Data URI'yi bir metin dosyası olarak da indirebilirsiniz; bu çok büyük dizeler için veya bir iş arkadaşınıza göndermeniz gerektiğinde kullanışlıdır.

Yaygın biçimler

PNG'den Base64'e en yaygın durumdur, çünkü simgeler ve logolar genellikle şeffaflıklı PNG dosyalarıdır. JPG'den Base64'e de aynı şekilde çalışır ve avatarlar gibi küçük fotoğraflara uyar. SVG dosyaları da kodlanır; SVG için düz URL kodlu metin daha da küçük olabilir, ama Base64 en uyumlu seçenektir.

HTML'de

HTML'de bir Base64 görsel kullanmak için img parçasını sayfanıza yapıştırın. Dosya adına dayalı alt metni ve genişlik ile yüksekliği zaten içerir; bu yerleşim kaymalarını önlemeye yardımcı olur. Alt metni ekran okuyucular için görseli tanımlayacak şekilde düzenleyin.

CSS'te

CSS'te Base64 arka plan görseli için background-image kuralını stil dosyanıza yapıştırın. Bu küçük desenlere ve simgelere uyar. Büyük fotoğrafları dosya olarak tutun, çünkü onları satır içine almak tüm stil dosyasının indirilmesini ve ayrıştırılmasını yavaşlatır.

Markdown ve JSON

Markdown parçası data URI kabul eden birçok düzenleyicide ve dokümantasyon aracında çalışır. API'ler ve JSON için API dokümantasyonu tam bir data URI istemedikçe data: başlığı olmadan Yalnızca Base64 parçasını kullanın.

Base64'ten görsele sekmesine geçin ve ham bir Base64 dizesi veya tam bir data URI yapıştırın. Araç boşlukları ve satır sonlarını kaldırır, URL güvenli karakterleri kabul eder, eksik dolguyu ekler, metni çözer ve gerçek görsel türünü tanımak için ilk baytları kontrol eder. Ardından resmi, boyutlarını ve dosya boyutunu ve doğru dosya uzantılı bir indirme düğmesini görürsünüz.

Metin geçerli Base64 değilse, kesilmişse veya farklı türde bir dosya içeriyorsa açık bir mesaj neyin yanlış gittiğini açıklar. Bu, çözücüyü API yanıtlarında, veritabanı alanlarında ve e-posta kaynak kodunda hata ayıklamak için kullanışlı kılar.

Genel kural olarak birkaç kilobayttan küçük görselleri satır içine alın, diğer her şeyi dosya olarak tutun. Araç bir görsel 100 KB'tan büyük olduğunda sizi uyarır, çünkü onu gömmek HTML'nizi veya CSS'inizi ağırlaştırır. Daha büyük görselleri önce görsel sıkıştırma aracımızla sıkıştırın veya WebP'ye dönüştürün.

Base64 bir şifreleme değil, kodlamadır. Herkes onu çözebilir, bu yüzden asla bir görseli gizlemenin veya korumanın bir yolu olarak görmeyin.

Gizlilik

Kodlama ve çözme tamamen tarayıcınızda yerleşik işlevlerle gerçekleşir. Hiçbir şey yüklenmez veya saklanmaz; araç ücretsiz ve sınırsızdır, EnhancerPro kredilerini kullanmaz.

Dizem neden bu kadar uzun?

Her üç bayt dört karaktere dönüşür, bu yüzden 30 KB'lık bir görsel yaklaşık 40.000 karakter olur. Bu beklenen bir durumdur. Kullanımınız için çok uzunsa kodlamadan önce görsel boyutlarını küçültün veya sıkıştırın.

Satır sonları ve e-posta

Bazı e-posta sistemleri Base64'ü 76 karakterlik satırlara böler. Çözücü bu satır sonlarını otomatik olarak yok sayar, böylece bölünmüş metni doğrudan yapıştırabilirsiniz.

Favicon'lar ve simgeler

Bir favicon'u data URI olarak satır içine almak çoğu tarayıcıda çalışır, ama gerçek bir favicon.ico ve PNG dosyaları yer imleri ve ana ekranlar için daha güvenilirdir. Favicon oluşturucumuz tam seti oluşturur.

E-posta imzasında logo

Bazı e-posta istemcileri okuyucu izin verene kadar bağlantılı görselleri engeller, ama gömülü data URI desteği de değişkenlik gösterir. İmzalar için sitenizde barındırılan küçük bir bağlantılı PNG genellikle en güvenilir seçimdir; Base64 her şeyin tek bir HTML bloğunda olmasını gerektiren sistemler için bir yedektir. Her iki durumda da logoyu birkaç kilobaytın altında tutun.

Yer tutucular ve yükleme görselleri

Bir fotoğrafın Base64 olarak kodlanmış çok küçük, bulanık bir sürümü tam görsel yüklenirken anında görünebilir. Resmi yaklaşık 20 piksel genişliğe küçültün, kodlayın ve gerçek görselin arkasında arka plan olarak kullanın. Sayfaya yalnızca birkaç yüz bayt ekler.

Görselleri JSON'da saklamak

Bazı API'ler ve yapılandırma dosyaları görselleri Base64 dizeleri olarak kabul eder. Yalnızca Base64 parçasını kullanın ve boyut sınırları için dokümantasyonu kontrol edin. Bu tür veriler aldığınızda kaydetmeden önce görsel türünü ve boyutlarını doğrulamak için çözücüye yapıştırın.

Testler ve prototipler

Hızlı bir prototipi tek bir HTML dosyası olarak paylaştığınızda küçük görselleri satır içine almak, dosya taşındığında veya e-postayla gönderildiğinde hiçbir şeyin bozulmamasını sağlar. Canlıya çıkan her şeyde tarayıcılar önbelleğe alabilsin diye büyük satır içi görselleri yeniden normal dosyalarla değiştirin.

Bir dizenin ne içerdiğini kontrol etmek

Base64 metni içeriği hakkında ipucu vermez. İlk karakterler çoğu zaman türe işaret eder, örneğin PNG için iVBOR veya JPEG için /9j/, ama emin olmanın güvenilir yolu çözücüdür. Data URI'deki etikete güvenmek yerine gerçek dosya imzasını okur.

Performans kontrol listesi

Bir görseli satır içine almadan önce üç soru sorun. Küçük mü, ideal olarak birkaç kilobaytın altında mı? Yalnızca tek bir sayfada mı kullanılıyor, yani önbellekleme pek yardımcı olmaz mı? Fazladan bir istek ilk görüntülemeyi belirgin biçimde yavaşlatır mı? Üçünün de yanıtı evetse Base64 uygun bir seçimdir. Aksi hâlde WebP gibi modern bir biçimde normal bir dosya sunun, genişliğini ve yüksekliğini belirleyin ve tarayıcının onu kullanan her sayfa için önbelleğe almasına izin verin. Bu HTML'nizi yalın, sayfalarınızı hızlı tutar.

İleri geri dönüştürmek

Bir görseli kodlayıp sonra çözmek size tam olarak aynı baytları geri verir; Base64 kayıpsızdır. Bu, çözücüyü kopyaladığınız bir dizenin eksiksiz olduğunu doğrulamanın hızlı bir yolu yapar. Çözülen resim kesikse veya görüntülenmiyorsa metnin bir kısmı kopyalama sırasında kaybolmuştur; genellikle dolgu karakterlerinin bulunduğu sonda. Kaynaktan yeniden kopyalayın ve bir kez daha çözün. Araç tam olduğunda bunu doğrular.