§

Lepaskan imej atau klik untuk memilih

PNG, JPEG, GIF, WebP, SVG, BMP — sehingga 30 MB. Satu imej pada satu masa.

Imej dibaca dan dikodkan sepenuhnya pada peranti anda — ia tidak pernah meninggalkan pelayar anda.

Pasukan web di Malaysia, terutama syarikat yang beroperasi di bawah rangka kerja Kerajaan Digital MAMPU dan skim MSC Malaysia, semakin kerap menggunakan data URI untuk imej kecil bagi mengurangkan masa muat pertama laman web. Portal e-kerajaan seperti MyGovUC dan sistem CIMB, Maybank, serta Bank Islam memasukkan logo dan ikon inline dalam e-mel transaksi supaya imej kelihatan walaupun pelanggan e-mel menyekat kandungan jauh. Pembangun yang membina projek untuk MDEC, Suruhanjaya Komunikasi dan Multimedia Malaysia (SKMM), atau platform seperti Lazada MY dan Shopee MY turut menggunakan kaedah ini dalam dokumentasi API dan proses pembinaan Vite. Kerana pengekodan berlaku dalam pelayar, tiada data sensitif seperti imbasan dokumen MyKad atau tangkapan skrin sistem dalaman yang pernah mencapai pelayan luar.

// Alat Berkaitan

./base64-encoder
Pengekod Base64
Ekod teks dan fail ke format Base64.
→
./image-format-converter
Penukar Format Imej
Tukar imej PNG, JPEG, dan WebP secara setempat — tiada muat naik, sokongan kelompok.
→
./image-compressor
Pemampat Imej
Mampatkan imej JPEG, PNG, dan WebP secara setempat — kualiti atau saiz sasaran, tiada muat naik.
→
./
Semua Alat
Semak imbas set penuh alat dalam talian Ultim8Soft.
→

Cara penukaran imej-ke-Base64 berfungsi

Keseluruhan penukaran berjalan dalam pelayar anda menggunakan File API dan fungsi btoa yang terbina dalam — tiada pustaka codec yang dimuat turun dan tiada pelayan yang melihat imej. Berikut ialah saluran paip dari mula hingga akhir:

  1. Anda melepaskan atau memilih imej. Pelayar membacanya sebagai Blob dari cakera setempat anda, tidak pernah menyalin bait ke pelayan.
  2. Fail dibaca dalam ketulan 1 MB dan bait setiap ketulan ditambahkan kepada rentetan binari. Pemotongan ini menghalang imej besar daripada melimpahi tindanan panggilan JavaScript.
  3. Rentetan binari dihantar kepada btoa, yang memetakan setiap tiga bait kepada empat aksara Base64 dari abjad A–Z, a–z, 0–9, tambah /.
  4. Jenis MIME fail (image/png, image/jpeg, dan sebagainya) dibaca dari objek File dan ditambahkan sebagai awalan data:, menghasilkan data:image/…;base64,… URI yang lengkap.
  5. Halaman merangka empat output dari URI itu — data URI penuh, Base64 mentah tanpa awalan, teg sedia tampal, dan coretan CSS background-image — masing-masing dengan butang salin sendiri.

Mengapa mengekodkan imej sebagai data URI?

  • Menyisipkan logo atau ikon kecil sebagai data URI menghapuskan perjalanan pergi-balik rangkaian yang berasingan, jadi halaman atau e-mel merender bingkai pertamanya sedikit lebih cepat.
  • Halaman atau helaian gaya dengan imej tersisip adalah berdiri sendiri. Ia berfungsi luar talian dan anda boleh mengangkutnya tanpa menyeret folder aset bersamanya.
  • Banyak pelanggan mel menyekat imej jauh yang dipautkan secara lalai. Sisipkan logo sebagai Base64 dan ia muncul serta-merta apabila mesej dibuka, tanpa pengambilan jauh diperlukan.
  • Pengekodan berlaku sepenuhnya dalam pelayar anda, jadi imej sensitif tidak pernah pergi ke pelayan pihak ketiga. Ini meliputi tangkapan skrin, imbasan dokumen pengenalan diri, dan rajah dalaman.

