Base64 Görüntü Kodlayıcı

Görüntüleri inline etmek ne zaman buna değer

Satır içine eklemeden önce değerlendirilip sınanacak adaylar:

• 2 KB altı ikonlar, Önemsiz ek yükle bir HTTP isteğini kurtarır.
• E-posta şablonları - Veri URI’leri e-posta istemcilerinde tutarlı biçimde desteklenmez. Hedef istemcileri sınayın ve gerektiğinde CID ya da barındırılan görüntüler kullanın.
• İlk ekran yer tutucuları (LQIP), Düşük kaliteli bulanık sürüm satır içine eklenir, tam görüntü sonra yüklenir.
• Bir kez kullanılan SVG’ler, SVG metindir; doğru yüzde kodlamalı bir data URI, karakterlere ve biçimlendirmeye bağlı olarak Base64’ten daha kısa olabilir.

Kötü adaylar:

• Büyük görüntüler, 500 KB görüntüyü %33 şişirmek 166 KB boşa harcamaktır.
• Sayfalar arasında yeniden kullanılan görüntüler, Satır içine eklemek, tarayıcı önbelleğinin rotalar arasında çalışmasını engeller.
• Kritik CSS, Ağır görüntüleri satır içine eklemek kritik yolu şişirir.

Boyut beklentileri

Data URI formatı

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==

• data: şeması
• MIME türü
• ;base64, göstergesi
• Kodlanmış byte’lar

SVG özel bir durumdur

Base64, çevreleyen sözdiziminden önce özgün SVG baytlarını yaklaşık üçte bir büyütür; yüzde kodlama ise yalnızca kaçırılması gereken karakterleri uzatır. Hangi biçimin daha kısa olduğu SVG’ye bağlıdır. Metin biçimi doğru yüzde kodlanmış bir data:image/svg+xml,... değeri kullanmalıdır. Tek başına ;utf8 belirteci standart bir data URI parametresi değildir; kaçırılmamış #, %, tırnak veya boşluk karakterleri URI’yi bozabilir. Bu araç SVG yapısını kontrol eder ancak betikleri, olay işleyicilerini veya dış başvuruları kaldırmaz. Güvenilmeyen SVG’leri kullanmadan önce inceleyin.