Konversi Gambar ke Base64 Online
Enkode gambar ke teks Base64 untuk CSS, HTML, dan email.
Kegunaannya
Dari gambar ke teks hanya dengan satu klik
Tanpa server
Enkoding terjadi di browser Anda. Gambar Anda tidak pernah meninggalkan perangkat Anda.
Siap ditempel
Menghasilkan data URI lengkap dengan prefiks MIME, siap untuk HTML, CSS, atau JSON.
Semua format
Mendukung JPG, PNG, WebP, GIF, SVG, dan gambar apa pun yang dapat ditangani browser.
Instan
Enkoding berjalan langsung, tanpa unggahan file atau respons server yang perlu ditunggu.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Unggah gambar Anda
Seret atau pilih gambar yang ingin Anda enkode. Mendukung JPG, PNG, WebP, GIF, dan SVG.
Salin string Base64
Alat ini secara otomatis menghasilkan string Base64 dan data URI lengkap yang siap digunakan.
Gunakan dalam kode Anda
Tempel data URI ke atribut src tag img, properti CSS background-image, atau isi email HTML.
FAQ
Ada pertanyaan?
Base64 adalah skema enkoding yang mengonversi data biner, seperti isi file gambar, menjadi string karakter ASCII yang dapat dicetak. Ini memungkinkan data gambar disertakan langsung dalam format teks seperti HTML, CSS, atau JSON tanpa mereferensikan file eksternal.
Base64 berguna untuk ikon kecil dalam CSS karena menghindari permintaan HTTP tambahan, untuk gambar dalam email HTML karena beberapa klien email memblokir gambar eksternal, dan untuk gambar dalam aplikasi yang berjalan tanpa server atau di lingkungan offline. Tidak direkomendasikan untuk gambar berukuran besar.
Base64 merepresentasikan setiap kelompok 3 byte data biner dengan 4 karakter ASCII. Artinya setiap byte data asli memerlukan 1,33 byte dalam Base64, menghasilkan peningkatan ukuran sekitar 33%. Selain itu, browser harus mendekode string sebelum rendering, yang memiliki biaya CPU.
Data URI mengikuti format: data:[tipe MIME];base64,[data]. Misalnya untuk PNG: data:image/png;base64,iVBORw0KGgo... Tipe MIME memberi tahu browser cara menginterpretasikan data. Tipe umum meliputi image/png, image/jpeg, image/webp, dan image/svg+xml.
Berdampak negatif untuk gambar besar. Gambar Base64 tidak dapat di-cache secara terpisah oleh browser, meningkatkan ukuran dokumen, dan memerlukan dekoding. Untuk gambar kecil seperti ikon di bawah 2-3 KB, keuntungan menghilangkan permintaan HTTP dapat mengimbangi biaya ukuran yang lebih besar.
Base64 dalam pengembangan web: kapan menggunakannya dan kapan menghindarinya
Enkoding Base64 didefinisikan dalam RFC 2045 tahun 1996 sebagai bagian dari standar MIME untuk email. Dalam konteks web, data URI (RFC 2397, 1998) memungkinkan penyematan data gambar langsung dalam HTML dan CSS. Ini sangat berharga di masa awal HTTP/1.1, ketika setiap permintaan HTTP memiliki biaya latensi yang signifikan dan mengurangi jumlah permintaan merupakan teknik optimasi utama.
Dengan kehadiran HTTP/2 dan HTTP/3 yang memungkinkan multipleksing permintaan, argumen performa untuk Base64 telah melemah secara signifikan. Namun Base64 tetap menjadi solusi standar untuk menyematkan gambar dalam email HTML di mana klien email sering memblokir gambar eksternal, dalam dokumen PDF yang dihasilkan oleh kode, dan dalam aplikasi yang harus sepenuhnya mandiri seperti aplikasi Electron atau halaman yang disimpan secara lokal.
Aturan praktis dalam pengembangan web modern: gunakan Base64 untuk gambar lebih kecil dari 2-3 KB seperti ikon SVG, spinner, dan pemisah dekoratif kecil, di mana penghematan satu permintaan HTTP membenarkan overhead ukuran. Untuk gambar yang lebih besar, gunakan file yang direferensikan URL dan manfaatkan cache browser serta multipleksing HTTP/2.