Gambar ke Base64

Konversi gambar ke Base64 secara online

Konverter Gambar ke Base64 gratis ini mengubah gambar apa pun menjadi string Base64 atau data URI langsung di browser Anda — tanpa upload, tanpa pendaftaran, tanpa perlu menginstal perangkat lunak. Seret dan lepas sebuah file, klik untuk memilih dari perangkat, tempel dari clipboard, atau muat gambar dari sebuah URL, dan Anda langsung mendapatkan string data:image/…;base64,… yang siap disalin, lengkap dengan snippet CSS, HTML, dan Markdown yang sesuai.

Alat ini bekerja dua arah: encode gambar menjadi Base64, atau berpindah tab untuk men-decode string Base64 kembali menjadi gambar yang bisa dilihat dan diunduh. Karena seluruh proses berjalan di sisi klien menggunakan API FileReader dan Canvas milik browser, gambar Anda tidak pernah meninggalkan perangkat — aman untuk logo privat, tangkapan layar, dan karya yang belum dipublikasikan. Ini sangat berbeda dengan alternatif populer seperti base64.guru dan base64encoder.io, yang mengunggah gambar Anda ke server jarak jauh untuk diproses.

Cara pakainya sederhana: 1. Seret gambar ke kotak unggah, klik untuk memilih file, tempel gambar, atau masukkan URL gambar. 2. Alat ini membaca file secara lokal dan langsung menghasilkan data URI Base64, sekaligus menampilkan ukuran asli, ukuran hasil encode, dan dimensi gambar. 3. Salin hasilnya dalam format yang Anda butuhkan — Base64 mentah, data URI lengkap, aturan CSS background-image, tag HTML <img>, atau Markdown — atau unduh sebagai file .txt. Untuk arah sebaliknya, buka tab Base64 → Gambar, tempel data URI atau string Base64 mentah, dan alat ini akan men-decode-nya, menampilkan pratinjau, serta menyediakan tombol unduh dengan ekstensi file yang benar.

Menyematkan gambar Base64 di HTML, CSS, Markdown, dan email

Data URI Base64 memungkinkan Anda menyematkan gambar langsung di dalam kode sebagai teks, alih-alih menautkan ke file terpisah. Di HTML, letakkan string tersebut pada atribut src tag gambar; di CSS, letakkan di dalam url("…") untuk background; di Markdown, gunakan sintaks gambar ![alt](data:image/png;base64,…). Cara ini menghilangkan satu permintaan HTTP tambahan — sangat berguna untuk ikon kecil, halaman satu file, dan demo offline.

Penyematan seperti ini sangat umum pada email HTML, di mana membundel gambar ke dalam pesan menghindari tautan rusak dan permintaan «unduh gambar» — meski beberapa klien seperti Outlook dapat memblokir gambar Base64, jadi selalu uji terlebih dahulu. Pengembang juga menyimpan gambar Base64 berukuran kecil di dalam payload JSON, database, dan file konfigurasi ketika file biner akan merepotkan.

Perlu diketahui, perilaku klien email sangat beragam. Outlook 2007–2019 menggunakan mesin render Microsoft Word alih-alih mesin browser sungguhan, dan mesin itu tidak mendukung data URI — gambar inline Base64 sama sekali tidak akan tampil. Gmail mem-proxy gambar eksternal melalui server Google (untuk menyaring tracking pixel), tetapi mendukung gambar Base64 inline pada email HTML. Apple Mail mendukung data URI sepenuhnya. Untuk email HTML yang andal, pendekatan yang direkomendasikan adalah Content-ID (CID) embedding — melampirkan gambar sebagai bagian MIME dan mereferensikannya dengan src="cid:image1". Namun untuk dokumen HTML satu file (struk, ekspor laporan, pratinjau), Base64 tetap satu-satunya cara membundel gambar. Untuk kampanye email massal lewat penyedia seperti Mailchimp atau SendGrid, lebih baik host gambar di CDN dan tautkan saja.

