Base64
Image Data URL
⚠️ Large image may freez the browser
Enkode PNG ke Base64 untuk CSS
Ubah gambar PNG ke format Base64 atau DataURL. Sematkan langsung ke CSS atau JavaScript tanpa berkas eksternal. Berkas berukuran besar dapat memengaruhi performa; ukuran yang lebih kecil disarankan. Pengodean Base64 menyederhanakan integrasi dengan aset web, mengurangi ketergantungan pada sumber daya eksternal. Format DataURL menyederhanakan struktur kode untuk pengiriman konten dinamis.
Image → Base64 / Data URL
Click or Drag & Drop an Image
Konversi Gambar ke Kode Base64
1
Unggah gambar PNG
Unggah gambar PNG Anda dengan mengklik atau menyeretnya ke area unggah.
2
Pilih Format Enkoding
Pilih tab 'Base64' atau 'DataURL' untuk memilih format pengkodean yang Anda inginkan.
3
Lihat Data Base64
Representasi Base64 atau DataURL gambar Anda akan muncul di area teks di bawah tab.
4
Salin Teks yang Dikodekan
Klik tombol 'Salin' untuk menyalin teks yang telah dienkode ke papan klip Anda untuk digunakan dalam CSS atau JavaScript.
Sematkan PNG secara langsung ke CSS Anda
Menyertakan gambar kecil langsung dalam CSS tanpa mengelola berkas terpisah dapat dicapai dengan mengonversi PNG ke format Base64 atau DataURL. Alat konversi PNG ke Base64 untuk CSS menyederhanakan alur kerja pengembangan web Anda dan mengurangi permintaan HTTP. Hal ini menghasilkan kode yang lebih bersih, lebih efisien, dan waktu muat halaman yang lebih cepat.
Kurangi Ukuran File dan Permintaan HTTP
Alat ini mengurangi jumlah berkas yang dibutuhkan situs web Anda untuk dimuat dengan mengonversi gambar PNG ke format Base64 atau DataURL. Menyematkan gambar langsung ke CSS atau JavaScript Anda mengurangi permintaan HTTP, yang dapat meningkatkan kecepatan pemuatan halaman. Pendekatan ini mengoptimalkan kinerja situs web dengan meminimalkan ketergantungan pada berkas eksternal.
Pertanyaan yang Sering Diajukan
Apa itu Base64 DataURL dan mengapa saya akan menggunakannya?
DataURL Base64 adalah cara untuk merepresentasikan gambar sebagai rangkaian karakter. Hal ini memungkinkan Anda untuk menyematkan gambar langsung ke dalam kode CSS atau JavaScript Anda, tanpa perlu memuatnya dari berkas eksternal. Ini bisa berguna untuk ikon atau gambar kecil.
Bagaimana cara menggunakan Base64 atau DataURL yang dihasilkan?
Cukup salin kode yang disediakan setelah mengonversi gambar Anda dan tempelkan ke CSS atau JavaScript Anda. Contohnya, dalam CSS, Anda dapat menggunakannya seperti ini: background-image: url('data:image/png;base64,...');
Format gambar apa saja yang didukung oleh alat ini?
Alat ini dirancang khusus untuk gambar PNG. Format lain mungkin tidak akan terkonversi dengan benar.
Mengapa gambar berukuran besar tidak disarankan?
Gambar berukuran besar menghasilkan string Base64 yang sangat panjang, yang dapat memperlambat komputer Anda dan memperlambat waktu muat halaman. Sebaiknya gunakan alat ini untuk gambar yang lebih kecil.
Apakah ada batasan ukuran gambar yang dapat saya unggah?
Meskipun tidak ada batasan ukuran file yang ketat, kinerja akan menurun seiring ukuran gambar yang lebih besar. Kami merekomendasikan penggunaan file PNG yang lebih kecil untuk hasil terbaik.