Dekoder Gambar Base64 | Dekode & Pratinjau Gambar Daring

Apa itu dekoder gambar base64?

Dekoder gambar base64 adalah alat yang mengubah string teks berkode base64 kembali menjadi gambar. Base64 adalah cara menuliskan data biner, seperti byte file gambar, hanya dengan menggunakan 64 karakter teks biasa (huruf, angka, +, /, dan = untuk padding). Browser, email, dan banyak API menyimpan gambar dengan cara ini agar gambar dapat dikirim di dalam teks biasa, bukan sebagai file terpisah. Dekoder membalikkan proses tersebut: tempelkan stringnya, lalu gambar asli akan muncul.

Format URL data

Di web, gambar base64 biasanya ditulis sebagai URL data. Polanya adalah:

Contohnya:

Setiap bagian memiliki fungsi:

• data: menandainya sebagai URL data, bukan alamat web biasa.
• image/png adalah tipe MIME yang memberi tahu browser jenis file tersebut.
• ;base64 menyatakan bahwa data setelah koma dikodekan dalam base64.
• Semua yang berada setelah koma adalah gambar berkode itu sendiri.

Cara kerja dekoder

Dekode berlangsung dalam empat langkah.

1. Alat memeriksa apakah string diawali dengan data:. URL data yang menyebutkan tipe media selain gambar, seperti data:text/plain, langsung ditolak karena tidak mungkin ditampilkan sebagai gambar.
2. Alat menghapus spasi, tab, atau jeda baris karena string base64 yang panjang terkadang dibungkus menjadi beberapa baris. Payload yang menggunakan pengodean persen, bukan base64, yang juga diizinkan oleh RFC 2397, diteruskan tanpa perubahan.
3. Alat mendekode teks base64 kembali menjadi byte mentah.
4. Alat memeriksa beberapa byte pertama hasilnya. Setiap format gambar yang umum dimulai dengan urutan byte tetap yang disebut tanda tangan atau “angka ajaib”. File PNG dimulai dengan 89 50 4E 47, file JPEG dimulai dengan FF D8 FF, dan seterusnya. Dekoder mencocokkan tanda tangan ini lalu memberi label pada gambar berdasarkan tipe yang diidentifikasinya.

Byte lebih diutamakan daripada label. Jika URL data menyatakan data:image/png tetapi byte-nya diawali FF D8 FF, dekoder membangun ulang URL menjadi data:image/jpeg, sehingga string yang ditawarkan oleh tombol “Salin URL Gambar” tidak pernah salah menggambarkan isinya sendiri.

Jika string tidak memiliki awalan data:, dekoder memperlakukannya sebagai data base64 mentah, mendekodekannya, lalu membaca tanda tangannya dengan cara yang sama. Jika byte-nya tidak cocok dengan tanda tangan gambar yang dikenal dan juga tidak tampak seperti teks SVG, dekoder melaporkan bahwa string tersebut tampaknya bukan gambar. Dekoder tidak menebak format atau menggunakan tipe bawaan apa pun.

SVG ditangani secara berbeda karena SVG adalah format teks (XML), bukan biner, sehingga tidak memiliki tanda tangan byte tetap. Dekoder memeriksa 1024 byte pertama teks hasil dekode untuk mencari tag <svg, deklarasi XML seperti <?xml version="1.0"?> yang diikuti tag tersebut, atau deklarasi tipe dokumen SVG yang diikuti tag tersebut. Tanda urutan byte di bagian paling awal, yang ditambahkan oleh sebagian editor ke file UTF-8, diabaikan. Karena SVG tidak dapat diidentifikasi dari tanda tangan byte, URL data yang menyatakan image/svg+xml mempertahankan tipe yang dinyatakannya.

Rumus ukuran gambar base64

Base64 mengubah setiap 3 byte data biner menjadi 4 karakter teks. Rumus untuk panjang hasil pengodean adalah:

Simbol ⌈ ⌉ berarti “dibulatkan ke atas ke bilangan bulat berikutnya”, karena base64 selalu bekerja dalam kelompok 4 karakter dan mengisi kelompok yang tersisa dengan tanda =.

Untuk file besar, hasilnya kira-kira berupa peningkatan ukuran sebesar 33%, karena 4 ÷ 3 ≈ 1,33. File kecil dapat menunjukkan peningkatan persentase yang lebih besar karena pembulatan ke atas ke kelompok 4 karakter berikutnya lebih berpengaruh ketika data awalnya sedikit.

Contoh perhitungan

Contoh PNG di atas didekode menjadi 85 byte data gambar. Dengan menggunakan rumus:

Panjang string base64 tersebut memang 116 karakter, sesuai dengan hasil perhitungan. Itu merupakan peningkatan sebesar 36% dibandingkan 85 byte asli (116 ÷ 85 ≈ 1,36), sedikit di atas angka 33% karena file tersebut sangat kecil.

Format gambar yang didukung

Dekoder membaca tanda tangan byte data hasil dekode untuk mengidentifikasi formatnya. Dekoder mengenali tipe-tipe berikut:

Cara mendekode gambar base64

