CodeKitHubApakah alat ini?
Base64 adalah cara untuk mewakili data binari — seperti bait mentah imej — sebagai teks biasa, menggunakan hanya huruf, digit dan beberapa simbol sahaja. Oleh sebab ia teks biasa, imej yang dikodkan Base64 boleh dibenamkan terus dalam HTML, CSS atau JSON dan bukannya dirujuk sebagai fail berasingan.
"URL data" membalut teks Base64 itu dengan awalan kecil (data:image/png;base64,) yang memberitahu pelayar jenis fail apa itu, supaya ia boleh dimasukkan terus ke dalam atribut src atau url() dan dipaparkan tanpa sebarang permintaan tambahan.
Kenapa guna alat ini?
- Dapatkan kedua-dua format sekali gus — URL data penuh untuk HTML/CSS, dan Base64 mentah (tiada awalan) untuk dibenamkan dalam JSON atau fail config.
- Tiada perjalanan pergi-balik pelayan: menghapuskan satu permintaan HTTP untuk ikon kecil, avatar atau imej sebaris.
- Mengekalkan bait fail asal dengan tepat — tiada pengekodan semula atau kehilangan kualiti, tidak seperti alat yang menyahkod dan menyimpan semula imej.
- Menunjukkan perbezaan saiz supaya anda tahu apa yang anda tukar untuk kemudahan itu.
- Peribadi: fail dibaca secara tempatan dengan API FileReader pelayar dan tidak pernah meninggalkan peranti anda.
Cara menggunakannya
- Klik kawasan muat naik atau seret fail imej ke atasnya.
- Salin URL data penuh jika anda menampal ke dalam <img src> atau background-image CSS.
- Salin Base64 mentah (tiada awalan data:) jika anda membenamkan nilai itu dalam JSON, YAML atau format config lain yang sudah tahu jenis fail.
- Semak nota saiz — teks Base64 lebih kurang satu pertiga lebih besar daripada fail binari asal.
Contoh
Input
Fail ikon PNG 12 KB.Hasil
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB teks) ditambah rentetan yang sama tanpa awalan data:.Kenaikan saiz ~33% adalah sifat semula jadi pengekodan Base64 (3 bait binari menjadi 4 aksara teks) — ia bukan pepijat dalam alat ini.
Kegunaan bagi setiap format
| Format | Kegunaan biasa |
|---|---|
| URL data penuh | HTML <img src="...">, background-image CSS: url(...), imej e-mel sebaris |
| Base64 mentah | Muatan API JSON, fail YAML/config, medan BLOB pangkalan data, protokol binari tersuai |
Base64 dan saiz imej — pertukaran dalam praktik
Overhed ~33% bermakna pembenaman Base64 terbaik dikekalkan untuk aset kecil: ikon 2 KB menjadi ~2.7 KB teks sebaris yang tidak berbahaya, tetapi foto 500 KB menjadi ~665 KB teks yang duduk sebaris dalam HTML anda, yang melambatkan penghuraian dan tidak dapat dicache berasingan daripada halaman.
Jika anda membenamkan banyak imej atau imej yang lebih besar, timbangkan manfaat satu permintaan yang dijimatkan berbanding kos berat halaman — dan pertimbangkan mampatan dahulu.
Soalan lazim
Kenapa rentetan Base64 jauh lebih besar daripada fail imej saya?
Base64 mengekod setiap 3 bait data binari sebagai 4 aksara teks, iaitu overhed saiz tetap ~33%. Untuk imej 100 KB, jangkakan lebih kurang 133 KB teks Base64. Ini biasa dan tidak dapat dielakkan — itulah kos mewakili data binari sebagai teks yang selamat dan mudah alih.
Apakah perbezaan antara URL data dan rentetan Base64 mentah?
URL data mengandungi awalan data:image/png;base64, yang memberitahu pelayar atau pemapar jenis MIME yang akan dinyahkod daripada teks berikutnya. Tampal URL data penuh ke dalam src HTML atau url() CSS. Base64 mentah (segala-galanya selepas koma) adalah yang anda perlukan apabila sistem sudah mengetahui jenis fail secara berasingan — contohnya medan JSON seperti { "format": "png", "data": "<base64 mentah>" }.
Bila saya patut benamkan imej sebagai Base64 dan bukan pautkan kepada fail?
Pembenaman Base64 berguna untuk imej kecil yang kerap digunakan semula (ikon, logo, grafik UI kecil) di mana penjimatan satu permintaan HTTP mengatasi penalti saiz ~33%, atau dalam konteks di mana fail berasingan tidak praktikal, seperti e-mel sebaris atau eksport HTML fail tunggal. Untuk foto besar atau apa-apa yang digunakan semula merentasi banyak halaman, fail berpaut biasa dengan cache pelayar hampir selalu lebih baik.
Adakah menukar kepada Base64 mengubah atau memampatkan imej saya?
Tidak. Base64 adalah pengekodan teks lossless bagi bait asal yang tepat — ia tidak menyentuh piksel, resolusi atau mampatan. Jika anda mahu fail lebih kecil, mampatkan imej dahulu dengan pemampat imej, kemudian tukar hasil yang termampat itu kepada Base64.
Adakah imej saya dimuat naik ke mana-mana?
Tidak. Fail dibaca terus dalam pelayar anda menggunakan API FileReader dan dikodkan secara tempatan — ia tidak pernah dihantar melalui rangkaian.