Base64
Image Data URL
⚠️ Large image may freez the browser
PNG'yi CSS için Base64'e kodla
PNG görüntüleri Base64 veya DataURL formatlarına dönüştürün. CSS veya JavaScript'e harici dosyalar olmadan doğrudan gömün. Daha büyük dosyalar performans üzerinde etkili olabilir; daha küçük boyutlar önerilir. Base64 kodlaması web varlıklarıyla entegrasyonu basitleştirir ve harici kaynaklara bağımlılığı azaltır. DataURL formatı dinamik içerik teslimatı için kod yapısını basitleştirir.
Image → Base64 / Data URL
Click or Drag & Drop an Image
Görüntüleri Base64 Koduna Dönüştür
1
PNG görüntüsünü yükle
PNG görüntüyü yüklemek için veya yükleme alanına sürükleyin.
2
Karakter Kodlama Biçimini Seçin
YaĢıtın 'Base64' veya 'DataURL' sekmesini istediğiniz kodlama biçimi için seçin.
3
Veri Temasını Görüntüle
Resiminizin Base64 veya DataURL gösterimi, aşağıda bulunan bölmelerde görünecektir.
4
Kopyala Kodlanmış Metin
'Kopyala' düğmesine tıklayarak şifreli metni CSS veya JavaScript'inizde kullanmak üzere panoya kopyalayın.
CSS'ye Doğrudan PNG'leri Yerleştirin
Küçük bir görüntüyü CSS'ye doğrudan dahil etmek, ayrı dosyalardan yönetme ihtiyacını ortadan kaldırarak PNG'leri Base64 veya DataURL formatlarına dönüştürmekle elde edilebilir. encode-png-to-base64-for-css aracı web geliştirme iş akışınızı kolaylaştırır ve HTTP isteklerini azaltır. Bu, daha temiz, daha verimli kod ve daha hızlı sayfa yükleme süreleri sağlar.
Dosya Boyutunu Azalt ve HTTP İsteklerini Azalt
Bu araç, web sitenizin yüklemesi gereken dosya sayısını PNG resimlerini Base64 veya DataURL formatlarına dönüştürerek azaltır. Resimleri doğrudan CSS veya JavaScript'e gömmek, HTTP isteklerini azaltarak sayfa yükleme hızını artırır. Bu yaklaşım, harici dosya bağımlılıklarını en aza indirerek web sitesi performansını optimize eder.
Sıkça Sorulan Sorular
Bir Base64 Veri URL'i nedir ve neden kullanırdım?
Bir Base64 DataURL, bir görüntüyü karakter dizisi olarak temsil etmenin bir yoludur. Görüntüleri CSS veya JavaScript kodunuza doğrudan yerleştirmenize, harici dosyalardan yükleme ihtiyacını ortadan kaldırmanıza olanak tanır. Küçük simgeler veya görüntüler için faydalı olabilir.
Bunu nasıl kullanırım?
Sadece sağlanan kodu, görüntünüzü dönüştürdükten sonra ve ardından CSS'nize veya JavaScript'inize kopyalayın. Örneğin, CSS'de bunu şöyle kullanabilirsiniz: background-image: url('data:image/png;base64,...');
Bu araç hangi görüntü formatlarını destekliyor?
Bu araç özellikle PNG görüntüler için tasarlanmıştır. Diğer formatlar doğru şekilde dönüştürmeyebilir.
Büyük resimlerin neden önerilmediği?
Büyük resimler çok uzun Base64 dizeleri oluşturur, bu da bilgisayarınızı yavaşlatabilir ve sayfa yükleme sürelerini artırabilir. Bu aracı daha küçük resimler için kullanmak en iyisidir.
Resim yükleyebileceğim maksimum boyutun bir sınırı var mı?
Dosya boyutu konusunda katı bir sınır olmasa da, daha büyük görüntüler performansın düşmesine neden olacaktır. En iyi sonuçlar için daha küçük PNG dosyaları kullanmanız önerilir.