CodeKitHub
Türkçe
Kodlama Araçları

Ücretsiz Görüntü - Base64 Dönüştürücü

Herhangi bir görseli buraya sürükleyip bırakın; hem kullanıma hazır veri URL’si hem de ham Base64 dizesini yan yana elde edin. Veri URL'sini doğrudan bir CSS background-image veya HTML img src etiketine yapıştırın ya da bir JSON yükü veya yapılandırma dosyası önek içermeyen baytlara ihtiyaç duyduğunda ham Base64 dizesini kullanın. Her şey tarayıcınızda gerçekleşir — resim hiçbir zaman yüklenmez.

Bu Araç Nedir?

Base64, bir görüntünün ham baytları gibi ikili verileri yalnızca harfler, rakamlar ve birkaç sembol kullanarak düz metin olarak temsil etmenin bir yoludur. Düz metin olduğu için, Base64 ile kodlanmış bir görüntü, ayrı bir dosya olarak referans gösterilmek yerine doğrudan HTML, CSS veya JSON içine gömülebilir.

Bir "veri URL'si", bu Base64 metnini, tarayıcıya dosyanın türünü belirten küçük bir önekle (data:image/png;base64,) sarar; böylece doğrudan bir src veya url() özniteliğine eklenebilir ve herhangi bir ek istek olmaksızın görüntülenebilir.

Neden Kullanmalısınız?

  • Her iki formatı da aynı anda alın — HTML/CSS için tam veri URL’si ve JSON veya yapılandırma dosyalarına gömmek için ham Base64 (önek içermeyen).
  • Sunucu ile gidiş-dönüş yok: Küçük simgeler, avatarlar veya satır içi resimler için bir HTTP isteğini ortadan kaldırır.
  • Görüntüyü kodunu çözüp yeniden kaydeden araçların aksine, orijinal dosyanın baytlarını tam olarak korur — yeniden kodlama ya da kalite kaybı olmaz.
  • Boyut farkını gösterir; böylece bu kolaylık karşılığında neyi feda ettiğinizi bilirsiniz.
  • Özel: Dosya, tarayıcının FileReader API’si aracılığıyla yerel olarak okunur ve cihazınızdan asla dışarı çıkmaz.

Nasıl Kullanılır

  1. Yükleme alanına tıklayın veya bir resim dosyasını bu alana sürükleyin.
  2. <img src> etiketine veya CSS background-image özelliğine yapıştıracaksanız, veri URL’sinin tamamını kopyalayın.
  3. Değeri JSON, YAML veya dosya türünü zaten tanıyan başka bir yapılandırma biçimine gömüyorsanız, ham Base64 kodunu (no data: önekini içermeyen) kopyalayın.
  4. Boyut notuna dikkat edin — Base64 metni, orijinal ikili dosyadan yaklaşık üçte bir oranında daha büyüktür.

Örnek

Giriş

A 12 KB PNG icon file.

Çıkış

data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB of text) plus the same string without the data: prefix.

Yaklaşık %33'lük boyut artışı, Base64 kodlamasının doğasında vardır (3 baytlık ikili veri, 4 karakterlik metne dönüşür) — bu, araçtaki bir hata değildir.

Her bir formatın nerede kullanıldığı

BiçimTipik kullanım
Tam veri URL'siHTML <img src="...">, CSS background-image: url(...), e-postadaki satır içi resimler
İşlenmemiş Base64JSON API verileri, YAML/yapılandırma dosyaları, veritabanı BLOB alanları, özel ikili protokoller

Base64 ve resim boyutu — uygulamada ortaya çıkan ödünleşim

Yaklaşık %33’lük ek yük, Base64 gömme yönteminin en çok küçük varlıklar için kullanılması gerektiğini gösterir: 2 KB'lık bir simge, zararsız ~2,7 KB'lık satır içi metne dönüşür, ancak 500 KB'lık bir fotoğraf, HTML'nizde satır içi olarak yer alan ~665 KB'lık metne dönüşür; bu da ayrıştırma işlemini yavaşlatır ve sayfadan ayrı olarak önbelleğe alınamaz.

Çok sayıda veya daha büyük boyutlu resim ekliyorsanız, tek bir istekten tasarruf etmenin sağladığı faydayı sayfanın ağırlığının getireceği maliyetle karşılaştırın ve önce resimleri sıkıştırmayı düşünün.

Base64 Kodlayıcı / Kod Çözücü · Görüntü Sıkıştırıcı

Sıkça Sorulan Sorular

Base64 dizesi neden resim dosyamdan bu kadar daha büyük?

Base64, ikili verinin her 3 baytını 4 metin karakteri olarak kodlar; bu da sabit olarak yaklaşık %33’lük bir boyut artışı anlamına gelir. 100 KB’lık bir resim için, yaklaşık 133 KB’lık Base64 metni bekleyebilirsiniz. Bu durum normaldir ve kaçınılmazdır — ikili veriyi güvenli ve taşınabilir bir metin olarak temsil etmenin bedelidir.

Veri URL'si ile ham Base64 dizesi arasındaki fark nedir?

Veri URL’si, tarayıcıya veya görüntüleyiciye takip eden metnin hangi MIME türüne dönüştürüleceğini belirten “data:image/png;base64” önekini içerir. Tam veri URL’sini bir HTML src veya CSS url() etiketine yapıştırın. Sistem dosya türünü ayrı olarak zaten biliyorsa, ihtiyacınız olan şey ham Base64 kodlamasıdır (virgülden sonraki tüm kısım); örneğin, { "format": "png", "data": "<ham base64>" } gibi bir JSON alanı.

Bir dosyaya bağlantı vermek yerine bir görüntüyü ne zaman Base64 olarak gömmeliyim?

Base64 gömme yöntemi, tek bir HTTP isteğinden tasarruf etmenin ~%33’lük boyut artışından daha önemli olduğu küçük, sık sık yeniden kullanılan görseller (simgeler, logolar, minik kullanıcı arayüzü grafikleri) için ya da satır içi e-postalar veya tek dosyalık HTML dışa aktarımları gibi ayrı bir dosyanın kullanışlı olmadığı durumlarda faydalıdır. Büyük fotoğraflar veya birçok sayfada yeniden kullanılan öğeler için ise, tarayıcı önbelleklemesi olan normal bir bağlantılı dosya neredeyse her zaman daha iyidir.

Base64'e dönüştürmek resmimi değiştirir mi veya sıkıştırır mı?

Hayır. Base64, orijinal baytların tam olarak kayıpsız bir şekilde kodlanmasıdır — piksellere, çözünürlüğe veya sıkıştırmaya dokunmaz. Daha küçük bir dosya istiyorsanız, önce görüntüyü bir görüntü sıkıştırma aracıyla sıkıştırın, ardından sıkıştırılmış sonucu Base64’e dönüştürün.

Resmim herhangi bir yere yüklendi mi?

Hayır. Dosya, FileReader API'si kullanılarak doğrudan tarayıcınızda okunur ve yerel olarak kodlanır — hiçbir zaman ağ üzerinden gönderilmez.

İlgili Araçlar