Skip to main content

Pengkode Base64 Gambar Konversi gambar ke data URI yang dikodekan dengan Base64 untuk dimasukkan dalam HTML dan CSS.

Pengkode Base64 Gambar illustration
๐Ÿ”

Pengkode Base64 Gambar

Konversi gambar ke data URI yang dikodekan dengan Base64 untuk dimasukkan dalam HTML dan CSS.

1

Unggah Gambar

Pilih atau seret dan lepas file gambar (PNG, JPG, GIF, SVG, WebP).

2

Lihat Keluaran Base64

Data URI Base64 dihasilkan secara instan.

3

Salin Data URI

Klik Salin untuk menyalin data URI lengkap untuk digunakan dalam HTML atau CSS.

Loading tool...

What Is Pengkode Base64 Gambar?

Pengkode Enkoder Gambar Base64 mengubah berkas gambar menjadi data URI yang dikodekan dalam format Base64 sehingga dapat disematkan langsung ke dalam HTML, CSS, atau JavaScript. Sebagai gantinya, alih-alih merujuk pada file eksternal, data gambar dimasukkan secara inline sebagai string data:image/type;base64,... Ini menghilangkan permintaan HTTP tambahan dan ideal untuk ikon kecil, logo, dan sprite. Alat ini membaca gambar menggunakan FileReader API, mendeteksi jenis MIME secara otomatis, dan menghasilkan URI data yang lengkap. Mendukung format PNG, JPEG, GIF, SVG, WebP, dan format umum lainnya. Semua proses pengolahan dilakukan di browser Anda - gambar tidak pernah meninggalkan perangkat Anda.

Why Use Pengkode Base64 Gambar?

  • Hilangkan permintaan HTTP ekstra dengan memasukkan gambar kecil
  • Deteksi jenis MIME otomatis untuk semua format gambar umum
  • 100% klien-sisi - gambar tidak pernah meninggalkan browser Anda
  • Menghasilkan data URI yang siap digunakan untuk HTML dan CSS

Common Use Cases

Penanaman HTML

Tanam ikon kecil dan logo langsung dalam atribut src img HTML.

Latar Belakang CSS

Gunakan data URI dalam properti background-image CSS.

Templat Email

Tanam gambar dalam email HTML untuk menghindari sumber daya eksternal yang diblokir.

Aplikasi Berkas Tunggal

Bundel gambar langsung ke JavaScript untuk aplikasi yang dapat diakses secara offline.

Technical Guide

FileReader API membaca gambar yang dipilih sebagai ArrayBuffer, kemudian mengubahnya menjadi string Base64 melalui readAsDataURL(). URI data hasilnya mengikuti format data:[MIME];base64,[encoded-data]. Jenis MIME dideteksi secara otomatis dari file. Pengkodean Base64 meningkatkan ukuran data sekitar 33%, sehingga teknik ini paling efisien untuk gambar di bawah 10KB. Untuk gambar yang lebih besar, referensi file eksternal dengan caching yang tepat lebih performant.

Tips & Best Practices

  • 1
    Paling baik untuk gambar kecil di bawah 10KB untuk menghindari pembengkakan ukuran file HTML/CSS
  • 2
    Gunakan untuk ikon, logo, dan sprite UI yang perlu dimuat secara instan
  • 3
    Data URI tidak disimpan secara terpisah - mereka merupakan bagian dari file HTML/CSS
  • 4
    Gambar SVG juga dapat dienkripsi URL sebagai gantinya Base64 untuk ukuran yang lebih kecil

Related Tools

Frequently Asked Questions

Q Apakah alat ini gratis?
Ya, sepenuhnya gratis tanpa pendaftaran yang diperlukan.
Q Apakah gambar saya diunggah ke server?
Tidak. Semua pemrosesan terjadi di browser Anda - gambar tidak pernah meninggalkan perangkat Anda.
Q Format gambar apa yang didukung?
PNG, JPEG, GIF, WebP, SVG, ICO, BMP, dan format apa pun yang didukung oleh browser Anda.
Q Apakah ada batas ukuran file?
Tidak ada batasan keras, tetapi Base64 menambahkan overhead 33% - paling baik untuk gambar kecil.
Q Bisakah saya menggunakan keluaran dalam CSS?
Ya, tempel data URI di url() untuk background-image atau properti gambar CSS apa pun.

About This Tool

Pengkode Base64 Gambar is a free online tool by FreeToolkit.ai. All processing happens directly in your browser โ€” your data never leaves your device. No registration or installation required.