Dasar Data URL
Data URL adalah cara menyisipkan data langsung di atribut HTML/CSS. Untuk gambar, formatnya biasanya seperti ini:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...Bagian sebelum koma adalah metadata (mime type + base64). Bagian setelah koma adalah payload Base64. Jika Data URL tidak tampil, seringnya masalah ada pada prefix atau string yang terpotong.
Kapan Base64 untuk gambar masuk akal
Gunakan Base64 untuk gambar hanya ketika memang memberi benefit yang jelas:
- Ikon kecil (misalnya favicon kecil, badge kecil) untuk mengurangi request.
- Email template tertentu yang butuh inline asset (tergantung client).
- Prototyping/demo cepat tanpa hosting file aset terpisah.
Cara pakai yang benar
Paling umum, Base64 image dipakai sebagai Data URL pada atribut src atau di CSS background-image.
- Pastikan mime type tepat (image/png, image/jpeg, image/svg+xml).
- Jika kamu copy dari email/log, hapus whitespace dan line breaks.
- Gunakan untuk gambar kecil; tetap prefer file biasa untuk gambar besar.
- Jangan anggap Base64 sebagai proteksi data (ini bukan enkripsi).
- Jangan embed banyak gambar besar di HTML—akan berat dan lambat.
- Jangan kirim Data URL di URL query string (mudah terpotong & bermasalah).
Performa & caching
- Ukuran membesar: Base64 umumnya menambah ukuran sekitar ~33%.
- Caching lebih buruk: gambar sebagai file terpisah bisa dicache browser/CDN, sedangkan Base64 di HTML ikut berubah tiap HTML berubah.
- Parsing cost: HTML/CSS jadi lebih berat diparse bila banyak Data URL.
Prinsip cepat: Base64 cocok untuk aset kecil dan jarang berubah. Untuk gambar besar/sering berubah, gunakan file biasa + caching.
Catatan keamanan
- Base64 bukan enkripsi. Siapa pun bisa decode.
- Jika menerima input dari user, validasi mime type dan ukuran payload sebelum diproses.
- Hindari memproses input tidak tepercaya tanpa sanitasi/limit ukuran (mencegah abuse/memory spike).
Encode/decode Base64, bersihkan whitespace, atau cek Data URL dengan cepat.
Buka Base64 Tool→FAQ
Base64 cocok untuk semua gambar?
Tidak. Base64 paling cocok untuk aset kecil. Untuk gambar besar, lebih baik file biasa (lebih hemat ukuran & caching lebih baik).
Kenapa Data URL kadang tidak tampil?
Biasanya karena prefix mime salah, string Base64 terpotong, atau ada whitespace/line breaks yang ikut terbawa saat copy-paste.
Apa yang harus saya lakukan kalau ada prefix data:image/...?
Itu normal. Saat decode, kamu bisa ambil bagian setelah koma. Saat embed, pastikan prefix-nya sesuai tipe file.