Ubah gambar ke Base64

Ubah gambar menjadi data URI Base64 untuk CSS, HTML, atau JSON, atau tempel string Base64 dan dapatkan kembali file gambarnya.

Letakkan file di sini

.jpg, .jpeg, .png, .gif, .webp, .svg, .bmp, .avif, .ico, .txt · hingga 10 MB

Pilih file

Gambar ke Base64Base64 ke gambar

Pengaturan lainnya

HasilPindah baris setiap 76 karakter

Cara mengubah gambar ke Base64

1
Letakkan gambar atau tempel string Base64
Tambahkan hingga dua puluh gambar untuk diubah, atau ganti arah dan tempel string yang sudah Anda punya. File .txt yang berisi string itu juga bisa dipakai.
2
Pilih arah
Encode menghasilkan data URI atau payload Base64 mentah. Decode menghasilkan file gambar yang bisa diunduh, dengan ekstensi yang benar.
3
Salin string atau unduh file
Salin hasilnya langsung ke stylesheet, atau simpan gambar hasil decode. Beberapa gambar sekaligus dikembalikan sebagai ZIP berisi satu file teks per gambar, ditambah satu JSON gabungan.

Apa yang sebenarnya dilakukan Base64

Base64 tidak mengompres atau mengonversi apa pun. Base64 menulis ulang byte yang sama hanya dengan 64 karakter yang tetap utuh saat ditempel ke dalam teks. Tiga byte menjadi empat karakter, karena itu hasilnya selalu sekitar sepertiga lebih besar daripada file aslinya. Tujuannya bukan ukuran, melainkan penempatan: data URI bisa langsung berada di dalam stylesheet, atribut HTML, atau field JSON, di tempat yang sulit atau tidak mungkin diberi tautan ke file terpisah.

Data URI atau payload mentah

Data URI adalah string lengkap yang diawali data:image/png;base64, dan bentuk inilah yang diharapkan browser di latar belakang CSS atau di src elemen img. Payload mentah adalah semua yang ada setelah koma itu, dan biasanya bentuk ini yang diminta field API atau kolom database, karena jenis file dicatat terpisah di sana. Keduanya berasal dari byte yang sama, jadi Anda bisa beralih di antara keduanya tanpa encode ulang.

Jenis file dibaca dari byte

Jenis MIME yang ditulis ke data URI dibaca dari dua belas byte pertama file, bukan dari namanya, jadi PNG yang namanya diganti menjadi .jpg tetap keluar sebagai data:image/png. Ini penting karena browser menolak menampilkan data URI yang jenisnya tidak sesuai dengan isinya, dan bila itu terjadi, yang terlihat rusak adalah halamannya, bukan file itu. SVG adalah pengecualian karena berupa teks: SVG dikenali dari tag pembukanya, bukan dari penanda biner (signature).

Decode kembali menjadi file

Tempel apa saja: data URI lengkap, payload tanpa awalan, atau string yang berisi jeda baris. Semua spasi dan jeda baris dibuang, alfabetnya diperiksa sebelum decode sehingga tempelan yang terpotong langsung gagal dan tidak menghasilkan file rusak, lalu byte hasilnya dicocokkan dengan tabel penanda yang sama untuk memilih ekstensi. Jika byte tidak cocok dengan format apa pun yang dikenal, daftar format terbuka agar Anda bisa menentukan formatnya.

Tidak ada yang dikirim ke mana pun

Encode memakai FileReader bawaan browser, dan decode memakai atob bawaannya. Tidak ada pustaka, tidak ada unggahan, dan tidak ada server. Apa pun yang Anda tempel ke kotak tetap berada di tab, dan itu penting bila string tersebut berisi dokumen pribadi, bukan logo.

Pertanyaan yang sering diajukan

Untuk apa mengubah gambar ke Base64?

Untuk menyematkannya secara langsung, bukan menautkannya. Ikon kecil yang disematkan ke CSS menghemat satu permintaan HTTP, gambar di dalam payload JSON bisa dikirim lewat API yang hanya membawa teks, dan template email bisa membawa gambarnya sendiri tanpa rujukan eksternal yang bisa diblokir.

Seberapa besar ukuran file bertambah?

Sekitar 33 sampai 37%. Base64 memakai empat karakter untuk setiap tiga byte, ditambah awalan pendek untuk data URI. Foto 100 KB menjadi string sekitar 133 KB, karena itu menyematkan langsung sepadan untuk ikon, tetapi jarang sepadan untuk foto.

Apa beda data URI dan Base64 biasa?

Data URI adalah bentuk lengkapnya: data:image/png;base64, lalu payload, dan browser bisa langsung memakainya sebagai sumber gambar. Base64 biasa hanya berisi payload tanpa informasi jenis, dan bentuk inilah yang diharapkan sebagian besar API dan field database.

Apakah ada batas panjang string seperti ini di browser?

Browser modern sanggup menangani data URI berukuran beberapa megabyte di CSS dan HTML, tetapi editor, terminal, dan alat diff sudah tidak bisa dipakai jauh sebelum itu. Alat ini menerima file hingga 10 MB, yang menghasilkan string sekitar 13,3 MB, dan bisa melakukan decode string berisi hingga 14 MB.

Bagaimana mengubah string tanpa awalan data: kembali menjadi gambar?

Tempel string itu dan biarkan jenis gambar pada deteksi otomatis. Byte hasil decode diperiksa dengan tabel penanda yang sama seperti saat encode, jadi PNG dikenali dari header 89 50 4E 47, ada awalan atau tidak. Jika deteksi gagal, pilih sendiri jenisnya dari daftar.

Apakah aman menempel Base64 milik orang lain di sini?

String diubah menjadi byte lalu ditampilkan sebagai pratinjau gambar di tab Anda sendiri. String itu tidak pernah diunggah, tidak pernah dijalankan, dan tidak pernah disimpan. Decode hanyalah hitungan, tetapi ingat: byte yang Anda dapatkan hanya bisa dipercaya sejauh sumbernya bisa dipercaya, jadi sikapi hasil yang tak terduga dengan waspada, sama seperti file unduhan lainnya.

Mengapa decode kadang gagal?

Hampir selalu karena string tidak lengkap. Tempelan yang terpotong, satu baris yang hilang saat menyalin dari terminal, atau varian aman untuk URL yang memakai tanda hubung dan garis bawah sebagai pengganti plus dan garis miring, semuanya gagal dalam pemeriksaan alfabet. Biasanya masalahnya beres jika string disalin ulang dari sumber aslinya.