Gambar ke Base64
Base64 mengkodekan byte gambar biner sebagai teks ASCII yang dapat Anda tempelkan ke dalam HTML img src, CSS url(), atau payload JSON. Berguna untuk ikon kecil, URI data dalam prototipe, dan API yang mengharapkan gambar sebaris.
Cara mengkodekan gambar ke Base64
1. Unggah file gambar (usahakan tetap kecil — di bawah ~100 KB praktis).
2. Salin string Base64 yang dihasilkan atau URL data lengkap.
3. Tempelkan ke HTML, CSS, atau URL lengkap Anda. config.
4. Uji di lingkungan target — beberapa klien email membatasi URI data.
Contoh pengkodean
Logo sebaris dalam email HTML
Logo PNG 2 KB sebagai data:image/png;base64,... menghindari pemblokiran gambar eksternal di kotak masuk perusahaan yang ketat.
CSS latar belakang untuk prototipe
Tempelkan tekstur Base64 ke dalam demo file tunggal tanpa hosting aset.
Perlengkapan pengujian API
Sertakan JPEG Base64 kecil dalam badan permintaan JSON untuk pengujian titik akhir pengunggahan gambar.
Ketika gambar Base64 membantu
• Untuk aset yang sangat kecil dengan satu permintaan HTTP memerlukan biaya lebih dari ukuran sebaris overhead.
• Untuk prototipe HTML file tunggal offline.
• Ketika hosting eksternal tidak tersedia di lingkungan terkunci.
Base64 dalam anggaran kinerja
Inlining menghilangkan perjalanan bolak-balik tetapi mencegah cache browser dari gambar secara terpisah. Gunakan untuk ikon kecil yang penting di paro atas dengan hemat; biasanya lambat memuat media besar.
Pertanyaan yang sering diajukan
Mengapa Base64 lebih besar dari file?
Pengkodean menggunakan 4 karakter untuk setiap 3 byte — kira-kira 33% overhead ditambah awalan URL data.
Apa yang dimaksud dengan URL data?
Format: data:image/png;base64,iVBORw0KG... — Tipe MIME plus payload yang disandikan.
Ukuran maksimum untuk email?
Jaga total pertumbuhan pesan di bawah 10–20 KB; banyak klien tersedak gambar sebaris yang besar.
Dekode kembali ke file?
Gunakan alat encoder/decoder Base64 untuk membalikkan ASCII ke biner jika diperlukan.
Apakah gambar diunggah?
Tidak — FileReader membaca secara lokal di peramban.