Enkode
Data URI / Gambar Base64
Encode gambar menjadi Data URI (data:image/…;base64,…) untuk disisipkan ke CSS/HTML, dan decode Data URI atau Base64 mentah kembali menjadi file — semuanya langsung di browser.
Pratinjau gambar akan muncul di sini.
A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.
How to use it
- Encode: upload an image and the tool generates a ready data:image/…;base64,… string to paste into src, href, or CSS.
- Decode: paste a Data URI or raw Base64 to get the original file back for download.
- The copied string can be pasted straight into an HTML attribute or a CSS property with no extra processing.
Common uses
- Embedding small icons or sprites in CSS to avoid an extra HTTP request.
- Building email templates, where external images can get blocked by the email client.
- Quickly previewing an image as a self-contained string without uploading the file anywhere.
Things to keep in mind
Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.
A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.
Artikel tentang alat ini: Data URI: kapan menyematkan gambar langsung ke dalam kode
Pertanyaan yang sering diajukan
Kapan sebaiknya memakai Data URI untuk gambar?
Data URI berguna untuk gambar kecil (misalnya ikon) yang ingin disisipkan langsung ke CSS atau HTML tanpa file terpisah, sehingga mengurangi jumlah request HTTP. Untuk gambar besar sebaiknya tetap pakai file gambar biasa.
Apa kelemahan memakai Data URI dibanding file gambar biasa?
Data URI membuat ukuran HTML/CSS membengkak sekitar 33% dibanding file aslinya karena encoding Base64, tidak di-cache terpisah oleh browser seperti file gambar biasa, dan punya batas ukuran praktis di beberapa browser serta klien email.
Apakah gambar yang saya unggah dikirim ke server?
Tidak. Proses encode ke Data URI dan decode kembali ke file berjalan sepenuhnya di browser Anda, gambar tidak pernah diunggah ke server.
Bisakah Data URI dipakai untuk SVG tanpa Base64?
Bisa. SVG adalah teks (XML), sehingga alih-alih Base64, cukup percent-encoding karakter khususnya: data:image/svg+xml,%3Csvg...%3E. Cara ini lebih ringkas dan tetap dapat diedit langsung di berkas CSS.
Bisakah Data URI disisipkan ke atribut href atau background-image?
Bisa, Data URI berfungsi di mana pun referensi ke sumber daya diharapkan — di src, href, background-image dalam CSS, bahkan di @import. Sintaks dan batasan ukurannya sama seperti pada tag img.