CodeKitHubApa Itu Alat Ini?
Base64 adalah cara merepresentasikan data biner — seperti byte mentah sebuah gambar — sebagai teks biasa, hanya menggunakan huruf, angka, dan beberapa simbol. Karena berupa teks biasa, gambar yang di-encode Base64 bisa ditanam langsung di dalam HTML, CSS, atau JSON alih-alih dirujuk sebagai file terpisah.
"Data URL" membungkus teks Base64 tersebut dengan prefiks kecil (data:image/png;base64,) yang memberi tahu browser jenis filenya, sehingga bisa langsung diletakkan di atribut src atau url() dan dirender tanpa request tambahan.
Mengapa Menggunakannya?
- Dapatkan kedua format sekaligus — data URL lengkap untuk HTML/CSS, dan Base64 mentah (tanpa prefiks) untuk ditanam di JSON atau file config.
- Tanpa round-trip server: menghilangkan satu HTTP request untuk ikon kecil, avatar, atau gambar inline.
- Mempertahankan byte file asli persis — tanpa encode ulang atau kehilangan kualitas, berbeda dari tool yang men-decode dan menyimpan ulang gambar.
- Menampilkan selisih ukuran sehingga Anda tahu apa yang dikorbankan demi kenyamanan.
- Privat: file dibaca secara lokal dengan FileReader API browser dan tidak pernah meninggalkan perangkat Anda.
Cara Menggunakan
- Klik area unggah atau seret file gambar ke dalamnya.
- Salin data URL lengkap jika Anda menempelnya ke <img src> atau background-image CSS.
- Salin Base64 mentah (tanpa prefiks data:) jika Anda menanam nilainya di dalam JSON, YAML, atau format config lain yang sudah tahu jenis filenya.
- Periksa catatan ukuran — teks Base64 sekitar sepertiga lebih besar dari file biner aslinya.
Contoh
Input
File ikon PNG 12 KB.Output
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB teks) ditambah string yang sama tanpa prefiks data:.Peningkatan ukuran ~33% ini melekat pada encoding Base64 (3 byte biner menjadi 4 karakter teks) — bukan bug pada tool ini.
Di mana setiap format digunakan
| Format | Penggunaan umum |
|---|---|
| Data URL lengkap | HTML <img src="...">, CSS background-image: url(...), gambar email inline |
| Base64 mentah | Payload API JSON, file YAML/config, field BLOB database, protokol biner khusus |
Base64 dan ukuran gambar — trade-off dalam praktik
Overhead ~33% berarti penanaman Base64 paling baik digunakan untuk aset kecil: ikon 2 KB menjadi teks inline ~2,7 KB yang tidak merugikan, tapi foto 500 KB menjadi ~665 KB teks yang tertanam di HTML Anda, yang memperlambat parsing dan tidak bisa di-cache terpisah dari halamannya.
Jika Anda menanam banyak gambar atau gambar yang lebih besar, timbang manfaat satu-request-terhemat dibanding biaya bobot halaman — dan pertimbangkan untuk mengompresi terlebih dahulu.
Pertanyaan yang Sering Diajukan
Mengapa string Base64 jauh lebih besar dari file gambar saya?
Base64 meng-encode setiap 3 byte data biner menjadi 4 karakter teks, yang merupakan overhead tetap sekitar 33%. Untuk gambar 100 KB, perkirakan sekitar 133 KB teks Base64. Ini normal dan tak terhindarkan — itulah harga merepresentasikan data biner sebagai teks yang aman dan portabel.
Apa bedanya data URL dan string Base64 mentah?
Data URL menyertakan prefiks data:image/png;base64, yang memberi tahu browser atau renderer jenis MIME apa yang akan didekode dari teks berikutnya. Tempel data URL lengkap ke src HTML atau url() CSS. Base64 mentah (semua setelah koma) adalah yang Anda butuhkan saat sebuah sistem sudah tahu jenis filenya secara terpisah — misalnya field JSON seperti { "format": "png", "data": "<base64 mentah>" }.
Kapan sebaiknya saya menanam gambar sebagai Base64 alih-alih menautkan ke file?
Penanaman Base64 berguna untuk gambar kecil yang sering dipakai ulang (ikon, logo, grafik UI kecil) di mana menghemat satu HTTP request lebih berharga dibanding penalti ukuran ~33%, atau dalam konteks di mana file terpisah tidak praktis, seperti email inline atau ekspor HTML satu file. Untuk foto besar atau apa pun yang dipakai ulang di banyak halaman, file tertaut biasa dengan caching browser hampir selalu lebih baik.
Apakah konversi ke Base64 mengubah atau mengompresi gambar saya?
Tidak. Base64 adalah encoding teks lossless dari byte asli persis — tidak menyentuh piksel, resolusi, atau kompresi. Jika Anda ingin file lebih kecil, kompres gambar dulu dengan image compressor, lalu konversi hasil kompresinya ke Base64.
Apakah gambar saya diunggah ke suatu tempat?
Tidak. File dibaca langsung di browser Anda menggunakan FileReader API dan di-encode secara lokal — tidak pernah dikirim melalui jaringan.