Base64 Görüntü Kodlayıcı

Görüntüleri CSS veya HTML'ye gömmek için Base64 dizelerine dönüştürün. Simgeler ve logolar için harici HTTP istekleri olmadan, ücretsiz, yerel işleme gerek kalmadan veri URI'leri oluşturun.

Shehzad Munir tarafından oluşturulmuş ve bakımı yapılmıştır ·

Base64 Görüntü Kodlayıcı
Loading Base64 Image Tool
Share

Resimler ne zaman satır içi olmalıdır?

Base64 Görüntü Kodlayıcı, görüntüleri doğrudan CSS veya HTML'ye gömebileceğiniz veri URI dizelerine dönüştürerek küçük simgeler ve logolar için ekstra ağ isteğini ortadan kaldırır. Ayrıca Base64'ün kodunu tekrar görüntülenebilir bir görüntüye dönüştürür ve her şey tarayıcınızda yerel olarak işlenir.

Bir görüntünün Base64'e kodlanması, ağ isteğinin daha büyük bir dosyayla değiştirilmesini sağlar. Bu, gidiş-dönüş gecikmesinin ekstra baytlardan daha pahalı olduğu küçük, sık kullanılan varlıklar, simgeler, küçük logolar, aralayıcı grafikler için bir kazançtır. Büyük fotoğrafları ayrı dosyalar halinde saklayın.

Özellikler

  • Sürükle ve bırak görüntü kodlaması
  • CSS arka plan resmi pasajı oluşturma
  • HTML img src veri URI çıkışı
  • Anında Base64 kod çözme

Base64 Görüntü Kodlayıcı nasıl kullanılır?

  1. 1

    Bir resmi bırakın

    Kodlamak için sürükleyip bırakın veya bir PNG, JPG veya SVG seçin.

  2. 2

    Çıktıyı kopyala

    Hazır CSS arka plan resmi pasajını veya HTML img src veri URI'sini alın.

  3. 3

    Göm

    Veri URI'sini stil sayfanıza veya işaretlemenize yapıştırın; harici bir dosyaya gerek yoktur.

  4. 4

    Gerektiğinde şifreyi çöz

    Orijinal görüntüyü önizlemek ve indirmek için Base64 dizesini tekrar yapıştırın.

Yaygın kullanım durumları

  • Bir ön uç geliştirici, bir HTTP isteğini kaldırmak için küçük bir simgeyi satır içine alır.
  • Bir e-posta geliştiricisi, harici barındırma olmadan oluşturulan bir logo yerleştirir.
  • Bir tasarımcı, başka birinin CSS'sinden alınan bir veri URI'sini inceler.
  • Bir geliştirici, bir SVG sprite'ını doğrudan bir bileşene paketler.

Ayrıntılı kılavuz

CSS ve HTML'de veri URI'lerini kullanma

Veri URI'si yalnızca data:image/png;base64, ile başlayan bir dizedir. Bunu bir CSS arka plan resmine veya bir HTML img src'ye bırakın; tarayıcı bunu satır içi olarak oluşturur. Bu araç her iki parçayı da oluşturur, böylece doğru olanı doğrudan yapıştırabilirsiniz.

Boyut takası

Base64 kodlaması, metindeki ikili verileri temsil ettiğinden dosyanın boyutuna yaklaşık %33 oranında katkıda bulunur. Satır içi oluşturma aynı zamanda varlığın sayfalar arasında ayrı olarak önbelleğe alınamayacağı anlamına da gelir. Her şey yerine küçük, sayfa açısından kritik grafikler için bilinçli olarak kullanın.

Sık sorulan sorular

Bir görüntüyü çevrimiçi olarak Base64'e nasıl dönüştürebilirim?

Resminizi (JPG, PNG, SVG, WEBP) sürükleyip bırakın veya yüklemek için tıklayın. Araç, CSS veya HTML'de veri URI'si olarak kullanıma hazır Base64 dizesini anında oluşturur.

Base64 görsellerini CSS'de ne zaman kullanmalıyım?

