Data URI menyematkan isi berkas langsung ke dalam HTML, CSS, atau JS sebagai data:[tipe];base64,[data], tanpa permintaan HTTP terpisah. Di pasar yang mayoritas mengakses web lewat paket data seluler terbatas — kondisi yang masih umum di banyak wilayah Indonesia di luar kota besar — setiap permintaan HTTP yang dihilangkan punya dampak nyata pada kuota dan waktu muat.
Lebih sedikit permintaan, tapi HTML jadi lebih berat
Di koneksi 3G atau 4G yang tidak stabil, waktu bolak-balik (round-trip) satu permintaan HTTP tambahan sering kali lebih terasa dibanding ukuran berkas itu sendiri, jadi menyematkan ikon kecil sebagai Data URI bisa mempercepat tampilan awal halaman. Tapi ada batasnya — bila terlalu banyak gambar disematkan dengan cara ini, berkas HTML itu sendiri membengkak dan malah memperlambat pemuatan pertama.
Keunggulan
- Lebih sedikit permintaan HTTP — berguna untuk ikon kecil atau gambar latar di koneksi lambat.
- Berkas "terikat" pada dokumen dan tidak rusak saat jalur CDN berubah.
- Cocok untuk placeholder yang harus langsung tampil sebelum gambar asli selesai dimuat.
Keterbatasan
- Base64 meningkatkan ukuran data sekitar sepertiga dibanding berkas biner.
- Data URI yang besar membuat berkas HTML/CSS itu sendiri membengkak dan tidak bisa di-cache terpisah dari halaman.
- Untuk gambar besar atau yang sering dipakai ulang, berkas terpisah yang bisa di-cache hampir selalu lebih hemat kuota pada kunjungan berikutnya.
SVG sebagai teks, bukan Base64
Berbeda dengan format raster, SVG adalah teks (XML), sehingga tidak wajib dienkode dengan Base64: cukup meng-escape karakter khusus dengan benar lewat percent-encoding (data:image/svg+xml,%3Csvg...). Cara ini menghasilkan ukuran yang sedikit lebih hemat kuota dan tetap bisa diedit sebagai teks biasa langsung di berkas CSS.