Cara mengubah gambar ke Base64
- Seret gambar ke dalam kotak, klik untuk memilih gambar, atau tempel dari clipboard dengan Ctrl+V.
- Pilih format output: data URI, Base64 mentah, HTML, CSS, Markdown, atau JSON.
- Klik Salin lalu tempel kodenya ke HTML, CSS, template email, atau request API Anda.
Kapan sebaiknya menyematkan gambar sebagai Base64?
Gambar Base64 inline menghemat satu request HTTP, sehingga berguna untuk ikon kecil, tanda tangan email, dokumen HTML satu file, dan payload API. Karena Base64 sekitar 33% lebih besar daripada file aslinya dan tidak bisa di-cache secara terpisah, tetap gunakan file gambar biasa untuk foto dan apa pun yang berukuran lebih dari beberapa kilobyte.
Penjelasan format output
- Data URI –
data:image/png;base64,…untuk atributsrcdan CSS. - Base64 saja – string mentah untuk API dan database.
- HTML / CSS / Markdown – potongan kode lengkap yang bisa langsung ditempel.
- JSON – nama file, tipe MIME, dan data dalam satu objek.
Pertanyaan yang sering diajukan
Apakah konversi ke Base64 membuat gambar lebih besar?
Ya, sekitar sepertiganya. PNG berukuran 30 KB menjadi kira-kira 40 KB teks Base64. Kompres atau perkecil gambar terlebih dahulu jika ukuran itu penting.
Format gambar apa saja yang bisa dikonversi?
Format apa pun yang bisa dibuka browser Anda: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF, dan lainnya. Tipe MIME yang benar otomatis ditambahkan ke data URI.
Bagaimana cara memakai gambar Base64 di CSS?
Pilih format CSS lalu tempel hasilnya ke dalam rule Anda, misalnya .logo { background-image: url("data:image/png;base64,…"); }.