data: şeması, bir dosyanın içeriğini ayrı bir HTTP isteği göndermeden doğrudan HTML, CSS veya JS içine data:[tür];base64,[veri] biçiminde gömer. Türkiye'de büyük şehirler dışında mobil bağlantı hızının ve veri paketlerinin sınırlı kaldığı yerlerde, kaydedilen her HTTP isteği sayfa yükleme süresinde gerçek bir fark yaratır.
Daha az istek, ama daha ağır bir HTML
Kararsız bir 3G/4G bağlantısında ekstra bir HTTP isteğinin gidiş-dönüş gecikmesi, çoğu zaman dosyanın kendi boyutundan daha ağır basar; bu yüzden küçük simgeleri Data URI olarak gömmek sayfanın ilk görünümünü hızlandırabilir. Ama bir sınırı var — çok fazla görsel bu şekilde gömülürse HTML dosyasının kendisi şişer ve ilk yükleme yavaşlar.
Avantajlar
- Daha az HTTP isteği — yavaş bağlantılarda küçük simgeler veya arka plan görselleri için kullanışlıdır.
- Dosya belgeye "bağlıdır" ve bir CDN yolu değiştiğinde bozulmaz.
- Gerçek görsel yüklenmeden önce anında görünmesi gereken yer tutucular için uygundur.
Sınırlamalar
- Base64, veri boyutunu ikili dosyaya kıyasla yaklaşık üçte bir artırır.
- Büyük bir Data URI, HTML/CSS dosyasının kendisini şişirir ve sayfadan ayrı olarak önbelleğe alınamaz.
- Büyük veya sık yeniden kullanılan görseller için önbelleğe alınabilen ayrı bir dosya, tekrar ziyaretlerde neredeyse her zaman daha verimlidir.
Base64 yerine metin olarak SVG
Raster formatların aksine SVG bir metindir (XML), bu yüzden onu Base64 ile kodlamak zorunlu değildir: özel karakterleri percent-encoding ile doğru şekilde escape etmek yeterlidir (data:image/svg+xml,%3Csvg...). Bu yaklaşım biraz daha az veri kullanır ve doğrudan bir CSS dosyası içinde düz metin olarak düzenlenebilir kalır.