PNG'den Base64'e Dönüştürücü

PNG’yi Base64’e Dönüştürme

PNG (Taşınabilir Ağ Grafikleri), şeffaflık veya kayıpsız sıkıştırma gerektiren resimler için standart formattır: simgeler, logolar, UI öğeleri, ekran görüntüleri ve metin içeren grafikler. Bu araç, PNG dosyalarını HTML, CSS veya API yüklerine gömmek için Base64 stringlerine kodlar.

Nasıl Kullanılır

1. Yükleme alanına bir PNG dosyası bırakın veya göz atmak için tıklayın
2. Resim yerel olarak okunur ve Base64’e kodlanır
3. Çıktı formatınızı seçin: düz Base64, data URI veya CSS arka plan
4. Sonucu kopyalayın

Base64 Gömme İçin Neden PNG

PNG, Base64 gömülü resimler için birkaç senaryoda doğal seçimdir:

Şeffaflık

PNG, tam alfa kanalı şeffaflığını destekler. Bir logo veya simgeyi Base64 data URI’si olarak gömdüğünüzde şeffaflık korunur. JPEG şeffaflığı hiç desteklemez, bu nedenle şeffaf arka plan gerektiren herhangi bir resim PNG (veya SVG/WebP) kullanmalıdır.

Kayıpsız kalite

Ekran görüntüleri, diyagramlar ve keskin metin kenarlı resimler, PNG’nin kayıpsız sıkıştırması her pikseli koruduğu için PNG’de JPEG’den daha iyi görünür. JPEG’in kayıplı sıkıştırması, özellikle metin ve çizgi sanatında görünen keskin kenarlar etrafında yapaylıklar oluşturur.

Küçük grafikler

Palet optimizasyonlu PNG, basit grafikler için çok küçük dosyalar üretebilir. 16x16 bir site simgesi PNG olarak 400 bayt olabilir ve bu, Base64 gömmenin mantıklı olduğu eşiğin oldukça altındadır.

PNG Dosya Boyutu ve Base64 Çıktısı

PNG dosyaları içeriğe bağlı olarak büyük ölçüde değişir:

Simge ve site simgesi boyutlarında, Base64 olarak satır içine almak neredeyse her zaman doğru seçimdir. Logolar için, resmi kaç sayfanın kullandığına bağlıdır (önbellekleme vs. istek yükü). Ekran görüntüleri için ayrı dosyalar olarak sunun.

Kodlamadan önce optimize etme

Base64 kodlamasından önce PNG’nizi bir optimize ediciden (pngquant, optipng veya tinypng) geçirin. İyi optimize edilmiş bir PNG, orijinalden %50-80 daha küçük olabilir ve bu, Base64 çıktı boyutunu doğrudan azaltır.

CSS Sprite’larında PNG Base64

HTTP/2 paralel istekleri ucuz hale getirmeden önce, geliştiriciler birden fazla küçük resmi tek bir sprite sayfasında birleştirirdi. Base64 ile, her küçük resmi doğrudan CSS’te satır içine alarak benzer bir sonuç elde edebilirsiniz:

.icon-home {
  background-image: url(data:image/png;base64,iVBOR...);
  width: 16px;
  height: 16px;
}
.icon-settings {
  background-image: url(data:image/png;base64,iVBOR...);
  width: 16px;
  height: 16px;
}

Bu, sıfır resim isteği için CSS dosya boyutunu takas eder. Gzip sıkıştırması ile CSS yükü kısmen dengelenir.

Data URI Sözdizimi

PNG için data URI şu yapıyı izler:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

image/png MIME türü tarayıcıya Base64 yükünü PNG resmi olarak çözmesini söyler. Bu, <img> etiketlerinde, CSS url() değerlerinde ve URL beklenen çoğu bağlamda çalışır.

Diğer formatlar için JPG’den Base64’e, SVG’den Base64’e, WebP’den Base64’e veya genel Resimden Base64’e dönüştürücüye bakın. Ters işlem için Base64’ten Resme kullanın.