Nasıl kullanılır
- Bir PNG dosyasını bırakma alanına sürükleyin, seçmek için tıklayın veya panodan bir ekran görüntüsü yapıştırın.
- Orijinal PNG baytlarını kodlamak için "Hedef biçim" ayarını "Orijinal biçimi koru" olarak bırakın ya da büyük bir görseli küçültmek için bir "Maks. genişlik" belirleyin.
- Görsel için gösterilen orijinal boyutu Base64 boyutuyla karşılaştırın.
- Data URI, ham Base64, img etiketi, CSS veya Markdown çıktısını kopyalayın ya da indirin.
PNG ve Base64
PNG (Portable Network Graphics, MIME türü image/png), tam alfa kanalına sahip kayıpsız bir raster biçimidir; bu yüzden simgeler, logolar, diyagramlar ve ekran görüntüleri için genellikle ilk tercihtir. Her PNG dosyası aynı 8 baytlık imzayla başlar, dolayısıyla her PNG data URI'si de aynı şekilde başlar: data:image/png;base64,iVBORw0KGgo....
Base64 piksellere dokunmaz. Dizenin kodu çözüldüğünde, aynı renklere ve aynı saydam alanlara sahip, bayt bayt aynı bir dosya elde edilir.
PNG data URI'leri için uygun kullanım alanları
- Saydam arka plan gerektiren küçük arayüz simgeleri ve logolar.
- Kendi kendine yeten HTML raporları, hata raporları veya dışa aktarılmış belgeler içindeki ekran görüntüleri.
- Sunucuda oluşturulup bir JSON yanıtında döndürülen grafikler ve QR kodları.
canvas.toDataURL()ile oluşturulan görseller; bu yöntem varsayılan olarak zaten PNG data URI'leri üretir.
Fotoğraflarda durum farklıdır. PNG fotoğrafları kayıpsız saklar ve dosyalar büyür; JPEG veya WebP çok daha kısa bir dize üretir.
Kodlamadan önce PNG'yi küçültün
PNG'den çıkardığınız her bayt, Base64'te yaklaşık 1,33 karakter tasarruf sağlar. Dosyayı önce oxipng veya zopflipng (kayıpsız) ya da pngquant (paleti küçültür) gibi bir optimizasyon aracından geçirin. Piksel boyutunu da kontrol edin: görüntüleneceği boyutun üç katı büyüklükte dışa aktarılmış bir simge, genellikle "Maks. genişlik" seçeneğiyle küçültülebilir.
WebP'ye dönüştürmek saydamlığı korur ve çoğu zaman çok daha küçük bir dosya verir. JPEG'e dönüştürmek ise saydamlığı kaldırır; saydam alanlar düz bir renge dönüşür. Tarayıcıda yeniden PNG olarak kodlamak sıkıştırmayı optimize etmez, bu nedenle sonuç iyi optimize edilmiş bir orijinalden daha büyük olabilir; kopyalamadan önce boyutları karşılaştırın.
Çıktıyı kullanma
<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">
.icon-settings {
background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}
# Komut satırı: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.pngSıkça sorulan sorular
Base64, PNG saydamlığını korur mu?
Evet. Base64 dosya baytlarını değiştirmeden kodlar, bu nedenle alfa kanalı korunur. Saydamlık yalnızca görseli JPEG'e dönüştürürseniz kaybolur.
Her PNG Base64 dizesi neden iVBORw0KGgo ile başlar?
Bu karakterler, PNG dosya imzasının Base64 karşılığıdır. PNG olduğu iddia edilen bir dize farklı başlıyorsa ya başka bir biçimdir ya da bozulmuştur.
Bir ekran görüntüsünü doğrudan yapıştırabilir miyim?
data:image/png sonucu elde edersiniz.Base64 olarak gömeceğim bir PNG en fazla ne kadar büyük olmalı?
Yaygın bir pratik kurala göre birkaç kilobayt, en fazla yaklaşık 10 KB uygundur. Daha büyük görselleri, tarayıcının önbelleğe alıp paralel olarak yükleyebileceği ayrı dosyalar olarak sunmak daha iyidir.