Ikuti contoh kerja ini, lalu sesuaikan kontrol yang sama dengan gambar Anda sendiri. Buka Konverter Gambar ke Base64.
Pilih gambar dan pratinjau identitasnya
Buka Konverter Gambar ke Base64. Pilih gambar atau Coba sampel. Contoh ini menggunakan favicon-orbit.png piksel 512 × 512, yang berisi 202,491 byte. Editor menampilkan gambar di atas kodenya sehingga Anda dapat mengonfirmasi bahwa Anda telah memilih aset yang dimaksud.
PNG, JPG, WebP, GIF, BMP, dan AVIF didukung jika peramban Anda dapat mendekodenya untuk pratinjau. Ukuran file maksimum adalah 25 MB, dengan batas 60 megapiksel dan 16,000 piksel per sisi. Markup SVG tidak diterima oleh konverter raster ini.
Alat ini membaca byte file asli. Alat ini tidak menggunakan pratinjau untuk membangun kembali gambar, mengubah ukurannya, atau mengompresnya kembali. Oleh karena itu, metadata yang ada dan animasi GIF dipertahankan dalam data yang disandikan.
Sebelum menyandikan, gunakan Ubah Ukuran Gambar atau Kompresor Gambar jika Anda memerlukan aset yang lebih kecil. Base64 sendiri tidak mengurangi ukuran gambar.
Pilih representasi yang diharapkan proyek Anda
Buka Pengaturan dan pilih gambar HTML di bawah format Kode untuk contoh ini. Hasilnya adalah tag img yang berisi URL data Base64. Atribut alt awalnya kosong; tulis teks alternatif yang berguna saat gambar mengomunikasikan informasi.
URL data dimulai dengan awalan seperti data:image/png;base64, diikuti oleh data yang disandikan. Base64 Polos hanya berisi data. Latar belakang CSS membungkus URL data dalam deklarasi background-image. Representasi ini melayani tujuan yang berbeda, jadi salin formulir yang diminta oleh aplikasi Anda alih-alih hanya mengubah nama file.
Panel kode diperbarui segera setelah Anda mengubah format Kode. Ikon salin menyalin representasi saat ini dan memberikan konfirmasi salinan yang dibagikan. Saat akses papan klip diblokir, kode dipilih untuk penyalinan manual.
Tag HTML img lengkap tidak sama dengan URL data. Gunakan hanya nilai src saat kolom meminta URL.
Contoh dalam panduan ini
Coba sampel: favicon-orbit.png, 512 × 512 px, 202,491 byte. Pilih gambar HTML di bawah format Kode. Pilih Mulai dan unduh favicon-orbit-base64.txt.
- PNG asli
- 512 × 512 px · 202,491 byte
- Output teks HTML
- 270,029 byte
- Pengodean
- Byte asli; tanpa kompresi ulang
Unduh kode dan pahami ukurannya
Pilih Mulai, lalu Unduh. Contoh ini menyimpan favicon-orbit-base64.txt yang berisi kode gambar HTML. Ukuran 270,029 byte-nya lebih besar daripada sumber 202,491 byte. Perbandingan artikel menunjukkan awal teks yang diunduh, yang dipersingkat hanya agar mudah dibaca.
Base64 biasanya mengubah tiga byte sumber menjadi empat karakter teks, menambahkan sekitar sepertiga sebelum pembungkus kecil. Menyematkan ikon kecil dapat membuat dokumen mandiri, tetapi menempatkan string gambar besar di dalam HTML atau CSS juga memperbesar dokumen tersebut dan mencegah gambar di-cache sebagai file terpisah.
Pengodean bukanlah enkripsi. Siapa pun yang memiliki string Base64 lengkap dapat memulihkan gambar yang mendasarinya. Perlakukan kode dengan kehati-hatian yang sama seperti sumbernya jika berisi informasi pribadi.
Kutipan yang dipotong dalam artikel ini bersifat penjelasan. Gunakan TXT yang diunduh secara lengkap atau salin kode lengkap dari alat tersebut.
Pertanyaan umum
Apakah pengodean akan mengurangi kualitas gambar?
Tidak. Pengodean mempertahankan byte asli. Ini tidak mengubah ukuran, mengompresi, atau menggambar ulang gambar.
Mengapa string Base64 lebih besar dari gambarnya?
Base64 merepresentasikan tiga byte input menggunakan empat karakter teks, sehingga biasanya menambah sekitar sepertiga sebelum pembungkus atau awalan.
Apakah animasi GIF dipertahankan?
Pengodean mempertahankan byte GIF asli, termasuk animasi. Pratinjau mungkin menampilkan bingkai diam sementara data yang dikodekan mempertahankan semua bingkai.
Apakah Base64 aman untuk gambar rahasia?
Base64 bukan enkripsi. Jaga kerahasiaan string jika gambar dasarnya bersifat pribadi. Konverter itu sendiri memprosesnya secara lokal di peramban Anda.
Ubah gambar yang tepat menjadi kode yang tepat.
Coba sampel atau gunakan file Anda sendiri, dan tinjau hasilnya sebelum dibagikan.