Gambar ke Base64 di JavaScript dan Python

Di JavaScript, browser mengerjakannya untuk Anda: const r = new FileReader(); r.onload = () => use(r.result); r.readAsDataURL(file); menghasilkan data URI lengkap. Di React, bungkus kode ini dalam handler onChange pada input file; di Next.js Anda juga bisa meng-encode gambar di sisi server dengan Buffer.from(bytes).toString('base64') milik Node. Konverter ini memakai persis API FileReader tersebut, jadi apa yang Anda salin sama dengan hasil kode Anda sendiri.

Di Python, encode byte mentahnya dengan modul base64: base64.b64encode(open('image.png','rb').read()).decode(), lalu tambahkan prefiks data:image/png;base64,. Dengan Pillow (PIL), simpan gambar ke buffer BytesIO terlebih dahulu lalu encode isinya ke Base64. Gunakan alat ini untuk memverifikasi output Anda dengan cepat tanpa perlu menjalankan skrip.

Perbandingan: UtiloKit vs base64.guru, base64encoder.io, browserling

base64.guru adalah salah satu alat Base64 paling banyak dikunjungi di internet, tetapi ia mengunggah gambar Anda ke servernya — masalah privasi serius untuk logo, mockup produk, atau dokumen rahasia. base64encoder.io bekerja serupa, memproses file di sisi server. Alat image-to-Base64 milik Browserling juga berjalan di server dan membatasi pengguna gratis berdasarkan ukuran file (batas 75 MB pada paket gratis) serta jumlah konversi harian.

UtiloKit berjalan sepenuhnya di browser Anda tanpa batasan ukuran file selain kapasitas RAM perangkat, tanpa batas harian, dan tanpa data yang meninggalkan mesin Anda. Anda mendapatkan output yang sama — data URI yang valid — plus snippet tambahan (CSS, HTML, Markdown) yang tidak disediakan alat-alat di atas. Bagi tim yang bekerja dengan aset kepemilikan, perbedaan privasinya signifikan: tidak ada server yang pernah melihat gambar Anda.

Kapan sebaiknya memakai Base64 — dan kapan tidak

Base64 sempurna untuk aset kecil yang jarang berubah, tetapi bukannya tanpa biaya: teks hasil encode kira-kira 33% lebih besar dari file aslinya, dan gambar yang disematkan tidak bisa di-cache atau di-lazy-load secara terpisah. Untuk foto besar atau gambar yang dipakai ulang di banyak halaman, file gambar biasa (dengan caching HTTP) akan dimuat lebih cepat. Sebagai patokan, sematkan ikon dan logo kecil di bawah ~10 KB, dan biarkan yang lebih besar sebagai file standar.

Pada era HTTP/1.1, browser membatasi koneksi bersamaan ke satu domain (biasanya 6), sehingga setiap file gambar tambahan menghabiskan slot koneksi berharga dan menambah latensi handshake TCP serta lookup DNS. Menyematkan gambar kecil sebagai data URI menghapus round-trip itu sepenuhnya. Alasan ini melemah jauh dengan hadirnya HTTP/2, yang melakukan multipleks semua permintaan lewat satu koneksi — overhead per file yang dulu membuat banyak gambar eksternal kecil terasa lambat praktis hilang.

Batas panjang data URI pada browser juga pernah bervariasi: Internet Explorer 8 membatasinya di 32 KB. Browser modern — Chrome, Firefox, Safari, Edge — tidak menetapkan batas praktis terdokumentasi, tetapi data URI yang sangat panjang (gambar multi-megabyte) tetap dapat memengaruhi performa parser HTML karena seluruh string harus dibaca dan di-decode secara sinkron. Lebih penting lagi, karena data URI adalah bagian dari dokumen HTML atau CSS, ia tidak di-cache secara independen: setiap pemuatan halaman mengirim ulang dan men-decode ulang gambar tersebut. Pedoman performa yang diterima luas adalah hanya menyematkan gambar di bawah kurang lebih 4 KB — ambang di mana overhead permintaan HTTP melebihi penalti ukuran 33% dari Base64. Build tool seperti webpack, Vite, dan Next.js memakai heuristik yang sama: aset di bawah batas yang dikonfigurasi (sering 4–8 KB) disematkan otomatis, sisanya dikeluarkan sebagai file terpisah.

