Ubah gambar ke Base64
Ubah gambar jadi teks Base64 yang bisa kamu tempel ke kode.
Teks Base64 sekitar 37% lebih besar dari file aslinya. Cocok untuk ikon kecil, bukan foto utuh.
Jalan di browser kamu. File kamu tidak pernah keluar dari perangkat.
- URL data, CSS, dan HTML
- Jalan untuk semua jenis gambar
- Tidak ada yang diupload
Cara ubah gambar ke Base64
- Taruh gambar di sini, atau ketuk Pilih file.
- Salin URL data, Base64 mentah, atau potongan kode CSS atau HTML siap pakai.
- Tempel ke kode kamu.
Cara kerja encoding
Base64 mengubah tiap 3 byte gambar jadi 4 karakter teks, memakai 64 karakter A sampai Z, a sampai z, 0 sampai 9, plus tanda tambah dan garis miring, alfabet standar dari RFC 4648.
Data URL adalah teks itu dengan awalan pendek, seperti data:image/png;base64, supaya browser atau aplikasi tahu itu apa tanpa perlu file terpisah.
| File asli | Teks Base64 (sekitar 37% lebih besar) |
|---|---|
| Ikon 5 KB | Sekitar 6,9 KB |
| Logo 20 KB | Sekitar 27 KB |
| Foto 100 KB | Sekitar 137 KB |
Itulah kenapa data URL paling cocok untuk grafik kecil, bukan foto utuh.
Di mana data URL dipakai
- CSS, di dalam background-image, supaya ikon kecil ikut termuat bersama stylesheet tanpa request terpisah.
- HTML, di dalam atribut img src atau markup SVG inline.
- Response API JSON dan kolom database yang menyimpan gambar sebagai teks.
- HTML email, karena beberapa email client memblokir gambar yang ditautkan tapi mengizinkan data inline.
Kapan sebaiknya tetap pakai file biasa
Data URL tidak di-cache terpisah dari halaman yang memuatnya, jadi foto yang dipakai di sepuluh halaman akan didownload sepuluh kali, bukan sekali saja. Untuk apa pun yang lebih besar dari ikon kecil, file gambar biasa dengan caching browser akan lebih cepat dimuat.
FAQ Gambar ke Base64
Apa itu Base64 data URL?
Ini adalah byte gambar yang ditulis sebagai teks, jadi kamu bisa tempel gambar langsung ke HTML, CSS, atau JSON tanpa file terpisah.
Apakah Base64 membuat file jadi lebih besar?
Ya, sekitar 37 persen, karena encoding mengubah tiap 3 byte gambar jadi 4 karakter teks.
Kapan sebaiknya pakai data URL, bukan file biasa?
Untuk ikon kecil dan grafik sederhana, di mana menghemat satu request jaringan lebih penting daripada ukuran halaman. Untuk foto, tetap pakai file gambar biasa.
Apakah gambar saya diupload ke suatu tempat?
Tidak. Proses encoding berjalan di browser kamu, jadi gambar tidak pernah meninggalkan perangkatmu.
Apakah convert ke Base64 mengubah kualitas gambar?
Tidak. Data piksel tidak disentuh, hanya ditulis ulang sebagai teks, jadi saat didecode kamu mendapat byte asli yang persis sama.
Apakah ada ukuran maksimal untuk data URL?
Browser tidak menetapkan batas pasti, tapi data URL yang panjang tidak bisa di-cache sendiri dan memperlambat parsing, jadi pakai untuk ikon dan grafik kecil saja.
Apakah semua browser mendukung data URL?
Ya. Data URL sudah berfungsi di semua browser utama sejak Internet Explorer 8, termasuk semua browser mobile yang dipakai sekarang.
Bisakah ini dipakai untuk favicon?
Favicon kecil bisa disisipkan sebagai data URL di head HTML, meski file favicon.ico biasa ditambah ukuran PNG masih jadi cara yang lebih umum.