Gambar Gambar ke Base64
Ubah gambar menjadi teks Base64 atau data URI siap tempel untuk CSS, HTML, dan email, tanpa berkasnya diunggah ke mana pun.
Drag a file here, or
Encoded in your browser. The image is never uploaded.
Ready. Runs locally on your device.
File Anda tetap berada di perangkat Anda. Alat ini bekerja langsung di browser Anda, menggunakan perangkat Anda untuk memproses file Anda. Tidak ada yang dikirim ke server kami, dan kami tidak pernah menerima, menyimpan, atau melihat file maupun angka Anda.
Bagikan hasil
Kutip
Kutip halaman ini
Reembun. (2026, 31 Juli). Gambar ke Base64. https://reembun.com/id/gambar-ke-base64
Cara menggunakannya
Pilih gambarnya
Gambar dikodekan di dalam browser Anda dan tidak pernah diunggah ke mana pun.
Pilih format keluarannya
Data URI untuk atribut src, CSS untuk aturan background, HTML untuk tag img utuh, atau Base64 mentah untuk keperluan lain.
Perhatikan tambahan ukurannya
Base64 menambah sekitar sepertiga dari ukuran berkas, sehingga cara ini cocok untuk ikon kecil dan logo, bukan untuk foto.
Salin hasilnya
Tombol Copy mengambil teks sesuai format yang Anda pilih, siap ditempel ke stylesheet, template, atau email.
Bentuk data URI
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...Tiga bagiannya adalah tipe media, penanda pengodean, lalu isi berkas dalam Base64. Alamat ini bisa dipakai di mana pun alamat gambar biasa diterima.
Di dalam HTML:
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Ikon" />Di dalam CSS:
.ikon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4..."); }Kapan menguntungkan dan kapan merugikan
| Ukuran gambar | Saran |
|---|---|
| Di bawah 2 KB | Data URI hampir selalu menguntungkan |
| 2 sampai 5 KB | Bergantung, ukur sendiri |
| 5 sampai 20 KB | Biasanya lebih baik sebagai berkas terpisah |
| Di atas 20 KB | Selalu sebagai berkas terpisah |
Alasannya ada tiga. Ukuran bertambah 33%, berkas CSS atau HTML yang memuatnya menjadi lebih besar untuk semua halaman, dan gambar itu tidak bisa disimpan cache secara terpisah sehingga ikut diunduh ulang setiap kali berkas induknya berubah.
SVG lebih baik daripada Base64
Untuk ikon dan logo sederhana, menyisipkan SVG langsung sebagai markup mengalahkan data URI dalam hampir semua hal. Ukurannya lebih kecil karena tidak melewati pengodean Base64, tampilannya tajam pada resolusi berapa pun, dan warnanya bisa diubah lewat CSS.
Bila Anda perlu menaruh SVG di dalam CSS, gunakan pengodean URL biasa dan bukan Base64, karena SVG adalah teks dan pengodean URL menambah ukuran jauh lebih sedikit.
Menghitung untung ruginya
Satu permintaan jaringan pada koneksi seluler di Indonesia menghabiskan sekitar 100 sampai 300 milidetik hanya untuk perjalanan bolak baliknya, sebelum satu byte pun terkirim. Itulah yang dihemat data URI.
Yang dibayar adalah tambahan 33% ukuran, pada berkas yang ikut diunduh setiap kali berkas induknya berubah. Perhitungannya sederhana:
| Ukuran gambar | Tambahan Base64 | Sebanding dengan |
|---|---|---|
| 1 KB | 0,33 KB | Jauh lebih murah daripada satu permintaan |
| 5 KB | 1,7 KB | Kira kira impas |
| 20 KB | 6,6 KB | Lebih mahal daripada satu permintaan |
| 100 KB | 33 KB | Jauh lebih mahal |
Baris kedua adalah titik impas kasarnya. Di bawah itu, sisipkan. Di atas itu, tautkan sebagai berkas terpisah agar bisa disimpan cache secara mandiri.
Kecilkan lebih dulu
Karena data URI menambah 33% dari ukuran berkas asli, mengecilkan gambar terlebih dahulu berlipat manfaatnya. Ikon 8 KB yang dikompres menjadi 2 KB menghasilkan data URI 2,7 KB alih alih 10,7 KB.
Gunakan pengompres gambar lebih dulu, dan pertimbangkan menurunkan dimensinya bila gambar itu memang akan ditampilkan kecil.
Privasi
Gambar dibaca dari penyimpanan oleh browser Anda dan dikodekan di perangkat. Tidak ada berkas yang diunggah, sehingga aman untuk aset klien dan gambar yang belum dirilis.
Pertanyaan umum
Apa itu data URI?
Cara menyisipkan isi berkas langsung ke dalam alamat, sehingga gambar menjadi bagian dari berkas HTML atau CSS dan tidak memerlukan permintaan jaringan terpisah. Bentuknya diawali data:image/png;base64, lalu diikuti seluruh isi gambar dalam bentuk teks.
Kapan cara ini menguntungkan?
Untuk gambar yang sangat kecil, biasanya di bawah 2 sampai 5 KB, seperti ikon, pola latar, dan gambar penanda. Menghemat satu permintaan jaringan sering lebih berharga daripada tambahan 33% ukuran. Di atas ukuran itu, keuntungannya berbalik.
Kenapa ukurannya bertambah sekitar sepertiga?
Karena Base64 menyatakan setiap tiga byte data sebagai empat karakter teks. Ini harga tetap yang harus dibayar agar data biner bisa disisipkan ke dalam berkas teks seperti CSS dan HTML.
Apakah data URI bisa disimpan di cache browser?
Tidak secara terpisah. Gambar menjadi bagian dari berkas yang memuatnya, sehingga ia ikut diunduh ulang setiap kali berkas itu berubah. Untuk gambar yang dipakai di banyak halaman, berkas terpisah yang dapat disimpan cache jauh lebih efisien.
Apakah didukung di email?
Sebagian klien email memblokir data URI, termasuk beberapa versi Outlook. Untuk email, cara yang lebih andal adalah melampirkan gambar dan merujuknya dengan Content ID, atau menaruh gambar di server dan menautkannya.
Terakhir ditinjau
