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. Pengkodean dilakukan secara lokal — tidak ada yang diunggah.
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.
Kapan harus menghindari gambar Base64
• Untuk foto berukuran besar — Base64 tumbuh ~33% dan membengkakkan cache HTML.
• Saat cache CDN dan srcset responsif diaktifkan tersedia.
• Ketika banyak klien email memblokir URI data — gunakan gambar yang dihosting.
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.
Kekhasan klien email
Desktop Outlook secara historis memiliki dukungan URI data yang terbatas. Uji Gmail, Apple Mail, dan Outlook sebelum mengandalkan gambar sebaris dalam kampanye.
Keamanan
Jangan menempelkan Base64 yang tidak tepercaya ke halaman tanpa memahami konten — ini masih merupakan konteks yang dapat dieksekusi dalam HTML. Enkode hanya aset Anda sendiri.
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.
SVG ke Base64?
Mungkin untuk teks SVG kecil; format raster lebih umum untuk URI data.