DevToolPal
ID

Konverter Gambar ke Base64

Konversi gambar PNG, JPG, GIF, WebP, atau SVG menjadi data URI Base64 untuk CSS, HTML, dan Markdown, atau decode Base64 kembali menjadi gambar.

Berjalan lokal, tidak pernah diunggah

Opsi

Gambar

Seret gambar ke sini, pilih file, atau tempel string Base64 / data URI di bawah.

Base64

Fungsinya

Alat ini mengubah gambar menjadi teks Base64 dan data URI yang siap ditempel. Data URI menyematkan gambar langsung di HTML, CSS, Markdown, JSON, atau email, sehingga halaman membutuhkan satu request HTTP lebih sedikit dan potongan kodenya berfungsi tanpa perlu meng-hosting file terpisah. Alat ini juga bekerja sebaliknya: tempel Base64 atau data URI untuk melihat pratinjau gambar dan mengunduhnya.

Cara menggunakan

  1. Seret gambar ke area drop, tekan Pilih gambar, atau tekan Contoh untuk memuat logo SVG.
  2. Pratinjau menampilkan gambar beserta tipe, ukuran file, ukuran Base64, dan dimensinya.
  3. Pilih format Output:
    • Data URI: data:image/png;base64,…, untuk atribut src dan JSON.
    • Hanya Base64: string polos, dengan opsi pindah baris setiap 76 karakter untuk penggunaan ala MIME dan PEM.
    • CSS background: deklarasi background-image: url("…"); yang lengkap.
    • HTML <img>: tag gambar dengan data URI sebagai src.
    • Markdown: ![image](data:…).
  4. Salin hasilnya. Untuk men-decode, tempel Base64 atau data URI ke kotak input lalu tekan Unduh gambar.

Contoh

PNG berukuran 2×1 piksel menjadi:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

Dipakai di CSS:

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

Kapan sebaiknya menyematkan gambar inline

Menyematkan inline membantu untuk gambar kecil yang sering dipakai seperti ikon, background mungil, loading spinner, dan tanda tangan email. Cara ini kurang cocok untuk foto dan grafik besar: Base64 menambah ukuran sekitar sepertiga, gambar tidak bisa di-cache terpisah dari halaman atau stylesheet, dan memperlambat parsing sisa file. Sebagai patokan, jaga gambar inline di bawah beberapa kilobyte. Untuk SVG, data URI dengan percent-encoding (data:image/svg+xml,…) sering lebih kecil daripada Base64, dan alat ini menerima keduanya.

FAQ

› Apakah gambar saya diunggah?

Tidak. File dibaca dan di-encode di browser Anda. Tidak ada yang dikirim ke server, sehingga screenshot pribadi dan desain yang belum dirilis tetap berada di perangkat Anda.

› Format gambar apa saja yang didukung?

PNG, JPEG, GIF, WebP, AVIF, SVG, ICO, dan BMP. Tipenya dideteksi dari byte file itu sendiri, bukan dari namanya.

› Mengapa Base64 lebih besar daripada file aslinya?

Base64 menulis setiap 3 byte sebagai 4 karakter, sehingga teksnya sekitar 33% lebih besar daripada file asli. Sematkan inline hanya gambar kecil seperti ikon; tautkan gambar yang lebih besar sebagai file biasa.

› Bisakah saya mengubah Base64 kembali menjadi gambar?

Bisa. Tempel data URI atau string Base64 biasa ke kotak input. Alat ini menampilkan pratinjau, mendeteksi tipenya, dan memungkinkan Anda mengunduh file gambarnya.