Konverter Gambar ke Base64

Konverter Gambar ke Base64 adalah alat online gratis yang mengubah gambar apa pun menjadi string terenkode Base64. Pengodean Base64 mentransformasi data gambar biner menjadi teks ASCII biasa, memungkinkan Anda menyematkan gambar secara langsung dalam HTML, CSS, JavaScript, JSON, XML, dan banyak lagi — tanpa memerlukan file gambar terpisah. Semuanya terjadi di browser Anda: gambar Anda tidak pernah diunggah ke server mana pun.

Apa itu Pengodean Gambar Base64?

Base64 adalah skema pengodean biner-ke-teks yang merepresentasikan data biner menggunakan 64 karakter ASCII (A–Z, a–z, 0–9, +, /). Saat diterapkan pada gambar, Base64 mengubah byte gambar mentah menjadi string teks panjang yang dapat disematkan langsung dalam kode sumber. Cara paling umum untuk menggunakan gambar Base64 dalam pengembangan web adalah melalui Data URI — skema yang memungkinkan data sebaris (inline) dalam URL menggunakan format data:[MIME type];base64,[encoded data].

Kapan Harus Menggunakan Gambar Base64

Kapan JANGAN Menggunakan Gambar Base64

Pengodean Base64 meningkatkan ukuran file sekitar 33%. Untuk gambar besar (foto, spanduk), gunakan file gambar tradisional yang dilayani melalui HTTP/2 yang mendukung multipleksing. Hindari Base64 untuk gambar yang lebih besar dari 10–20KB dalam produksi, karena kelebihan ukuran tersebut lebih besar daripada manfaat dari pengurangan permintaan HTTP. String Base64 yang besar juga tidak dapat di-cache secara terpisah oleh browser.

Format Gambar yang Didukung

Cara Menggunakan Alat Ini

1. Unggah gambar Anda: Seret dan lepas file gambar ke area unggah, klik untuk menelusuri file, atau tempel gambar dari papan klip Anda menggunakan Ctrl+V (Cmd+V di Mac).
2. Pratinjau dan tinjau metadata: Alat ini secara instan menampilkan pratinjau gambar Anda dengan metadata termasuk nama file, dimensi, tipe MIME, dan perbandingan ukuran visual antara data asli dan data terenkode.
3. Pilih format output Anda: Beralih di antara empat tab output — Base64 Mentah (hanya string terenkode), Data URI (dengan awalan MIME), tag HTML <img> (siap tempel), atau properti CSS background-image.
4. Salin hasilnya: Klik tombol "⧉ Salin" untuk menyalin output terenkode ke papan klip Anda, siap untuk ditempelkan ke dalam kode Anda.

Panduan Format Output

String Base64 Mentah

Teks terenkode Base64 murni tanpa awalan apa pun. Gunakan ini saat Anda memerlukan data mentah untuk implementasi khusus, panggilan API, atau saat Anda akan menambahkan awalan MIME sendiri.

Data URI

Data URI lengkap termasuk awalan tipe MIME (misalnya, data:image/png;base64,iVBOR...). Ini adalah format yang paling serbaguna — format ini berfungsi langsung di atribut src HTML, nilai url() CSS, dan pemuatan gambar JavaScript.

Tag HTML <img>

Elemen gambar HTML yang siap pakai dengan data URI Base64 sebagai src, ditambah atribut width dan height untuk tata letak yang tepat. Tempelkan langsung ke HTML Anda.

background-image CSS

Deklarasi properti CSS lengkap menggunakan background-image: url('data:...'). Tambahkan ke aturan CSS apa pun untuk menggunakan gambar sebagai latar belakang tanpa referensi file eksternal.

Privasi & Keamanan

Alat ini memproses semuanya secara lokal di browser web Anda menggunakan JavaScript FileReader API. Gambar Anda tidak pernah diunggah ke server mana pun, tidak pernah disimpan, dan tidak pernah dikirimkan melalui jaringan. Konversi Base64 terjadi sepenuhnya di perangkat Anda, menjadikan alat ini aman untuk gambar sensitif dan rahasia.

Pertanyaan yang Sering Diajukan

Apa itu pengodean Base64 untuk gambar?

Pengodean Base64 mengubah data gambar biner menjadi karakter teks ASCII. Ini memungkinkan Anda untuk menyematkan gambar secara langsung dalam kode HTML, CSS, atau JavaScript sebagai data URI, menghilangkan kebutuhan akan permintaan file gambar terpisah. String yang dikodekan kira-kira 33% lebih besar dari data biner aslinya.

Kapan saya harus menggunakan gambar terenkode Base64?

Gunakan Base64 untuk gambar kecil seperti ikon, logo, dan elemen UI (biasanya di bawah 10KB). Ini mengurangi permintaan HTTP dan menyederhanakan penerapan. Hindari untuk gambar besar karena peningkatan ukuran 33% dapat merugikan performa. Ini juga berguna untuk templat email, dokumen HTML file tunggal, dan gambar latar belakang CSS.

Apakah gambar saya diunggah ke server mana pun?

Tidak. Alat ini memproses gambar sepenuhnya di browser Anda menggunakan JavaScript FileReader API. Gambar Anda tidak pernah meninggalkan perangkat Anda, memastikan privasi dan keamanan lengkap. Konversi terjadi secara instan di mesin Anda.

Format gambar apa saja yang didukung?

Konverter ini mendukung semua format gambar umum termasuk PNG, JPEG, GIF, WebP, SVG, BMP, dan ICO. Alat ini secara otomatis mendeteksi tipe MIME dan menghasilkan awalan data URI yang benar untuk setiap format.

Apa perbedaan antara string Base64 dan Data URI?

String Base64 hanyalah representasi teks terenkode dari data gambar. Data URI mencakup awalan dengan tipe MIME (seperti data:image/png;base64,) diikuti oleh string Base64. Data URI dapat digunakan secara langsung dalam atribut src HTML dan nilai url() CSS.

Sumber Daya Tambahan

• Data URL - MDN Web Docs
• Pengodean Base64 - MDN Web Docs