Penggunaan biasa untuk imej Base64

Data URI muncul di mana-mana imej cukup kecil sehingga permintaan berasingan memerlukan kos lebih daripada inflasi saiz ~33% yang ditambah Base64. Tiga corak muncul berterusan:

  • Ikon CSS tersisip: sprite atau ikon 1–2 KB yang dimasukkan ke dalam helaian gaya sebagai background-image: url(data:…) supaya peraturan adalah berdiri sendiri sepenuhnya.
  • Tandatangan e-mel dan surat berita: logo yang dibenamkan sebagai dengan src data URI dirender walaupun pelanggan menyekat imej jauh.
  • Penyisipan alat bina: bundler seperti Webpack dan Vite menyisipkan aset secara automatik di bawah ambang bait, dan alat ini membolehkan anda melihat pratonton tepat apa yang output itu kelihatan.

Bagaimana rupa imej Base64?

Ambil PNG telus 1×1 yang kecil. Bait mentahnya hanya 67 bait, tetapi apabila dikodkan ia menjadi rentetan iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=, dan data URI penuh ialah data:image/png;base64,iVBORw0KGgo…. Perhatikan bentuk yang dikodkan adalah lebih kurang satu pertiga lebih besar daripada asalnya. Itulah pertukaran untuk menjadikan data binari selamat untuk dibenamkan terus dalam teks.

Adakah imej saya dimuat naik ke mana-mana?

Tidak. Penukaran menggunakan File API pelayar dan fungsi btoa asli untuk mengekodkan imej sepenuhnya pada peranti anda. Anda boleh mengesahkannya sendiri: buka alat pembangun pelayar anda, tukar ke panel Rangkaian, dan tukar imej — satu-satunya permintaan yang anda akan lihat ialah muat halaman dan sebarang iklan. Tiada yang berbentuk imej dihantar ke pelayan, yang menjadikannya selamat untuk tangkapan skrin, dokumen pengenalan diri, dan rajah dalaman.

Mengapa output Base64 lebih besar daripada imej asal saya?

Base64 mewakili setiap tiga bait data binari dengan empat aksara ASCII, jadi teks yang dikodkan adalah kira-kira 33% lebih besar daripada fail sumber. Pembacaan saiz data URI pada halaman ini menunjukkan panjang yang tepat yang telah dibesarkan. Overhead itulah sebabnya data URI masuk akal hanya untuk imej kecil — menyisipkan foto 2 MB akan mengembungkan HTML atau CSS anda jauh lebih banyak daripada permintaan berasingan. Sebagai panduan umum, sisipkan imej di bawah kira-kira 4 KB dan pautkan ke apa sahaja yang lebih besar.

Format imej mana yang boleh saya tukar?

Mana-mana format yang pelayar anda kenali sebagai imej berfungsi, kerana alat ini membaca bait mentah dan bukannya menyahkod gambar. Ini meliputi PNG, JPEG, GIF, WebP, SVG, dan BMP. Jenis MIME dibaca terus dari fail, jadi awalan data: sentiasa sepadan dengan format sebenar — JPEG menghasilkan data:image/jpeg dan SVG menghasilkan data:image/svg+xml. SVG patut mendapat catatan khas: ia sudah teks, jadi untuk SVG data URI berpencil-URL selalunya lebih kecil daripada versi Base64, walaupun alat ini mengeluarkan bentuk Base64 untuk konsistensi.

Lepaskan imej, salin data URI atau coretan yang anda perlukan, dan tampalkan ke dalam templat HTML, CSS, atau e-mel anda. Setiap bait kekal pada peranti anda. Tiada muat naik, tiada akaun, tiada perjalanan pergi-balik pelayan.