Cara menggunakan
- Seret gambar ke area seret-lepas, klik area tersebut untuk memilih file, atau tempel gambar dari papan klip. Anda bisa memproses beberapa file sekaligus.
- Jika perlu, pilih format target di Konversi ke (PNG, JPEG, atau WebP), atur Kualitas, dan tetapkan Lebar maks.
- Periksa dimensi, ukuran asli, dan ukuran hasil enkode yang ditampilkan untuk setiap gambar.
- Salin atau unduh keluaran yang Anda perlukan: data URI, Base64 mentah, tag img HTML, CSS background-image, atau Markdown.
Cara kerja konversi gambar ke Base64
Base64 mengubah byte file gambar menjadi teks biasa yang tersusun dari 64 karakter. Setiap 3 byte menjadi 4 karakter, sehingga teksnya sekitar 33% lebih besar daripada filenya. Data URI menambahkan awalan pendek berisi tipe MIME, misalnya data:image/png;base64,, sehingga browser dapat menampilkan teks tersebut di mana pun ia mengharapkan URL gambar.
Gambar dibaca dan dienkode secara lokal di browser Anda. Tidak ada yang diunggah, jadi tangkapan layar pribadi dan desain yang belum dirilis tetap berada di perangkat Anda.
Keluaran mana yang sebaiknya disalin?
- Data URI untuk atribut
src, JavaScript, dan kolom JSON yang mengharapkan URL. - Base64 mentah untuk API yang hanya menginginkan byte terenkode, biasanya disertai kolom terpisah untuk tipe MIME atau nama file.
- Tag img HTML untuk langsung ditempel ke halaman atau template.
- CSS background-image untuk ikon dan dekorasi di stylesheet.
- Markdown untuk dokumentasi dan catatan. Sebagian perender, termasuk GitHub, tidak menampilkan gambar data URI.
Sekilas tentang format yang didukung
Beberapa karakter pertama string Base64 mengungkapkan tipe file, karena karakter tersebut merupakan hasil enkode tanda pengenal (signature) format file.
| Format | Tipe MIME | Base64 diawali dengan |
|---|---|---|
| PNG | image/png | iVBORw0KGgo |
| JPEG | image/jpeg | /9j/ |
| WebP | image/webp | UklGR |
| GIF | image/gif | R0lGOD |
| SVG | image/svg+xml | PHN2Zy atau PD94bWw |
| BMP | image/bmp | Qk |
| ICO | image/x-icon | AAABAA |
| AVIF | image/avif | bervariasi |
| TIFF | image/tiff | SUkqAA atau TU0AKg |
Kapan sebaiknya gambar disematkan secara inline
Data URI menghemat satu permintaan jaringan dan membuat file menjadi mandiri. Cara ini cocok untuk ikon dan logo kecil berukuran beberapa kilobyte, laporan HTML satu file, placeholder buram berukuran mungil, dan gambar yang dikirim di dalam JSON. Untuk foto berukuran besar, cara ini kurang tepat: tambahan sepertiga ukuran, tidak adanya cache browser terpisah, serta file HTML atau CSS yang lebih berat dan harus diunduh sebelum apa pun dirender biasanya lebih merugikan daripada permintaan yang dihemat. Jika situs Anda mengirim Content-Security-Policy, gambar inline juga memerlukan data: di img-src.
Pertanyaan yang sering diajukan
Apakah gambar saya diunggah ke server?
Tidak. Browser membaca setiap file dan mengenkodenya di perangkat Anda. Tidak ada yang dikirim ke base64.is atau ke tempat lain.
Mengapa teks Base64 lebih besar daripada gambarnya?
Base64 memakai 4 karakter untuk setiap 3 byte, sehingga hasilnya sekitar 33% lebih besar, ditambah awalan data URI. Untuk memperpendeknya, atur Lebar maks. atau konversi ke WebP atau JPEG dengan kualitas lebih rendah.
Bisakah saya mengonversi beberapa gambar sekaligus?
Bisa. Pilih atau seret beberapa file. Setiap gambar mendapatkan pratinjau, informasi ukuran, dan keluarannya sendiri, masing-masing dengan tombol Salin dan Unduh.
Apakah gambar Base64 berfungsi di email HTML?
cid: lebih andal.