Konverter Gambar ke BASE64
URL data Base64 menggabungkan jenis media dan byte gambar yang telah dienkode dalam satu nilai teks, misalnya data:image/png;base64,.... Pilih gambar hingga 20 MiB dan konverter akan membuat nilai tersebut secara lokal di peramban. Sebelum menyalinnya, Anda dapat memeriksa rincian berkas asli dan perkiraan panjang URL data yang dihasilkan.
Cara mengodekan gambar dengan format Base64
-
1
Pilih gambar
Pilih satu berkas gambar dengan ukuran maksimal 20 MiB.
-
2
Enkode secara lokal
Peramban membaca berkas dan membuat URL data Base64 lengkap tanpa mengunggahnya.
-
3
Periksa hasil
Periksa jenis media, rincian berkas, dan perkiraan panjang URL data yang dihasilkan.
-
4
Salin URL data
Salin nilai lengkap `data:image/...;base64,...` ke papan klip.
Kapan harus ditampilkan secara inline, dan kapan harus dihubungkan
Penyisipan Base64 dapat menyimpan permintaan HTTP meskipun mengakibatkan peningkatan ukuran sebesar 33%, hal ini layak dilakukan untuk beberapa jenis aset, namun tidak efisien bagi yang lain.
Perhitungan ukuran
| Ukuran asli | Ukuran Base64 | Byte tambahan |
|---|---|---|
| 1 KB | 1.36 KB | 360 B |
| 10 KB | 13.6 KB | 3.6 KB |
| 100 KB | 136 KB | 36 KB |
| 1 MB | 1.36 MB | 360 KB |
Panduan keputusan
| Kasus penggunaan | Inline atau eksternal |
|---|---|
| Ikon berukuran kurang dari 2 KB (logo SVG, sprite) | Inline |
Gambar kursor dalam CSS (cursor: url()) |
Inline |
| Demo HTML atau CSS kecil yang mandiri | Inline |
| Ikon yang disematkan dalam payload JavaScript | Inline |
| Gambar hero, lebih dari 50 KB | Eksternal |
| Apa pun yang dapat disimpan terpisah dalam cache | Eksternal |
Format URI data
data:[<mediatype>][;base64],<data>
Contoh:
data:image/png;base64,iVBORw0KGgo..., PNGdata:image/svg+xml;utf8,<svg>...</svg>, format SVG; umumnya lebih cocok digunakan secara inline tanpa encoding Base64data:image/jpeg;base64,/9j/4AAQS..., JPG
Tips
- SVG umumnya lebih baik digunakan sebagai
url()dengan pengkodeanutf8daripada base64; formatnya lebih singkat dan lebih mudah dibaca. - Enkoding tidak memeriksa atau membersihkan isi gambar. Sematkan hanya berkas tepercaya, terutama SVG yang dapat memuat konten aktif atau eksternal.
- Gambar berukuran besar dalam payload JSON dapat menghambat proses parsing jika sangat besar; pertimbangkan penggunaan format multipart atau referensi eksternal.
- CSS background-image dengan format base64 dapat ditampilkan secara rapi, namun menghambat penggunaan caching di berbagai halaman.
Pertanyaan yang Sering Diajukan
Base64 mengkodekan 3 byte data masukan menjadi 4 karakter, sehingga hasil keluaran selalu sekitar 33% lebih panjang daripada data masukan. Sebuah gambar berukuran 10 KB akan menghasilkan deretan karakter sekitar 13.600 karakter; panjang seperti ini merupakan hal yang umum terjadi.
Konverter menerima satu gambar hingga 20 MiB. Ini batas pemrosesan, bukan anjuran untuk menyematkan berkas sebesar itu. URL data sebaiknya tetap kecil karena Base64 menambah ukuran sekitar sepertiga dan mencegah penyimpanan cache terpisah.
Tidak. Enkoding Base64 dijalankan langsung di peramban Anda; gambar tidak pernah keluar dari perangkat Anda.
Tidak di enkoder ini. Gunakan alat Base64 ke Gambar yang terpisah untuk mengubah URL data atau string Base64 mentah menjadi berkas gambar yang dapat diunduh.
Alat Terkait
Pembuat Undangan
Buat undangan pernikahan, ulang tahun, akikah, atau acara kantor. Sesuaikan tulisan dan warna, lihat pratinjau langsung, lalu unduh PNG siap cetak ukuran 5R.
Pembaca Kode QR
Dekode kode QR dari gambar PNG, JPG, atau WebP di browser. Lihat URL, Wi-Fi, vCard, SMS, email, kalender, geo, atau teks sebelum digunakan.
Generator Kode QR
Buat kode QR secara lokal di browser dari URL, teks biasa, atau payload QR yang diformat benar, lalu unduh sebagai PNG.
Pembuat GIF
Ubah rangkaian gambar atau video pendek menjadi GIF animasi. Atur frame rate, pengulangan, dan ukuran sebelum mengekspor.
Editor Foto
Editor foto berbasis browser dengan pangkas, putar, kecerahan, kontras, saturasi, filter, hamparan teks, dan ekspor ke JPG, PNG, atau WebP.
Generator Favicon dari Inisial dan Emoji
Buat favicon dari inisial atau satu emoji. Pilih bentuk dan latar; desain teks juga menyediakan warna karakter dan gaya font.