Konverter Gambar ke Base64 (Data URI)
Konversi gambar menjadi data URI Base64 di browser Anda dan salin potongan HTML img, latar CSS, dan Markdown yang siap pakai beserta detail ukurannya.
Berjalan sepenuhnya di browser Anda. Data Anda tidak pernah diunggah.
Apa itu Gambar ke Base64?
Alat ini meng-encode file gambar sebagai Base64 agar bisa disematkan langsung di HTML, CSS, JSON, atau Markdown. Outputnya berupa data URI lengkap (data:image/png;base64,…), string Base64 mentah, serta potongan <img>, background-image CSS, dan Markdown yang siap salin, plus ukuran gambar dan tambahan ukuran akibat Base64.
Cara menggunakan Gambar ke Base64
- Letakkan, pilih, atau tempel gambar (PNG, JPEG, GIF, WebP, SVG, ICO…).
- Baca format yang terdeteksi, dimensi, ukuran file, dan panjang data URI.
- Klik Salin di samping varian yang Anda butuhkan: data URI, Base64 mentah, potongan HTML, latar CSS, atau Markdown.
Contoh
30×30 PNG filled with #3366CC (99 bytes)
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAKklEQVR4nGM0TjvDQBvARCNzR40eNXrU6FGjR40eNXrU6FGjR40eEUYDACc1AaFANYRxAAAAAElFTkSuQmCC
Kapan menggunakan Gambar ke Base64
Sematkan gambar kecil seperti ikon, logo kecil, atau placeholder secara inline untuk menghemat satu request HTTP, sematkan gambar di HTML satu file, email, atau API JSON, atau di CSS yang harus mandiri. Hindari untuk gambar di atas sekitar 20 KB: gambar seperti itu membengkakkan HTML/CSS Anda dan tidak bisa di-cache secara terpisah.
Cara kerja Gambar ke Base64
Byte file dibaca dengan File.arrayBuffer(), format sebenarnya dideteksi dari magic byte-nya (misalnya 89 50 4E 47 untuk PNG) alih-alih memercayai ekstensi file, lalu byte di-encode Base64 dengan btoa. Data URI-nya adalah data:<mime>;base64,<base64>. Base64 merepresentasikan setiap 3 byte sebagai 4 karakter, sehingga teksnya sekitar 33% lebih besar dari file.
Kasus Penggunaan Umum
- Menyematkan ikon kecil langsung di file CSS.
- Memasukkan logo ke template email HTML atau halaman offline satu file.
- Mengirim gambar di dalam payload JSON ke API.
- Menulis dokumen Markdown atau Jupyter yang mandiri.
Catatan Keamanan
Gambar didekode, diproses, dan di-encode secara lokal di browser Anda dengan Canvas API. Tidak ada yang diunggah ke server.
Pertanyaan Umum
Mengapa Base64 lebih besar dari file saya?
Base64 memakai 4 karakter teks untuk setiap 3 byte, sehingga string hasil encode sekitar 33% lebih besar (ditambah beberapa byte untuk padding dan prefiks data URI).
Apakah alat ini mengubah atau mengompres gambar saya?
Tidak. Alat ini meng-encode byte file Anda apa adanya. Gunakan Kompresor Gambar terlebih dahulu jika Anda menginginkan hasil yang lebih kecil.
Bisakah saya mengubah Base64 kembali menjadi gambar?
Bisa, gunakan alat Base64 ke Gambar, yang menerima data URI atau Base64 mentah dan memungkinkan Anda mengunduh filenya.