İçeriğe geç
AREM Labs

EN TR

Görsel → Data URI

Görseli base64 data URI’ye çevirir; CSS ve HTML içine gömüp ek istek yapmadan kullanırsın. Dönüşüm tarayıcında, dosyan sunucuya yüklenmez. Anında sonuç verir.

1Data URI'ye çevrilecek dosyaları bırak

JPG, PNG, WebP, GIF, SVG · en fazla 10 dosya · base64 kodlama %33 büyütür

Data URI → dosya

Elindeki data: ile başlayan metni yapıştır, dosya olarak indir.

İpuçları

  • Base64 kodlama dosyayı yaklaşık %33 büyütür; 5 KB üstü görselleri gömmek genelde zararlıdır.
  • CSS, HTML img etiketi ve düz base64 çıktıları ayrı sekmelerde hazır kopyalanır.
  • SVG için data URI yerine doğrudan satır içi <svg> kullanmak daha küçük sonuç verir.

Nasıl kullanılır?

  1. 1 Data URI formatına dönüştürmek istediğin görsel dosyasını alana sürükle veya dosya seçiciyle yükle.
  2. 2 Üretilen çıktılardan projenin ihtiyacına göre HTML img etiketi, CSS background-image kuralı veya saf Base64 seçeneğini belirle.
  3. 3 Hazırlanan kod bloğunu panoya kopyalayıp doğrudan kaynak koduna yapıştır.

Bilmen gerekenler

Web sayfalarında harici HTTP isteklerini azaltmak için küçük görselleri doğrudan CSS veya HTML içerisine gömmek sıklıkla tercih edilir. Data URI şeması, binary görsel verisini MIME türü üstbilgisiyle birlikte Base64 ASCII karakter kümesine kodlayarak inline kullanıma uygun hale getirir. Bu işlem görselin piksel verisini, renk derinliğini veya şeffaflık kanalını kesinlikle bozmaz; ancak 8 bitlik binary veriyi 6 bitlik dizgiler halinde paketlediği için dosya boyutunu matematiksel olarak yaklaşık yüzde otuz üç oranında büyütür. Yükleme esnasında ek ağ gecikmesi yaratmayan bu yöntem, özellikle kritik CSS bloklarında yer alan ufak arayüz ikonları veya tek piksellik dolgu görselleri için idealdir.

Bu araç, tarayıcının yerel FileReader yeteneklerini kullanarak yüklediğin JPEG, PNG, WebP, GIF veya SVG dosyalarını anında standart Data URI formatına dönüştürür. Dosyaların sunucuya gönderilmeden tamamen yerel bellekte işlendiği için gizliliğin tam olarak korunur. Çıktı panelinde doğrudan HTML img etiketi, CSS arkaplan kuralı veya saf Base64 metni olarak kopyalanmaya hazır kod blokları sunulur. Büyük boyutlu dosyalarda Base64 kodlamanın HTML ve CSS ayrıştırma süresini uzatacağını unutmaman gerekir; bu sebeple beş kilobaytın üzerindeki görseller veya doğrudan inline yerleştirilebilen SVG vektörleri yerine harici kaynak kullanımı önerilir.

Sık sorulan sorular

Base64 kodlama görsel kalitesinde kayba yol açar mı?

Hayır, Base64 bir sıkıştırma algoritması değil yalnızca ikili veri kodlama yöntemidir. Görselin pikselleri, renk profili ve şeffaflık bilgisi bit düzeyinde korunur, hiçbir kalite kaybı yaşanmaz.

Neden Data URI çıktısının dosya boyutu orijinalden daha büyük?

Base64 kodlama, ikili veriyi yalnızca 64 adet güvenli ASCII karakteriyle temsil etmek için her 3 baytlık veriyi 4 karaktere dönüştürür. Bu matematiksel işlem dosya boyutunda yaklaşık yüzde 33 oranında bir artışa neden olur.

Büyük görselleri Data URI olarak gömmek neden önerilmez?

Kodlanan görsel doğrudan HTML veya CSS dosyasının boyutunu artırır ve tarayıcının DOM ayrıştırma süresini uzatır. Ayrıca görsel ayrı bir dosya olmadığı için tarayıcı tarafından bağımsız olarak önbelleğe alınamaz.

Paylaş

Rehberler

Bu araçla ilgili yazılar ve format rehberleri.

Rehber →

İlgili araçlar