🖼️ Konverter Gambar Base64

Ubah gambar menjadi string Base64 atau pulihkan Base64 menjadi gambar.

File Gambar

📁

Klik atau seret & lepas gambar

Sertakan Data URL

PANDUAN

Pelajari lebih lanjut

1. Apa itu Encoding Base64

Base64 adalah metode encoding yang mengubah data biner menjadi string ASCII. Metode ini memungkinkan file biner seperti gambar, audio, dan video direpresentasikan dalam format teks, sehingga data biner dapat ditransmisikan melalui protokol berbasis teks seperti email, JSON, dan XML. Base64 hanya menggunakan 64 karakter ASCII (A-Z, a-z, 0-9, +, /) untuk merepresentasikan seluruh data biner. Berguna untuk menyisipkan gambar inline di HTML dengan Data URL atau memasukkan gambar ke respons API. Namun, ukuran aslinya meningkat sekitar 33%.

2. Kasus Penggunaan Gambar Base64

Gambar Base64 digunakan dalam berbagai skenario pengembangan web. Penyisipan inline ikon kecil sebagai CSS background-image mengurangi permintaan HTTP dan mempercepat pemuatan halaman. Digunakan dalam template email untuk menghindari pemblokiran gambar eksternal. Saat menerapkan halaman web lengkap sebagai satu file HTML, semua gambar dapat disertakan sebagai Base64. Dalam RESTful API, gambar dapat langsung disertakan dalam respons JSON tanpa unggah file terpisah. Juga digunakan saat mengirim gambar yang dibuat dengan Canvas API ke server.

3. Format Data URL

Data URL adalah skema untuk merepresentasikan file sebagai URL. Format: data:[<mediatype>][;base64],<data>. Contoh: data:image/png;base64,iVBORw0KG... Mediatype menentukan tipe MIME seperti image/png, image/jpeg, image/gif. ;base64 menunjukkan metode encoding, diikuti string Base64 sebenarnya. Dapat langsung digunakan di tag img HTML seperti <img src="data:image/png;base64,...">. Juga digunakan di CSS sebagai background: url(data:image/svg+xml;base64,...). Browser memproses Data URL seperti URL biasa untuk menampilkan gambar.

4. Pertimbangan Optimasi Performa

Performa perlu dipertimbangkan saat menggunakan gambar Base64. Gambar kecil (di bawah 1-2KB) diuntungkan dari penyisipan inline dibanding overhead permintaan HTTP. Gambar besar justru bisa melambat karena kenaikan ukuran 33% dan overhead parsing dari Base64. Gambar Base64 tidak dapat memanfaatkan cache browser, sehingga diunduh bersama HTML/CSS setiap kali. Gambar yang sering dipakai sebaiknya disediakan sebagai file terpisah agar bisa di-cache. Kompresi gzip efektif pada string Base64, jadi aktifkan di server. Base64 cocok untuk gambar dekoratif atau ikon, bukan konten utama.

5. Pertimbangan Keamanan

Ada risiko keamanan pada gambar Base64. Saat menampilkan gambar unggahan pengguna yang dikonversi ke Base64, waspadai serangan XSS. Gambar SVG sangat berbahaya karena dapat memuat JavaScript. Header Content-Security-Policy dapat membatasi penggunaan skema data:. Tetapkan batas ukuran file untuk mencegah serangan kehabisan memori. Validasi jenis gambar agar hanya memproses MIME type yang diizinkan (image/png, image/jpeg). Verifikasi sisi server harus memastikan file benar-benar gambar dan memeriksa kode berbahaya.

6. Konversi Base64 per Bahasa Pemrograman

Sebagian besar bahasa pemrograman menyediakan encoding Base64 secara bawaan. JavaScript menggunakan btoa() untuk encoding, atob() untuk decoding, dan FileReader API untuk membaca file sebagai Base64. Python menyediakan b64encode() dan b64decode() di modul base64. PHP menggunakan fungsi base64_encode() dan base64_decode(). Java menggunakan getEncoder() dan getDecoder() melalui kelas java.util.Base64. Node.js melakukan encoding dengan Buffer.from(data).toString("base64") dan decoding dengan Buffer.from(base64, "base64"). Membaca file gambar dan mengubahnya menjadi Base64 mudah diimplementasikan dengan pustaka standar di semua bahasa.

Pertanyaan umum

Kapan opsi "Sertakan Data URL" harus diaktifkan atau dimatikan?

Biarkan aktif jika Anda ingin menempelkan hasil langsung ke tag img HTML atau background-image CSS, karena memerlukan prefiks data:image/png;base64,. Matikan jika Anda hanya butuh string Base64 mentah untuk API server.

Format gambar apa saja yang didukung (PNG, JPG, GIF, SVG)?

Anda dapat mengunggah sebagian besar format raster dan vektor yang didukung browser - PNG, JPG, GIF, WebP, SVG, dan lainnya - untuk dikonversi ke Base64, lalu proses decoding memulihkan gambar menggunakan MIME type aslinya.

Jika saya mengonversi string Base64 kembali menjadi gambar, apakah hasilnya identik dengan aslinya?

Ya, Base64 adalah encoding tanpa kehilangan data, jadi proses decoding akan memulihkan salinan yang identik hingga tingkat piksel dari file asli.

Mengapa konversi gambar besar terasa lambat atau menghasilkan string yang sangat panjang?

Encoding Base64 menambah ukuran sekitar 33% dari biner asli, dan karena diproses sebagai string di memori browser, gambar yang lebih besar membutuhkan waktu lebih lama dan menghasilkan string output yang lebih panjang.

Apakah aman menggunakan Base64 hasil konversi langsung di situs web saya?

Untuk penyematan gambar biasa itu aman, tetapi jika Anda menampilkan file unggahan pengguna apa adanya, SVG dapat berisi skrip tertanam, jadi layanan produksi juga harus menambahkan validasi sisi server.