Konverter Gambar ke Base64
Ubah gambar menjadi data URI Base64 untuk HTML, CSS, atau JSON, dan sebaliknya. Semuanya berjalan di perangkat Anda — tidak ada yang diunggah.
- Masuk
- PNG · JPEG · WebP · GIF · SVG · ICO · Base64
- Keluar
- Base64 · data URI · HTML · CSS · image file
Jatuhkan gambar untuk diubah ke Base64
PNG, JPEG, WebP, GIF, AVIF, SVG, dan lainnya. Anda juga bisa menempel gambar dari clipboard. Gambar tidak pernah meninggalkan perangkat Anda.
Ubah gambar ke Base64, dan Base64 kembali ke gambar
Konverter gambar ke Base64 ini mengubah PNG, JPEG, WebP, GIF, atau SVG menjadi string Base64 dan data URI, serta menulis cuplikan yang benar-benar Anda tempel: tag img HTML, aturan CSS background-image, Markdown, dan string JSON. Alat ini juga bekerja sebaliknya: tempel data URI atau Base64 mentah untuk melihat gambarnya, memeriksa tipe sebenarnya, dan mengunduhnya. Gambar dibaca di perangkat Anda dan tidak pernah diunggah.
Cara mengubah gambar ke Base64
- Jatuhkan gambar ke halaman, pilih satu, atau tempel dari clipboard dengan Ctrl/⌘ + V.
- Periksa pratinjau, dimensi, dan ukurannya. Untuk foto, aktifkan Kodekan ulang sebagai WebP agar string lebih kecil; untuk SVG, biarkan SVG URL-encoded aktif.
- Salin bentuk yang Anda butuhkan: Base64 mentah, data URI, tag HTML
<img>, CSSbackground-image, Markdown, atau string JSON. - Untuk arah sebaliknya, beralih ke Base64 → Gambar, tempel string-nya, lalu unduh gambar atau kirim ke alat lain.
Apa itu data URI
Data URI menaruh isi berkas langsung di dalam URL: data:image/png;base64,iVBORw0KGgo…. Bagian sebelum koma menyebut media type dan menyatakan bahwa datanya di-encode Base64; sisanya adalah gambar itu sendiri. Di mana pun browser menerima URL gambar — atribut src, url() CSS, gambar Markdown — browser menerima data URI, dan gambar tiba tanpa request terpisah.
Konsekuensinya ukuran. Base64 membuat data sekitar 33% lebih besar, dan gambar yang disematkan tidak bisa di-cache sendiri: gambar diunduh ulang bersama setiap salinan HTML atau CSS yang memuatnya. Penyematan menguntungkan untuk gambar kecil — ikon, logo mungil, placeholder, gambar di email HTML atau dokumen satu berkas — dan lebih merugikan untuk foto berukuran ratusan kilobyte.
Cuplikan mana yang dipakai
- Base64 mentah
- Hanya byte yang di-encode, untuk API dan field JSON yang mengharapkan Base64 dan menyimpan tipenya terpisah.
- Data URI
- URL data: lengkap, siap untuk tempat mana pun yang menerima URL gambar.
- HTML <img>
- Tag img dengan data URI, teks alt dari nama berkas, serta lebar dan tinggi gambar, yang mencegah pergeseran tata letak.
- CSS background-image
- Deklarasi untuk stylesheet. Bagus untuk dekorasi kecil yang berulang; hindari untuk gambar besar di critical CSS.
- Markdown dan JSON
- Gambar dalam sintaks Markdown, dan data URI sebagai string JSON yang dikutip dan di-escape dengan benar.
SVG: URL-encoding lebih baik dari Base64
SVG adalah teks, jadi sama sekali tidak butuh Base64. Hanya meng-percent-encode beberapa karakter yang tidak bisa dimuat URL, dan mengubah kutip ganda menjadi kutip tunggal, menghasilkan URI data:image/svg+xml,… yang biasanya 15–30% lebih kecil dari versi Base64, terkompresi lebih baik dengan gzip, dan tetap mudah dibaca. Itu bawaan untuk berkas SVG di sini; matikan jika sebuah sistem mewajibkan Base64.
Untuk gambar raster, mengodekan ulang ke WebP sebelum dikonversi sering memangkas string hingga setengahnya atau lebih untuk foto dan tangkapan layar. Ini memakai encoder bawaan browser Anda; jika browser tidak bisa menulis WebP, alat ini memberitahukannya dan menyimpan hasil yang didapat. Untuk kendali lebih atas format dan kualitas, gunakan konverter gambar lebih dulu.
Base64 ke gambar
Tempel data URI lengkap, Base64 mentah, atau bahkan seluruh tag <img> atau aturan CSS, dan alat ini mengekstrak gambarnya, menampilkan pratinjaunya, serta ukuran dan dimensinya. Tipe dibaca dari byte pertama gambar itu sendiri, bukan dipercaya dari labelnya, sehingga JPEG yang dilabeli PNG diunduh sesuai jenis aslinya. Untuk Base64 yang berisi sesuatu selain gambar, seperti PDF atau ZIP, gunakan Base64 decoder, yang menangani jenis berkas apa pun.
Pertanyaan yang sering diajukan
- Bagaimana cara convert gambar ke Base64?
- Jatuhkan atau tempel gambar ke konverter. String Base64, data URI, serta cuplikan HTML, CSS, Markdown, dan JSON siap pakai langsung muncul, masing-masing dengan tombol salin.
- Bagaimana cara mengubah Base64 ke gambar?
- Beralih ke Base64 → Gambar dan tempel data URI atau string Base64 mentah. Gambar langsung ditampilkan dan bisa diunduh dengan ekstensi yang benar.
- Apakah Base64 membuat gambar lebih besar?
- Ya, sekitar sepertiga, karena setiap tiga byte menjadi empat karakter. Penyematan layak untuk gambar kecil yang menghemat satu request, bukan untuk foto besar.
- Bagaimana cara memakai gambar Base64 di CSS?
- Pakai sebagai URL: background-image: url("data:image/png;base64,…");. Salin cuplikan CSS dan bentuknya sudah seperti itu.
- Apakah SVG sebaiknya di-encode Base64?
- Biasanya tidak. Data URI SVG yang di-URL-encode lebih kecil dari versi Base64 dan tetap mudah dibaca, dan didukung semua browser modern. Alat ini menghasilkannya secara bawaan untuk berkas SVG.
- Apakah gambar Base64 berfungsi di email?
- Dukungannya beragam: banyak klien webmail, termasuk Gmail, memblokir gambar data URI. Untuk email, gambar lampiran yang dirujuk dengan cid: atau gambar yang di-host lebih andal.
- Apakah gambar saya diunggah?
- Tidak. Gambar dibaca dan di-encode di browser Anda, dan tidak ada yang dikirim ke server.