Base64 Görüntü Kodlayıcı

Nasıl kullanılır

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

01
Bir resmi bırakın
Kodlamak için sürükleyip bırakın veya bir PNG, JPG veya SVG seçin.
02
Çıktıyı kopyala
Hazır CSS arka plan resmi pasajını veya HTML img src veri URI'sini alın.
03
Göm
Veri URI'sini stil sayfanıza veya işaretlemenize yapıştırın; harici dosyaya gerek yoktur.
04
Gerektiğinde şifreyi çöz
Orijinal görüntüyü önizlemek ve indirmek için Base64 dizesini tekrar yapıştırın.

Kullanım örnekleri

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.

Genel Bakış

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

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.

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.

Özellikler

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

SSS

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ç, kopyalamaya hazır bu CSS pasajını 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 ödünleşimdir; 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.

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.