CSS Arka Plan Resmi Base64 Oluşturucu

CSS Arka Plan Resmi Base64 Oluşturucu

Resimleri, gömülü Base64 data URI’ları ile kullanıma hazır CSS background-image bildirimlerine dönüştürün. Yukarıdaki alana bir resim bırakın, CSS Arka Plan çıktı formatını seçin ve sonucu doğrudan stil sayfanıza yapıştırın.

Nasıl Kullanılır

1. Yükleme alanına bir resim dosyası (PNG, JPG, SVG, WebP, GIF) bırakın
2. Çıktı formatı olarak “CSS Arka Plan” seçin
3. Oluşturulan CSS bildirimini kopyalayın
4. Stil sayfanıza yapıştırın

Çıktı şöyle görünür:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSU...);

Base64 CSS Arka Planları Ne Zaman Kullanılır

Küçük tekrarlanan desenler

Arka plan desenleri (noktalar, çizgiler, doku efektleri) genellikle background-repeat ile döşenen çok küçük resimlerdir (4x4 ila 16x16 piksel). Bunlar Base64 gömme için idealdir çünkü dosya 1 KB’ın altındadır ve Base64 stringi ihmal edilebilir düzeydedir.

.pattern {
  background-image: url(data:image/png;base64,iVBOR...);
  background-repeat: repeat;
  background-size: 8px 8px;
}

Yalnızca CSS simgeler

Sözde öğeler (::before, ::after), background-image veya content: url(...) ile resimleri görüntüleyebilir. Base64 data URI’ları, HTML değişiklikleri olmadan bu bağlamlarda raster resimler kullanmanızı sağlar.

Tek dosya dağıtımları

PDF, e-posta şablonları veya çevrimdışı HTML oluştururken tüm resimleri Base64 olarak gömmek, kendi kendine yeten bir dosya oluşturur. Eksik referanslardan kaynaklanan kırık resimler olmaz.

Kritik CSS

Kritik CSS’te küçük bir kahraman arka planını satır içine almak, harici stil sayfaları ve resimler getirilmeden önce ilk boyama ile yüklenmesini sağlar. Bu, arka plan resmi ayrı bir dosya olduğunda oluşan stillendirilmemiş arka plan flaşını ortadan kaldırır.

CSS Arka Plan Özellikleri ve Base64

Data URI, tüm CSS arka planla ilgili özelliklerle çalışır:

.element {
  background-image: url(data:image/png;base64,...);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Kısa yazımda:

.element {
  background: url(data:image/png;base64,...) center / cover no-repeat;
}

Çoklu arka planlar da çalışır:

.element {
  background-image:
    url(data:image/svg+xml;base64,...),
    url(data:image/png;base64,...);
}

Performans Hususları

Önbellekleme davranışı

CSS’teki bir Base64 resmi, stil sayfasından bağımsız olarak önbelleğe alınamaz. Stil sayfası herhangi bir nedenle değişirse, tarayıcı Base64 resim verisi de dahil olmak üzere her şeyi yeniden indirir. Uzun max-age başlıkları ile önbelleğe alınan ayrı bir resim dosyası, stil sayfası değişikliklerinden etkilenmez.

Ayrıştırma süresi

Tarayıcılar CSS’i eşzamanlı olarak ayrıştırır. CSS’teki büyük bir Base64 stringi, ayrıştırıcının stilleri uygulamadan önce stringin tamamını işlemesi gerektiği için oluşturmayı geciktirir. 10-20 KB üzerindeki resimler için bu gecikme ölçülebilir hale gelir.

Gzip sıkıştırması

Base64 metni yüksek entropiye sahiptir, bu nedenle gzip/brotli ile kötü sıkışır. Ayrı dosya olarak sunulan 10 KB’lık bir resim gzip ile 9 KB’a sıkışabilir. CSS’teki Base64 olarak aynı resim, ~12.5 KB’a sıkışan ~13.3 KB Base64 metni üretir.

Öneri

Resim kodlaması için Resimden Base64’e, SVG’den Base64’e veya PNG’den Base64’e bakın.