Konverter Gambar ↔ Base64
Ubah gambar menjadi data URL Base64 dan sebaliknya — lengkap dengan cuplikan CSS dan HTML
Tentang alat ini
Jatuhkan, pilih, atau tempel sebuah gambar lalu dapatkan bentuk Base64-nya dalam segala rasa yang mungkin Anda butuhkan: data URL siap pakai, deklarasi background-image untuk CSS, tag <img> lengkap dengan dimensi intrinsiknya, serta muatan Base64 mentah. Arah sebaliknya juga jalan — tempel data URL atau gumpalan Base64 telanjang, dan gambarnya didekode, dipratinjau, dan bisa diunduh sebagai berkas.
Formatnya dikenali dari bita ajaib, bukan dari ekstensi berkas atau tipe MIME yang dinyatakan, jadi berkas PNG yang diganti nama menjadi .jpg (atau data URL berlabel keliru) tetap terkonversi dengan benar. Panel ukurannya jujur soal ongkosnya: Base64 menggelembungkan data sekitar sepertiga, dan ukuran terenkode yang persis ditampilkan di sebelah aslinya supaya Anda bisa menimbang apakah penyematan itu sepadan.
Berbeda dari kebanyakan situs gambar-ke-Base64, tidak ada yang diunggah — berkasnya dibaca dengan FileReader API milik browser lalu dienkode di dalam halaman. Itu membuatnya aman untuk tangkapan layar dasbor internal, foto produk yang belum diluncurkan, atau apa pun yang lebih baik tidak Anda serahkan ke server orang asing.
Pertanyaan yang sering diajukan
- Kapan sebaiknya menyematkan gambar sebagai Base64 alih-alih menautkan berkas?
- Ketika gambarnya kecil (kira-kira di bawah 10 KB), jarang berubah, dan kalau dipisah justru menambah satu permintaan HTTP — misalnya ikon, logo di surel, atau dokumen HTML satu berkas. Untuk apa pun yang lebih besar, berkas terpisah menang: ia di-cache sendiri, dimuat paralel, dan tidak menggemukkan HTML atau CSS Anda sebesar 33%.
- Kenapa versi Base64-nya sekitar sepertiga lebih besar daripada berkas saya?
- Base64 mewakili tiap 3 bita biner sebagai 4 karakter ASCII, yakni tambahan struktural +33% (plus paling banyak dua karakter padding). Gzip atau Brotli di server merebut kembali sebagian, tetapi penggelembungan itu melekat pada pengodeannya — ia menukar ukuran demi kemampuan menyisipkan data biner ke dalam teks.
- Bisakah saya mendekode data URL yang saya temukan di lembar gaya atau HTML?
- Bisa — beralihlah ke Base64 → gambar lalu tempel seluruhnya, termasuk awalan data:. Data URL SVG berenkode persen (yang tanpa ;base64) juga bisa didekode, dan ganti baris atau spasi di dalam muatannya dibersihkan otomatis. Hasilnya dipratinjau di halaman dan diunduh dengan ekstensi yang benar.
- Apakah ini bekerja untuk SVG, GIF, dan ICO, atau hanya PNG dan JPEG?
- Semua yang dikenali pengendus format bisa dikonversi ke Base64: PNG, JPEG, WebP, GIF, SVG, BMP, ICO, dan AVIF. Khusus SVG, pertimbangkan bahwa sumber XML-nya sering kali lebih kecil dan lebih terbaca bila disisipkan langsung — mengenkode SVG ke Base64 baru masuk akal ketika urusan kutip-mengutip atau escape jadi merepotkan.