§

Seret gambar atau klik untuk memilih

PNG, JPEG, GIF, WebP, SVG, BMP — hingga 30 MB. Satu gambar setiap kali.

Gambar dibaca dan disandikan sepenuhnya di perangkat Anda — tidak pernah meninggalkan browser Anda.

Tim web dan pengembang di Indonesia semakin banyak menggunakan Base64 data URI untuk berbagai kebutuhan nyata. Perusahaan yang mematuhi UU ITE dan rekomendasi BSSN (Badan Siber dan Sandi Negara) lebih memilih alat berbasis browser ketika memproses gambar dokumen KTP, foto diri, atau tangkapan layar sistem internal karena tidak ada data yang dikirim ke server luar. Pengembang yang mengintegrasikan aplikasi dengan GoPay, OVO, Dana, atau QRIS sering menggunakan ảnh Base64 dalam dokumentasi API dan pengujian inline sebelum deployment. Startup di ekosistem Gojek, Tokopedia, atau Shopee Indonesia yang membangun dengan React dan Vite secara rutin menemui ambang batas data URI bundler; alat ini memungkinkan Anda melihat pratinjau tepat hasilnya. Kampanye email marketing yang dikirim melalui Mailchimp atau Klaviyo dengan logo tertanam inline juga memastikan logo tetap tampil meski penerima memblokir gambar jarak jauh.

// Alat Terkait

./base64-encoder
Pengkode Base64
Kodekan teks dan file ke format Base64.
→
./image-format-converter
Konverter Format Gambar
Konversi PNG, JPEG, dan WebP secara lokal — tanpa unggahan, dukungan massal.
→
./image-compressor
Kompresor Gambar
Kompres gambar JPEG, PNG, dan WebP secara lokal — kualitas atau ukuran target, tanpa unggahan.
→
./
Semua Alat
Telusuri rangkaian lengkap alat daring Ultim8Soft.
→

Cara kerja konversi gambar-ke-Base64

Seluruh konversi berjalan di browser Anda menggunakan File API dan fungsi btoa bawaan — tidak ada pustaka codec yang diunduh dan tidak ada server yang melihat gambar. Berikut alurnya, dari awal hingga akhir:

  1. Anda menyeret atau memilih gambar. Browser membacanya sebagai Blob dari disk lokal Anda, tidak pernah menyalin byte ke server.
  2. File dibaca dalam potongan 1 MB dan byte setiap potongan ditambahkan ke string biner. Pemotongan mencegah gambar besar meluapkan call stack JavaScript.
  3. String biner diteruskan ke btoa, yang memetakan setiap tiga byte ke empat karakter Base64 dari alfabet A–Z, a–z, 0–9, tambah /.
  4. Jenis MIME file (image/png, image/jpeg, dan seterusnya) dibaca dari objek File dan ditambahkan sebagai awalan data:, menghasilkan data:image/…;base64,… URI yang lengkap.
  5. Halaman merakit empat output dari URI tersebut — data URI lengkap, Base64 mentah tanpa awalan, tag siap tempel, dan cuplikan CSS background-image — masing-masing dengan tombol salin sendiri.

Mengapa menyandikan gambar sebagai data URI?

  • Menanamkan logo atau ikon kecil secara inline sebagai data URI menghilangkan perjalanan jaringan terpisah, sehingga halaman atau email merender bingkai pertamanya sedikit lebih cepat.
  • Halaman atau stylesheet dengan gambar inline bersifat mandiri. Ia berfungsi secara offline dan dapat dipindahkan tanpa membawa folder aset.
  • Banyak klien email memblokir gambar jarak jauh yang tertaut secara default. Tanamkan logo sebagai Base64 dan logo akan muncul saat pesan dibuka, tanpa perlu pengambilan jarak jauh.
  • Proses encoding berlangsung sepenuhnya di browser Anda, sehingga gambar sensitif tidak pernah mencapai server pihak ketiga. Ini mencakup tangkapan layar, pemindaian KTP, dan diagram internal.

Kegunaan umum gambar Base64

Data URI muncul di mana saja sebuah gambar cukup kecil sehingga permintaan terpisah memerlukan biaya lebih dari inflasi ukuran ~33% yang ditambahkan Base64. Tiga pola terus-menerus muncul:

  • Ikon CSS inline: sprite atau ikon 1–2 KB yang dimasukkan ke stylesheet sebagai background-image: url(data:…) sehingga aturan sepenuhnya mandiri.
  • Tanda tangan email dan newsletter: logo yang disematkan sebagai dengan src data URI dirender bahkan ketika klien memblokir gambar jarak jauh.
  • Inlining alat build: bundler seperti Webpack dan Vite secara otomatis menanamkan aset di bawah ambang byte tertentu, dan alat ini memungkinkan Anda melihat pratinjau persis seperti apa output tersebut.

Seperti apa gambar Base64?

Ambil PNG transparan 1×1 yang kecil. Byte mentahnya hanya 67 byte, tetapi setelah disandikan menjadi string iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=, dan data URI lengkapnya adalah data:image/png;base64,iVBORw0KGgo…. Perhatikan bahwa bentuk yang disandikan kira-kira sepertiga lebih besar dari aslinya. Itulah kompensasi untuk membuat data biner aman untuk disematkan langsung dalam teks.

Apakah gambar saya diunggah ke mana pun?

Tidak. Konversi menggunakan File API browser dan fungsi btoa bawaan untuk menyandikan gambar sepenuhnya di perangkat Anda. Anda dapat memverifikasinya sendiri: buka alat pengembang browser Anda, beralih ke panel Jaringan, dan konversikan gambar — satu-satunya permintaan yang akan Anda lihat adalah pemuatan halaman dan iklan apa pun. Tidak ada yang berbentuk gambar dikirim ke server, yang membuatnya aman untuk tangkapan layar, dokumen identitas, dan diagram internal.

Mengapa output Base64 lebih besar dari gambar asli saya?

Base64 merepresentasikan setiap tiga byte data biner dengan empat karakter ASCII, sehingga teks yang disandikan sekitar 33% lebih besar dari file sumber. Pembacaan ukuran data URI di halaman ini menunjukkan panjang yang tepat setelah diperbesar. Overhead itulah yang membuat data URI hanya masuk akal untuk gambar kecil — menanamkan foto 2 MB secara inline akan membengkakkan HTML atau CSS Anda jauh lebih banyak daripada permintaan terpisah. Sebagai aturan praktis, tanamkan gambar di bawah sekitar 4 KB dan tautkan ke gambar yang lebih besar.

Format gambar apa yang dapat saya konversi?

Format apa pun yang dikenali browser Anda sebagai gambar dapat digunakan, karena alat ini membaca byte mentah daripada mendekode gambar. Ini mencakup PNG, JPEG, GIF, WebP, SVG, dan BMP. Jenis MIME dibaca langsung dari file, sehingga awalan data: selalu sesuai dengan format sebenarnya — JPEG menghasilkan data:image/jpeg dan SVG menghasilkan data:image/svg+xml. SVG layak mendapat catatan khusus: ini sudah berupa teks, sehingga untuk SVG data URI yang dikodekan URL sering kali lebih kecil dari versi Base64, meskipun alat ini menghasilkan bentuk Base64 untuk konsistensi.

Seret gambar, salin data URI atau cuplikan yang Anda butuhkan, dan tempel ke template HTML, CSS, atau email Anda. Setiap byte tetap di perangkat Anda. Tanpa unggahan, tanpa akun, tanpa perjalanan pulang-pergi server.