Tiada muat naik, 100% setempat, tiada akaun

Penukar Imej → Base64

Enkod mana-mana imej kepada URI data Base64, atau tampal URI data untuk menyahkodnya kembali kepada imej. Salin hasil atau ambil coretan url() CSS. Tiada apa meninggalkan peranti anda.

Cara Imej ke Base64 berfungsi

Image to Base64 membaca fail imej anda dan mengekodinya sebagai URI data Base64 yang boleh anda benamkan terus dalam HTML, CSS atau JSON tanpa memerlukan permintaan fail berasingan. Penukaran menggunakan FileReader API dalam pelayar anda; tiada bait dari imej anda dihantar ke pelayan. Anda juga boleh menampal rentetan Base64 kembali untuk menyahkodnya dan pratonton imej, semuanya secara setempat.

URI data Base64 adalah kira-kira 33% lebih besar daripada binari asal kerana setiap kumpulan tiga bait dikembangkan kepada empat aksara ASCII. Peningkatan saiz ini adalah pertukaran yang dijangkakan untuk kemudahan membenamkan imej ke dalam dokumen atau helaian gaya. Alat ini menunjukkan kepada anda rentetan Base64 mentah dan potongan teg img HTML sedia guna serta potongan imej-latar CSS untuk penyalinan cepat ke projek anda.

Ditulis oleh Bastien Sulyan

Cara menggunakan Imej ke Base64, langkah demi langkah

  1. Lepaskan fail imej ke kawasan muat naik atau klik untuk melayari. Format yang diterima: JPEG, PNG, WebP, GIF, SVG.
  2. URI data Base64 muncul serta-merta dalam medan output.
  3. Salin rentetan Base64 mentah, atau gunakan potongan teg img HTML atau imej-latar CSS yang telah diformat.
  4. Untuk menyahkod, tampal rentetan Base64 ke dalam medan input dan tukar ke mod nyahkod untuk pratonton imej.
  5. Klik butang salin di sebelah mana-mana potongan untuk menyalinnya ke papan klip.

Kes penggunaan biasa

  • Pembangun bahagian hadapan membenamkan ikon kecil sebagai URI data dalam fail CSS untuk menghapuskan permintaan HTTP tambahan.
  • Pembangun membenamkan pemutar spinner kecil sebagai atribut src Base64 supaya imej pemegang tempat tersedia sebelum bundle JavaScript dimuatkan.
  • Jurutera QA menyalin Base64 imej ujian untuk ditampal terus ke dalam muatan JSON untuk ujian API.
  • Pembina templat e-mel membenamkan logo tandatangan sebagai URI data Base64 kerana sesetengah klien e-mel menyekat permintaan imej luaran.

Soalan lazim

Mengapa output Base64 kira-kira sepertiga lebih besar daripada fail asal saya?

Pengekodan Base64 mewakili setiap tiga bait binari sebagai empat aksara ASCII (nisbah 4/3). Imej yang bersaiz 100 KB dalam binari menjadi kira-kira 133 KB sebagai rentetan Base64. Ini wujud dalam skim pengekodan itu sendiri, bukan had alat.

Adakah kandungan imej dihantar ke pelayan semasa pengekodan?

Tidak. FileReader API membaca fail binari dari cakera setempat anda dan menghantar hasilnya terus ke fungsi pengekodan JavaScript di dalam tab pelayar anda. Data imej tidak meninggalkan peranti anda.

Bolehkah saya menggunakan output URI data dalam mana-mana konteks HTML atau CSS?

Ya. URI data yang bermula dengan data:image/jpeg;base64, diikuti dengan rentetan yang dikodkan boleh digunakan sebagai atribut src teg img atau sebagai nilai url() dalam sifat imej-latar CSS. Semua pelayar moden menyokong URI data. URI data yang sangat besar boleh melambatkan pemaparan halaman, jadi penembaman biasanya dihadkan kepada imej kecil di bawah beberapa kilobait.

Adakah alat ini menyokong GIF animasi?

Alat ini mengekodkan kandungan binari penuh mana-mana fail yang anda berikan, termasuk GIF animasi. URI data yang dihasilkan, apabila digunakan sebagai src teg img, akan memainkan animasi dalam pelayar yang menyokong animasi GIF.

Bagaimana saya pergi ke arah lain dan menyahkod rentetan Base64 kembali kepada imej?

Tukar alat ke mod nyahkod, tampal rentetan Base64 anda (dengan atau tanpa awalan data:), dan alat akan menyahkodnya dan menawarkan imej binari sebagai muat turun serta menunjukkan pratonton.

Alat berkaitan

Kekalkan semuanya setempat, terokai alat pelengkap.

Semua alat imej