Ikuti contoh kerja ini, kemudian sesuaikan kawalan yang sama dengan imej anda sendiri. Buka Penukar Imej kepada Base64.
Pilih imej dan pratonton identitinya
Buka Penukar Imej ke Base64. Pilih imej atau Cuba sampel. Contoh ini menggunakan favicon-orbit.png piksel 512 × 512, yang mengandungi 202,491 bait. Editor menunjukkan imej di atas kodnya supaya anda boleh mengesahkan bahawa anda memilih aset yang dimaksudkan.
PNG, JPG, WebP, GIF, BMP dan AVIF disokong apabila pelayar anda boleh menyahkodnya untuk pratonton. Saiz fail maksimum ialah 25 MB, dengan had 60 megapiksel dan 16,000 piksel setiap sisi. Penanda SVG tidak diterima oleh penukar raster ini.
Alat ini membaca bait fail asal. Ia tidak menggunakan pratonton untuk membina semula imej, mengubah saiznya atau memampatkannya semula. Metadata sedia ada dan animasi GIF oleh itu dikekalkan dalam data yang dikodkan.
Sebelum mengekod, gunakan Ubah Saiz Imej atau Pemampat Imej jika anda memerlukan aset yang lebih kecil. Base64 sendiri tidak mengurangkan saiz imej.
Pilih perwakilan yang dijangkakan oleh projek anda
Buka Tetapan dan pilih imej HTML di bawah Format kod untuk contoh ini. Hasilnya ialah tag img yang mengandungi URL data Base64. Atribut alt pada mulanya kosong; tulis teks alternatif yang berguna apabila imej menyampaikan maklumat.
URL Data bermula dengan awalan seperti data:image/png;base64, diikuti oleh data yang dikodkan. Base64 Biasa hanya mengandungi data. Latar belakang CSS membungkus URL data dalam pengisytiharan background-image. Perwakilan ini melayani destinasi yang berbeza, jadi salin borang yang diminta oleh aplikasi anda dan bukannya menukar nama fail sahaja.
Panel kod dikemas kini serta-merta selepas anda menukar Format kod. Ikon salin menyalin perwakilan semasa dan memberikan pengesahan salinan yang dikongsi. Apabila akses papan keratan disekat, kod dipilih untuk penyalinan manual.
Tag HTML img yang lengkap tidak sama dengan URL data. Gunakan hanya nilai src apabila medan meminta URL.
Contoh dalam panduan ini
Cuba sampel: favicon-orbit.png, 512 × 512 px, 202,491 bait. Pilih imej HTML di bawah format Kod. Pilih Mula dan muat turun favicon-orbit-base64.txt.
- PNG asal
- 512 × 512 px · 202,491 bait
- Output teks HTML
- 270,029 bait
- Pengekodan
- Bait asal; tiada pemampatan semula
Muat turun kod dan fahami saiznya
Pilih Mula, kemudian Muat turun. Contoh ini menyimpan favicon-orbit-base64.txt yang mengandungi kod imej HTML. 270,029 baitnya lebih besar daripada sumber 202,491 bait. Perbandingan artikel menunjukkan permulaan sebenar teks yang dimuat turun, dipendekkan hanya untuk kebolehbacaan.
Base64 biasanya menukarkan tiga bait sumber kepada empat aksara teks, menambah kira-kira satu pertiga sebelum pembungkus kecil. Menyematkan ikon kecil boleh menjadikan dokumen lengkap sendiri, tetapi meletakkan rentetan imej yang besar di dalam HTML atau CSS juga membesarkan dokumen tersebut dan menghalang imej daripada disimpan dalam cache sebagai fail berasingan.
Pengekodan bukanlah penyulitan. Sesiapa yang mempunyai rentetan Base64 yang lengkap boleh mendapatkan semula imej asasnya. Layani kod tersebut dengan penjagaan yang sama seperti sumber jika ia mengandungi maklumat peribadi.
Petikan yang dipotong dalam artikel ini adalah untuk penjelasan. Gunakan TXT yang dimuat turun sepenuhnya atau salin kod penuh daripada alat tersebut.
Soalan lazim
Adakah pengekodan akan mengurangkan kualiti imej?
Tidak. Pengekodan mengekalkan bait asal. Ia tidak mengubah saiz, memampat atau melukis semula imej.
Mengapakah rentetan Base64 lebih besar daripada imej?
Base64 mewakili tiga bait input menggunakan empat aksara teks, jadi ia biasanya menambah kira-kira satu pertiga sebelum pembungkus atau awalan.
Adakah animasi GIF dikekalkan?
Pengekodan mengekalkan bait GIF asal, termasuk animasi. Pratonton mungkin menunjukkan bingkai pegun manakala data berkod mengekalkan semua bingkai.
Adakah Base64 selamat untuk imej rahsia?
Base64 bukan penyulitan. Pastikan rentetan itu peribadi jika imej asasnya adalah peribadi. Penukar itu sendiri memprosesnya secara setempat dalam pelayar anda.
Tukarkan imej yang betul kepada kod yang betul.
Cuba sampel atau gunakan fail anda sendiri, dan semak hasil sebelum berkongsi.
