Bir resmin yerleştirilmesi, baytlarını HTML, CSS veya başka bir belgenin içine yerleştirir. Küçük bir yapıyı kendi kendine yetebilir, ancak aynı zamanda görüntüyü o belgenin teslimi ve önbelleğe alınmasıyla da birleştirir. Daha az URL'nin her zaman daha hızlı sayfa anlamına geldiğini varsaymak yerine, iş akışının tamamına göre karar verin.
Doğru ambalajı oluşturun
A PNG resmi Veri URI şununla başlar: data:image/png;base64,, ardından orijinal dosyanın Base64 gösterimi gelir. Bir JPEG ihtiyacı var image/jpeg; WebP ihtiyaçları image/webp. MIME türünün yeniden adlandırılması baytları dönüştürmez. Alıcı bir JPEG gerektiriyorsa, Veri URI'yi oluşturmadan önce görüntüyü yeniden kodlayın.
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">Yukarıdaki yer tutucu çalışan bir resim değildir; bunu kodlayıcının tam çıkışıyla değiştirin. Çıktı zaten içeriyorsa data: önek, başka bir önek eklemeyin. Çevredeki tırnak işaretlerini dengeli tutun ve zengin metin düzenleyicileri tarafından eklenen satır sonlarından kaçının.
Gerçek boyutu hesaplayın
Kodlanmış kısım, her üç giriş baytı için tam gruplara yuvarlanmış dört karaktere ihtiyaç duyar. Veri URI öneki biraz daha fazlasını ekler. 30.000 baytlık bir dosyanın yükü tek başına 40.000 karakterdir. HTML sıkıştırması aktarılan boyutu değiştirebilir, ancak tarayıcının yine de belgeyi ayrıştırması ve görüntünün kodunu çözmesi gerekir. Yalnızca kaynak dosyayı değil, gerçek sayfayı ölçün.
Ayrı olarak sunulan bir görüntü önbelleğe alınabilir ve sayfalar arasında bağımsız olarak yeniden kullanılabilir. Gömülü bir görüntü, onu içeren her belgeye bağlanır. Bu nedenle tekrarlanan büyük resimler otomatik satır içi için zayıf adaylardır. Bağımsız bir rapordaki küçük tek seferlik simgeler makul bir ödün olabilir.
Hedefi kontrol edin
İçerik Güvenliği Politikası kısıtlayabilir data: görüntüler. E-posta istemcileri gömülü içeriği kaldırabilir veya reddedebilir. Tarayıcınızda ön izlemesi yapılan bir dosya, alıcının uygulamasının onu görüntüleyeceğini kanıtlamaz. Desteklemeniz gereken tam dışa aktarma, e-posta istemcisi veya aşağı akış sistemini test edin.
Geçici yerel önizlemeler için, bir URL Blob'u genellikle büyük bir Base64 dizesi oluşturmaktan kaçınır. Görünümü kaldırıldığında URL öğesini iptal edin. Dışa aktarılan bağımsız HTML için Veri URI uygun olabilir. Her iki durumda da alternatif metni ve boyutları koruyun. Sözdizimi ve tarayıcıyla ilgili hususlar bu bölümde ele alınmıştır. MDN: veri URL'leri.