Görsel'den Base64'e
Herhangi bir görseli HTML, CSS veya Markdown'da inline kullanım için Base64 data URI'a dönüştür. Dosyalar tarayıcında kalır.
No image yet.
Sonucu görmek için yukarıya giriş yapın.
Bu ne işe yarar?
Bir data URI bir dosyanın byte'larını doğrudan bir URL'ye Base64 kullanarak gömer — ayrı istek yok, harici dosya yok. Bu dönüştürücü üzerine bıraktığın herhangi bir görseli okur ve HTML, CSS, Markdown veya JSON'a yapıştırmaya hazır bir data:image/...;base64,... string'i üretir. Dosya tarayıcını asla terk etmez; dönüşüm FileReader.readAsDataURL üzerinden olur.
Ne zaman kullanılır
- CSS'te küçük ikonlar (< 4 KB) inline — bir HTTP isteğinden tasarruf eder ve ilk paint'te flash'tan kaçınır.
- Kendi kendine yeten HTML e-postalar, tek dosyalı demolar veya çevrimdışı yetenekli PWA'lar.
- Görselle birlikte gitmesi gereken Markdown notlarına, Notion sayfalarına veya sohbet thread'lerine hızlı yapıştırmalar.
- Test fixture'ları ve snapshot dosyaları — varlığı testle birlikte commit etmek istediğinde.
Sık yapılan hatalar
- Boyut cezası. Base64 yükü ~%33 şişirir. ~4–8 KB üzerinde, gömme maliyeti tasarruf edilen isteği geçer, özellikle data URI'lar tarayıcı tarafından ayrı önbelleğe alınamadığı için.
- Sayfalar arası deduplikasyon yok. URI'yi gömen her sayfa byte'ları yeniden gönderir. Yeniden kullanılan herhangi bir şey için tarayıcı bir kez önbelleğe alsın diye gerçek URL olarak tut.
- E-posta istemcileri değişir. Çoğu modern istemci data URI'ları render eder, ancak Windows'ta Outlook tarihsel olarak bunları
<img src>içinde engeller. CID ekleri toplu e-posta için hâlâ daha güvenlidir. - SVG ≠ raster. SVG için, markup'ı doğrudan gömme (veya SVG'yi url-encode etme) genellikle Base64'ten daha küçüktür.