Gambar ke Base64
Letakkan gambar apa pun ke konverter gambar ke Base64 ini untuk mendapatkan data URI dan cuplikan siap tempel untuk HTML, CSS, dan JavaScript. Gambar inline menghemat permintaan HTTP untuk ikon kecil, dan sangat penting untuk HTML satu file, template email, dan aplikasi offline.
Cara mengonversi Gambar ke Base64 secara online
- Pilih file gambar atau tempel URL gambar.
- Pilih output: data URI,
<img>, CSS background, favicon, JSON, dan lainnya. - Klik Encode gambar ke Base64.
- Pratinjau gambar dan salin kodenya.
Konverter Gambar ke Base64 lainnya
Format output
Pilih bagaimana hasil akan dibungkus. Konverter dapat menghasilkan:
- txt: hanya string Base64, siap ditempel ke kode, kolom database, atau request API.
- uri: URI
data:lengkap yang dapat Anda tempel di address bar browser atau gunakan di mana pun URL diterima. - html img: tag
<img>dengan data URI disrc. - css background image: aturan CSS yang menggunakan
background-image: url(data:...). - html favicon: tag
<link rel="icon">untuk favicon inline. - html hyperlink: tautan
<a>yang mengunduh atau membuka file tersemat. - html iframe:
<iframe>yang menampilkan konten secara inline. - javascript image: JavaScript yang membuat objek
Image. - javascript popup: JavaScript yang membuka konten di jendela baru.
- json: objek JSON berisi nama file, MIME type, dan data.
- xml: elemen XML dengan data di dalam bagian CDATA.
Kapan sebaiknya menyisipkan gambar sebagai Base64?
Sisipkan gambar kecil (di bawah sekitar 5–10 KB) seperti ikon, logo, dan placeholder untuk menghemat permintaan. Hindari menyisipkan foto besar: foto membuat HTML/CSS lebih berat, tidak dapat di-cache secara terpisah, dan menunda rendering. Untuk pembahasan lengkap, lihat penjelasan data URI.
Pertanyaan yang sering diajukan
Bagaimana cara mengonversi gambar ke Base64?
Pilih gambar Anda, pilih "Data URI" atau "<img>" sebagai output, lalu klik "Encode gambar ke Base64". Salin hasilnya ke HTML atau CSS Anda.
Format gambar apa saja yang didukung?
Format apa pun yang dapat dibaca browser Anda: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF, TIFF, dan lainnya.
Bagaimana cara menggunakan gambar Base64 di HTML?
Masukkan data URI ke atribut src: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">.
Komentar (0)
Ada pertanyaan, ide, atau bug di “Gambar ke Base64”? Tinggalkan komentar, beri rating alat ini, atau balas komentar lainnya.
Belum ada komentar. Jadilah yang pertama memberikan masukan!