Simgeler, logolar ve kullanıcı arayüzü öğeleri (5KB'nin altında) gibi küçük resimler için Base64 kodlamasını kullanın. Bu, bu varlıklara yönelik HTTP isteklerini ortadan kaldırır ve bu da performansı biraz artırabilir. Büyük resimler için harici URL'ler daha iyidir.

Base64 görüntüsünü CSS'de nasıl kullanırım?

Bunu arka plan görüntüsü olarak kullanın: arka plan görüntüsü: url('data:image/png;base64,iVBORw0KGgo...'); Araç, bu CSS pasajını kopyalamaya hazır olarak otomatik olarak oluşturur.

Base64 görüntüsünü HTML'de nasıl kullanırım?

Bunu bir img etiketinin src özelliği olarak kullanın: <img src='data:image/png;base64,iVBORw0KGgo...'/>. Araç sizin için bu HTML pasajını oluşturur.

Base64 kodlaması görüntüleri büyütür mü?

Evet. Base64 kodlaması, ikili orijinale kıyasla dosya boyutunu yaklaşık %33 artırır. Bu bir değiş tokuştur; bir HTTP isteğini kaydedersiniz ancak veriler daha büyüktür. Çok küçük resimler için buna değer, ancak büyük fotoğraflar için değil.

Base64 dizesinin kodunu bir görüntü dosyasına dönüştürebilir miyim?

Evet. Kod Çözme moduna geçin, Base64 dizenizi yapıştırın (data:image/... önekiyle veya bu önek olmadan) ve araç görüntüyü oluşturur ve onu bir dosya olarak indirmenize olanak tanır. Bu, gömülü görüntüleri HTML kaynak kodundan veya API yüklerinden çıkarmak için kullanışlıdır.

Bir görüntüyü Base64 veri URI'sine nasıl dönüştürebilirim?

Bir JPG, PNG, GIF, WebP veya SVG bırakın ve araç, Base64 dizesinin yanı sıra yapıştırmaya hazır parçacıkların çıktısını alır: bir veri URI'si, bir img src ve bir CSS arka plan URL'si. Dönüşüm yerel olduğundan resim hiçbir zaman yüklenmez.

Base64 dizesinin kodunu bir görüntüye nasıl çözebilirim?

Base64'ü (veya tam veri URI'sini) yapıştırın ve araç, CSS veya HTML'den gömülü bir görüntüyü çıkarmak için yararlı olan orijinal görüntüyü oluşturur ve indirmenize olanak tanır.

Neden bir görüntüyü Base64 olarak gömeyim?

Base64 görüntüyü doğrudan HTML, CSS veya e-postaya gömer, böylece yüklenecek ayrı bir dosya kalmaz, küçük simgeler ve satır içi varlıklar için kullanışlıdır, ancak büyük görüntülerin normal dosyalar olarak bırakılması daha iyidir.

Base64 görüntüleri büyütüyor mu?

Evet, ikili metin olarak temsil edildiğinden yaklaşık üçte biri kadar. Bu nedenle, bir istekten kaçınmanın boyutundan daha ağır bastığı küçük varlıklar için en iyisi budur.

Resmim onu ​​kodlamak için mi yüklendi?

Hayır. Kodlama ve kod çözme tamamen tarayıcınızda gerçekleşir.

Günlükten

All articles →
How to Remove EXIF Metadata From Your PhotosTool Guides

How to Remove EXIF Metadata From Your Photos

Photos carry hidden data like GPS location and camera details. Here's why that matters for privacy and how to strip it before sharing.

SM
Shehzad Munir
Aug 19, 2026 · 3 min
What Is CPS? How to Test and Improve Your Click SpeedTool Guides

What Is CPS? How to Test and Improve Your Click Speed

CPS means clicks per second. Here's how it's measured, what a good score looks like, and how to test your own click speed for free.

SM
Shehzad Munir
Aug 17, 2026 · 3 min
How to Merge PDF Files for Free (Without Uploading Them)Tool Guides

How to Merge PDF Files for Free (Without Uploading Them)

Combine several PDFs into one document, reorder the pages, and keep everything private — no software and no server upload.

SM
Shehzad Munir
Aug 14, 2026 · 2 min