Apa itu Base64?
Base64 adalah sistem pengodean yang mengubah data biner — misalnya byte-byte penyusun sebuah gambar — menjadi rangkaian karakter teks biasa. Namanya berasal dari jumlah karakter yang dipakai: 64 karakter berbeda (huruf besar, huruf kecil, angka, +, dan /) untuk mewakili data jenis apa pun.
Praktisnya, file gambar apa pun bisa diubah menjadi string teks panjang seperti ini:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4
BCVMAAAAJRQAAAAElFTkSuQmCCFormat ini disebut Data URI (atau data URL). Alih-alih menunjuk ke file eksternal, URL-nya membawa isi gambar itu sendiri dalam bentuk teks. Browser membaca string tersebut dan langsung menampilkan gambarnya, tanpa permintaan HTTP tambahan.
Bagaimana struktur sebuah Data URI
Semua Data URI gambar mengikuti pola yang sama:
data:[tipe MIME];base64,[data terkode]Komponennya:
- data: — awalan tetap yang menandai skemanya
- [tipe MIME] — format gambarnya, misalnya
image/png,image/jpeg,image/svg+xml, atauimage/gif - ;base64, — menandakan isinya dikodekan dengan Base64
- [data terkode] — string panjang berisi data biner gambar yang sudah diubah jadi teks
Perlu dicatat bahwa pengodean Base64 memperbesar ukuran data sekitar 33%. Gambar 3 KB berubah menjadi string sekitar 4 KB. Biaya ini muncul karena sistemnya butuh lebih banyak karakter untuk mewakili byte yang sama.
Cara memakai Base64 di HTML
Untuk menampilkan gambar Base64 langsung di HTML, cukup tempatkan Data URI pada atribut src dari tag <img>:
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Ikon">Browser memperlakukan elemen ini persis seperti gambar biasa. Anda bisa menerapkan CSS, mengatur lebar dan tinggi, serta memakainya di konteks mana pun yang menerima <img>.
Cara memakai Base64 di CSS
Di CSS, Data URI paling sering dipakai pada properti gambar latar:
.ikon {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucy...");
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
}Teknik ini paling sering dipakai untuk ikon SVG berukuran kecil yang warnanya perlu diatur secara dinamis lewat CSS, atau untuk gambar latar yang menjadi bagian komponen pustaka yang dipakai berulang.
💡 Tips untuk SVG: file SVG bisa disematkan sebagai Base64 atau sebagai SVG inline langsung di HTML — tanpa pengodean. SVG inline umumnya lebih mudah dibaca dan diolah dengan CSS maupun JavaScript, sedangkan Base64 lebih cocok ketika SVG-nya berada di file CSS eksternal.
Kapan memakai Base64 — dan kapan menghindarinya
Memilih Base64 atau file eksternal terutama bergantung pada ukuran gambar dan konteks pemakaiannya. Tabel berikut merangkum skenario yang paling sering muncul:
| Situasi | Anjuran | Alasan |
|---|---|---|
| Ikon dan sprite kecil (< 2 KB) | ✅ Base64 cocok | Menghapus satu permintaan HTTP tanpa menambah bobot yang terasa |
| Favicon yang disematkan di CSS | ✅ Base64 cocok | Praktis dan tidak bergantung pada file eksternal |
| Placeholder dan skeleton saat memuat | ✅ Base64 cocok | Tampil seketika bersama HTML, tanpa kedipan konten |
| Email HTML | ✅ Base64 cocok | Banyak klien email memblokir gambar dari luar |
| Gambar konten (foto, banner) | ❌ Hindari | Menambah bobot HTML dan menghalangi cache browser |
| Gambar di atas 5 KB | ❌ Hindari | Tambahan ukuran (+33%) mengganggu kecepatan muat |
| Gambar yang dipakai ulang di banyak halaman | ❌ Hindari | File eksternal masuk cache; Base64 diunduh ulang di tiap halaman |
Kelebihan Base64 untuk gambar
Dipakai pada konteks yang tepat, Base64 memberi manfaat nyata:
- Nol permintaan HTTP tambahan — gambarnya menyatu di HTML atau CSS, sehingga latensi pemuatan berkurang untuk gambar penting di layar pertama.
- Jalan tanpa koneksi dan di email — karena tidak bergantung pada server luar, gambarnya tetap tampil walau tanpa internet (pada aplikasi offline) atau di klien email yang memblokir konten eksternal.
- Mudah dipindah-pindahkan — satu file HTML berisi gambar Base64 bisa dikirim atau diarsipkan tanpa kehilangan satu pun elemen visualnya.
- Muncul serentak — gambarnya tampil persis saat elemen HTML dirender, tanpa jeda tambahan, sehingga ikon antarmuka tidak berkedip saat halaman tersusun.
Kekurangan dan batasannya
Base64 juga punya ongkos yang perlu ditimbang baik-baik:
- Ukuran 33% lebih besar — pengubahan ke teks selalu menambah volume data yang dikirim. Pada gambar besar, ini berarti kilobyte ekstra tanpa manfaat apa pun.
- Tidak ikut cache browser — gambar dalam file eksternal disimpan di cache browser dan dipakai ulang antarhalaman. Base64 yang menyatu di HTML diunduh lagi setiap kunjungan karena terikat pada dokumennya.
- Menyulitkan pemeliharaan — mengganti satu gambar berarti mengonversi ulang filenya dan menempelkan string panjang baru ke HTML atau CSS, pekerjaan yang merepotkan dan rawan keliru.
- Kode jadi sulit dibaca — string Base64 yang panjang di dalam CSS atau HTML membuat filenya berat dibaca dan ditinjau.
- Tidak efisien dimampatkan gzip — gzip dan Brotli bagus menekan teks yang berulang, sedangkan string Base64 berentropi tinggi dan nyaris tidak terbantu kompresi, berbeda dengan file gambar biner.
⚠️ Aturan praktis: pakai Base64 hanya untuk gambar di bawah 2 KB. Selebihnya, file eksternal yang sudah dioptimalkan — terutama dalam format WebP atau AVIF — jauh lebih efisien bagi performa situs.
Base64 dan performa situs (PageSpeed)
Dampak Base64 pada performa bergantung langsung pada apa yang dikodekan. Untuk ikon kecil, hilangnya satu permintaan HTTP bisa memperbaiki Time to First Byte yang dirasakan pengguna dan mengurangi jumlah koneksi paralel yang dibutuhkan. Hal ini bisa berdampak baik pada metrik Core Web Vitals, terutama LCP (Largest Contentful Paint), ketika elemen utama halaman berupa ikon yang disematkan.
Sebaliknya, menyematkan gambar besar dalam Base64 langsung menambah bobot dokumen HTML dan menunda awal perenderan. Google PageSpeed Insights cenderung menghukum halaman dengan HTML yang terlalu berat. Untuk foto dan banner, jalan yang benar selalu file eksternal yang sudah dioptimalkan.
Kalau Anda perlu mengoptimalkan gambar untuk web, langkah pertamanya adalah mengompres dan mengubahnya ke format yang paling efisien. Alat Kompres dari ImageTools mengerjakannya langsung di browser, tanpa mengirim file Anda ke server mana pun.
Cara mengubah gambar ke Base64
Ada beberapa cara menghasilkan string Base64 dari sebuah gambar:
- Alat online — cara tercepat untuk kebutuhan sesekali. ImageTools menyediakan alat Gambar ke Base64, yang mengonversi gambar apa pun di browser dan menyerahkan kodenya siap disalin.
- Terminal (Linux/macOS) — perintah
base64 image.pngmenghasilkan string terkodenya. Untuk membuat Data URI yang utuh:echo "data:image/png;base64,$(base64 -w 0 image.png)". - JavaScript di browser — lewat API
FileReader, file apa pun yang dipilih pengguna bisa diubah ke Base64 secara asinkron. - Webpack dan bundler lain — Webpack, Vite, dan Rollup punya plugin yang otomatis mengubah file kecil menjadi Base64 inline saat build, mengikuti batas ukuran yang bisa diatur.
Ubah gambar ke Base64 sekarang
Unggah gambar Anda dan dapatkan Data URI utuh yang siap dipakai di HTML atau CSS. Seluruh prosesnya berjalan di browser.
Buka alat Base64 →Pertanyaan yang sering diajukan
Apa itu Base64 pada gambar?
Base64 adalah cara mengodekan data biner (seperti gambar) menjadi teks ASCII. Alih-alih memuat file gambarnya secara terpisah, isinya diubah menjadi string karakter panjang yang bisa disematkan langsung di HTML atau CSS, membentuk sebuah Data URI.
Apakah mengubah gambar ke Base64 memperburuk performa situs?
Tergantung pemakaiannya. Untuk gambar kecil (ikon, favicon, placeholder), Base64 justru bisa mempercepat karena menghapus satu permintaan HTTP. Untuk gambar besar, ia menambah bobot halaman dan menghalangi cache browser, sehingga performanya menurun.
Berapa ukuran maksimum yang dianjurkan untuk memakai Base64?
Aturan praktisnya, pakai Base64 hanya untuk gambar di bawah 2 KB. Di atas itu, tambahan ukuran akibat pengodean (sekitar 33% lebih besar) dan hilangnya cache membuat file eksternal jadi pilihan yang lebih efisien.
Apakah Base64 jalan di semua browser?
Ya. Format Data URI dengan Base64 didukung semua browser modern, termasuk Chrome, Firefox, Safari, Edge, dan padanan mobile-nya. Browser sangat tua seperti IE6 memang tidak mendukungnya, tetapi itu bukan lagi persoalan nyata sekarang.
Bagaimana cara mengubah gambar ke Base64 secara online?
Anda bisa memakai alat Gambar ke Base64 dari ImageTools. Cukup unggah gambarnya, dan alat itu otomatis menghasilkan string Base64 beserta kode Data URI yang siap dipakai di HTML atau CSS.