Görsel

Görsel → Base64 Data URI

Küçük ikon ve grafikleri ek dosya yüklemeden CSS/HTML içine gömmek için.

Son güncelleme:

Data URI Nedir?

Data URI, bir dosyanın (örneğin görsel) ikili içeriğini Base64 ile kodlayıp doğrudan bir metin dizisi olarak HTML veya CSS içine gömmenizi sağlayan bir yöntemdir. Bu sayede görsel için ayrı bir HTTP isteği yapılmasına gerek kalmaz.

Ne Zaman Görsel Gömmeli, Ne Zaman Ayrı Dosya Kullanmalı?

Küçük ikonlar, logo veya sık tekrarlanan küçük grafikler için data URI kullanmak, ekstra ağ isteğini ortadan kaldırarak sayfa yükleme hızını artırabilir. Ancak büyük görseller için Base64 kodlama dosya boyutunu yaklaşık %33 artırdığından ve tarayıcı önbelleğe alamadığından, büyük görsellerde ayrı dosya olarak sunmak genellikle daha performanslıdır.

Base64 Kodlama Boyutu Neden Artırır?

Base64, ikili veriyi 6 bitlik gruplar halinde 64 farklı ASCII karaktere eşleyerek metne çevirir. Bu dönüşüm sırasında her 3 bayt orijinal veri, 4 karakterlik metne dönüştüğü için sonuç yaklaşık %33 daha büyük olur.

Tarayıcıda İşlenmenin Güvenlik Avantajı

Görseliniz hiçbir sunucuya yüklenmez; kodlama işlemi tamamen tarayıcınızda JavaScript ile yapılır ve sonuç doğrudan cihazınızda görüntülenir.

Nasıl Kullanılır?

  1. 1≤ 5 MB görsel yükleyin.
  2. 2Data URI'yi kopyalayın.

Formül

Base64 Boyutu ≈ Orijinal Boyut × 4/3 (yaklaşık %33 artış)

Örnek

  • 90 KB PNG dosyası→Base64 data URI ≈ 120 KB (yaklaşık %33 daha büyük)
  • 15 KB ikon dosyası→Base64 data URI ≈ 20 KB

Sık Sorulan Sorular

Data URI'yi nerede kullanabilirim?
HTML'de <img src="..."> özniteliğinde veya CSS'te background-image: url(...) içinde doğrudan kullanabilirsiniz.
Base64 data URI dosya boyutunu neden artırır?
Base64 kodlama, her 3 baytlık veriyi 4 karaktere çevirdiği için orijinal boyuta göre yaklaşık %33 daha büyük bir metin üretir.
Büyük görseller için data URI kullanmalı mıyım?
Genellikle önerilmez; büyük dosyalarda hem boyut artışı hem tarayıcı önbelleğe alamama dezavantajı oluşur. Küçük ikon ve logo gibi görseller için uygundur.
Hangi dosya boyutu sınırı var?
Bu araç 5 MB'a kadar olan görselleri destekler.