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

Ne işe yarar

Bu araç bir görseli Base64 metnine ve yapıştırmaya hazır bir data URI’ye dönüştürür. Bir data URI, görseli doğrudan HTML, CSS, Markdown, JSON veya bir e-postanın içine gömer; böylece sayfa bir HTTP isteği daha az yapar ve kod parçası ayrı bir dosya barındırmadan çalışır. Ters yönde de çalışır: görseli önizlemek ve indirmek için Base64 veya bir data URI yapıştırın.

Nasıl kullanılır

1. Bırakma alanına bir görsel bırakın, Görsel seç düğmesine basın veya bir SVG logo yüklemek için Örnek düğmesine basın.
2. Önizleme, görseli türü, dosya boyutu, Base64 boyutu ve boyutlarıyla birlikte gösterir.
3. Bir Çıktı biçimi seçin:
   • Data URI: src öznitelikleri ve JSON için data:image/png;base64,….
   • Yalnızca Base64: düz dize; MIME ve PEM tarzı kullanım için isteğe bağlı olarak 76 karakterde satır kaydırılır.
   • CSS arka planı: eksiksiz bir background-image: url("…"); bildirimi.
   • HTML <img>: src olarak data URI içeren bir görsel etiketi.
   • Markdown: ![image](data:…).
4. Sonucu kopyalayın. Bunun yerine çözmek için girdi kutusuna Base64 veya bir data URI yapıştırın ve Görseli indir düğmesine basın.

Örnek

2×1 piksellik bir PNG şuna dönüşür:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

CSS’te kullanımı:

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

Görseller ne zaman satır içine gömülmeli

Satır içine gömmek; simgeler, küçük arka planlar, yükleme animasyonları ve e-posta imzaları gibi küçük, sık kullanılan görseller için faydalıdır. Fotoğraflar ve büyük grafikler için ise uygun değildir: Base64 boyuta yaklaşık üçte bir ekler, görsel sayfadan veya stil dosyasından ayrı olarak önbelleğe alınamaz ve dosyanın geri kalanının ayrıştırılmasını geciktirir. Genel bir kural olarak, satır içine gömülen görselleri birkaç kilobaytın altında tutun. SVG için yüzde kodlamalı bir data URI (data:image/svg+xml,…) genellikle Base64’ten daha küçüktür ve araç ikisini de kabul eder.