Bagaimana encoding Base64 bekerja

Encoding Base64 mengambil data biner dalam kelompok 3 byte (24 bit) dan meng-encode ulang setiap kelompok menjadi 4 karakter ASCII — 6 bit per karakter — dari alfabet 64 karakter: huruf besar A–Z, huruf kecil a–z, angka 0–9, plus + dan /. Jika panjang input bukan kelipatan 3, satu atau dua karakter padding = ditambahkan agar output selalu kelipatan 4 karakter. Proses mekanis ini didefinisikan dalam RFC 4648, standar yang sama yang digunakan oleh TLS, MIME, dan autentikasi HTTP Basic.

Teknik ini lahir untuk memecahkan masalah nyata: server email SMTP generasi awal dirancang hanya untuk membawa teks ASCII 7-bit. File biner seperti gambar berisi seluruh 256 nilai byte, dan banyak di antaranya dirusak atau dibuang diam-diam oleh router SMTP. Base64 mengubah byte sembarang itu menjadi subset ASCII cetak yang dilewatkan utuh oleh setiap relay email. Biayanya adalah kenaikan ukuran 33% yang bisa diprediksi — setiap 3 byte biner menjadi 4 karakter, sehingga PNG 12 KB ter-encode menjadi teks sekitar 16 KB.

Varian yang berkerabat dekat bernama Base64URL (juga didefinisikan di RFC 4648) mengganti + dengan - dan / dengan _, serta menghilangkan padding = di akhir. Hasilnya aman dipakai di URL dan nama file tanpa percent-encoding. Token JWT dan banyak API web memakai Base64URL; Base64 standar (dengan + dan /) dipakai di dalam data URI karena pemisah , sudah memisahkannya dari deklarasi tipe MIME sebelumnya.

Data URI — spesifikasi lengkapnya

Data URI didefinisikan oleh RFC 2397 dan mengikuti format data:[<mediatype>][;base64],<data>. Bagian mediatype adalah tipe MIME standar seperti image/png, image/jpeg, image/svg+xml, atau image/webp. Jika dihilangkan, nilai bakunya adalah text/plain;charset=US-ASCII. Untuk data berbasis teks Anda juga bisa menentukan charset — misalnya data:text/html;charset=utf-8,<h1>Hello</h1> — sehingga potongan HTML utuh atau stylesheet CSS pun bisa disematkan sebagai data URI.

SVG adalah kasus khusus yang layak diketahui: karena SVG adalah teks berbasis XML, ia bisa disematkan dalam data URI tanpa encoding Base64 sama sekali, memakai URL encoding — data:image/svg+xml,%3Csvg …%3E. SVG dengan URL encoding biasanya lebih kecil daripada SVG Base64 karena Base64 menambah overhead 33%, sementara URL encoding hanya memperluas karakter khusus. Browser modern menerima kedua bentuk, tetapi SVG Base64 didukung secara universal, termasuk pada klien email lawas dan Internet Explorer.

Begitu browser menemukan data URI pada img src, url() CSS, atau iframe src, ia memperlakukannya persis seperti resource yang diambil dari URL eksternal: mem-parsing tipe MIME, men-decode datanya, dan meneruskan hasilnya ke renderer yang sesuai. Tidak ada permintaan jaringan tambahan yang dibuat. Baik Anda meng-encode gambar ke string Base64, men-decode Base64 kembali ke gambar, atau sekadar memeriksa sebuah data URI, alat ini cepat, privat, dan sepenuhnya gratis — setiap konversi tetap berada di perangkat Anda, dan bekerja di iPhone, iPad, Android, serta semua browser desktop modern tanpa instalasi apa pun.