Cara menggunakan Gambar ke Base64
- Di Gambar → Base64, seret atau pilih gambar. Gambar dibaca secara lokal, tidak ada yang diunggah.
- Salin data URI, atau snippet CSS background atau <img> yang sudah jadi. Hapus centang “awalan data:” jika kamu hanya butuh Base64 mentah.
- Untuk SVG, pilih URL-encoded — biasanya lebih pendek dibanding Base64.
- Untuk arah sebaliknya, buka Base64 → Gambar, tempel string, lalu unduh file hasil decode.
Apa itu konverter gambar ke Base64?
Base64 adalah cara menuliskan data biner hanya dengan 64 karakter teks yang aman (A–Z, a–z, 0–9, + dan /). Mengonversi gambar ke Base64 memungkinkan kamu menyematkannya langsung di dalam HTML, CSS, JSON atau template email sebagai data URI, alih-alih menautkan ke file terpisah:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…Bagian sebelum koma menyatakan tipe MIME; sisanya adalah file yang sudah di-encode. Browser memperlakukannya persis seperti URL gambar, jadi bisa dipakai di <img src>, background-image CSS, <link rel="icon">, dan kode canvas.
Tambahan ukuran 33%
Base64 menyimpan setiap 3 byte file menjadi 4 karakter, sehingga string hasil encode sekitar 33% lebih besar dari aslinya (ditambah awalan data: yang pendek). Gzip atau Brotli di server bisa mengurangi sebagian, tetapi biaya terbesarnya bersifat struktural: gambar yang di-inline akan diunduh ulang setiap kali file HTML atau CSS yang memuatnya diunduh, tidak bisa di-cache sendiri, dan membuat stylesheet — yang memblokir rendering — jadi lebih berat.
Kapan sebaiknya inline gambar (dan kapan tidak)
- Cocok: ikon kecil, loader, dan sprite UI di bawah beberapa KB, gambar pada tanda tangan email HTML yang memblokir gambar eksternal, laporan HTML satu file, serta fixture pengujian dalam kode.
- Tidak cocok: foto, hero image, dan apa pun di atas sekitar 10–20 KB. Sajikan sebagai file biasa dengan caching, kompresi, dan
loading="lazy". Perkecil dulu dengan Image Compressor.
SVG: URL-encoding lebih baik daripada Base64
SVG sudah berupa teks, jadi kamu tidak perlu Base64 sama sekali. Data URI hasil URL-encoding seperti data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'… hanya meng-escape beberapa karakter (<, >, #, %) dan biasanya 20–30% lebih pendek dibanding versi Base64, tetap bisa dibaca, dan lebih baik saat di-gzip. Tool ini menyediakan keduanya untuk file SVG. Jika kamu sering bekerja dengan SVG di CSS, tool SVG to CSS juga membantu.
Decode Base64 kembali menjadi gambar
Tempel data URI lengkap atau string Base64 mentah (base64url dengan - dan _ juga didukung). Tool mendeteksi format asli dari magic bytes file — PNG, JPEG, GIF, WebP, AVIF, SVG, ICO atau BMP — menampilkan pratinjau beserta dimensinya, dan memungkinkan kamu mengunduh file dengan ekstensi yang tepat. Untuk Base64 yang bukan gambar, gunakan Base64 Encoder/Decoder umum.
Juga dicari sebagai: base64 image, data uri, base64 ke gambar, png ke base64, svg ke data uri, img src base64, css background base64, decode base64 gambar.
Tool yang cocok dipakai bersama Gambar ke Base64
- Pembuat Favicon — Buat paket favicon lengkap dari logo, huruf, atau emoji: favicon.ico multi-ukuran, Apple touch icon, ikon Android/PWA, webclip Webflow, web manifest, dan tag HTML yang tinggal kamu tempel.
- Encode & Decode URL — Ubah teks menjadi percent-encoding agar aman dipakai di URL, kembalikan string yang sudah di-encode menjadi teks yang bisa dibaca, dan pecah URL apa pun menjadi bagian-bagian serta parameter query-nya.
- Generator Barcode — Buat barcode yang bisa dipindai untuk produk, inventaris, pengiriman, dan perpustakaan.
- Pemindai QR Code — Arahkan kamera ke QR code, atau letakkan gambar atau screenshot yang memuatnya.
Pertanyaan yang sering diajukan
Kenapa string Base64 lebih besar dari gambar saya?
Bagaimana cara memakai gambar Base64 di CSS?
url(): background-image: url("data:image/png;base64,…");. Snippet CSS di atas siap ditempel, tinggal ganti nama selector-nya.Apakah meng-inline gambar sebagai Base64 mempercepat situs?
Apakah aman mengonversi gambar pribadi di sini?
Kenapa Base64 yang kutempel menampilkan error?
url(), dan tanda kutip.