1. Salin string base64, dengan atau tanpa awalan data:image/..., dari HTML, CSS, respons API, atau email.
2. Tempelkan string tersebut ke kotak input.
3. Gambar didekode secara otomatis sesaat setelah pengetikan berhenti, atau dengan menekan tombol dekode.
4. Gambar hasil dekode muncul di area pratinjau. URL datanya dapat disalin dengan tombol “Salin URL Gambar”, dan gambar itu sendiri dapat disimpan dengan mengeklik kanan gambar di pratinjau lalu memilih opsi simpan gambar, karena gambar tersebut dirender sebagai elemen gambar biasa di browser.

Penggunaan umum gambar base64

• Penyematan dalam HTML, CSS, atau JavaScript: menempatkan data gambar langsung di dalam kode menghindari permintaan file terpisah.
• Templat email: sebagian klien email secara bawaan memblokir gambar yang ditautkan dari luar, tetapi gambar base64 yang disematkan tetap dapat ditampilkan.
• Alat HTML satu file: seluruh halaman, termasuk gambarnya, dapat dikirim sebagai satu file mandiri.
• Respons API: gambar dapat dikirim di dalam payload JSON tanpa memerlukan endpoint tersendiri.
• Latar belakang dan ikon CSS: ikon kecil terkadang ditulis langsung ke dalam stylesheet sebagai URL data.

Kelebihan dan kekurangan gambar base64

Pengodean base64 memang praktis, tetapi memiliki konsekuensi:

• Teks hasil pengodean kira-kira sepertiga lebih besar daripada file asli.
• Browser tidak dapat menyimpan gambar yang disematkan dalam cache seperti file yang ditautkan, sehingga gambar tersebut diunduh lagi setiap kali halaman atau stylesheet yang memuatnya dimuat.
• Browser harus mendekode teks base64 sebelum dapat menampilkan gambar, sehingga memerlukan sedikit pemrosesan tambahan.
• Karena ukuran bertambah dan manfaat caching hilang, penyematan base64 cocok untuk gambar kecil seperti ikon dan logo sederhana. Foto yang lebih besar biasanya lebih baik disajikan sebagai file gambar biasa.

Pertanyaan yang sering diajukan

Apa itu dekoder gambar base64?

Alat ini mengubah string teks berkode base64 kembali menjadi gambar yang dapat dilihat, seperti file PNG, JPEG, GIF, WebP, BMP, atau SVG.

Bagaimana cara mendekode gambar base64?

Tempelkan string base64, dengan atau tanpa awalan data:image/..., ke dalam dekoder. Dekoder akan membaca dan mendekode string tersebut, lalu menampilkan gambar yang dihasilkan.

Apakah string base64 dapat didekode tanpa awalan URL data?

Ya. Dekoder memperlakukannya sebagai data base64 mentah, mendekode byte-nya, lalu membaca beberapa byte pertama untuk mengidentifikasi format dari tanda tangannya, seperti PNG, JPEG, GIF, WebP, BMP, atau ICO. SVG diidentifikasi dengan mencari tag <svg dalam teks hasil dekode. Jika tidak ada yang cocok, dekoder melaporkan bahwa string tersebut tampaknya bukan gambar, alih-alih menebak format.

Mengapa gambar base64 saya tidak dapat didekode?

Tiga penyebab mencakup sebagian besar kasus. String tersebut mungkin berisi karakter di luar alfabet base64 standar, yaitu A–Z, a–z, 0–9, +, /, dan =; varian base64url yang digunakan dalam sebagian token web menulis - dan _ sebagai gantinya, dan tidak diterima. String tersebut mungkin terpotong di tengah, sehingga panjangnya menjadi satu lebih besar daripada kelipatan empat, kondisi yang tidak pernah dimiliki string base64 yang valid. Atau byte-nya mungkin memang bukan salah satu format gambar yang didukung. Padding = yang hilang saja bukan masalah, dan spasi atau jeda baris dihapus sebelum dekode.

Apakah pengodean base64 merupakan bentuk keamanan atau enkripsi?

Tidak. Base64 hanya merupakan cara merepresentasikan byte sebagai teks; ini tidak menyembunyikan apa pun. Siapa pun dapat mendekode string Base64 tersebut dalam hitungan detik dengan alat gratis, sehingga cara ini tidak boleh digunakan untuk melindungi gambar pribadi atau data lainnya.

Seberapa besar string base64 dibandingkan gambar asli?

Untuk file besar, ukurannya sekitar sepertiga lebih besar karena setiap 3 byte data asli menjadi 4 karakter teks. Gambar berukuran 100 KB menjadi sekitar 133 KB setelah dikodekan. Gambar kecil dapat menunjukkan peningkatan persentase yang sedikit lebih tinggi karena pembulatan.

Sejarah

Base64 berkembang dari skema pengodean yang dibuat pada 1970-an dan 1980-an untuk mengirim data biner melalui sistem email yang hanya menangani teks biasa. Skema ini diformalkan untuk email dalam RFC 989 (1987), kemudian dalam RFC 1421. Penggunaannya untuk menyematkan gambar di halaman web menjadi mungkin setelah skema URL data: didefinisikan dalam RFC 2397 (1998), dan menjadi lebih umum pada pertengahan 2000-an ketika pengembang mencari cara mengurangi permintaan HTTP terpisah, terutama pada koneksi seluler yang lambat.

Referensi

1. RFC 4648: Pengodean Data Base16, Base32, dan Base64
2. RFC 2397: Skema URL “data”
3. Dokumentasi Web MDN: URL data
4. Standar WHATWG untuk Pengintaian MIME