Tanpa unggah, 100% lokal, tanpa akun

Konverter Gambar → Base64

Enkodekan gambar mana pun ke data URI Base64, atau tempel data URI untuk mendekodekannya kembali ke gambar. Salin hasilnya atau ambil snippet CSS url(). Tidak ada yang meninggalkan perangkat Anda.

Cara kerja Gambar ke Base64

Image to Base64 membaca file gambar Anda dan mengodekannya sebagai data URI Base64 yang dapat Anda sematkan langsung di HTML, CSS, atau JSON tanpa memerlukan permintaan file terpisah. Konversi menggunakan FileReader API di browser Anda; tidak ada byte dari gambar Anda yang dikirim ke server. Anda juga dapat menempelkan string Base64 kembali untuk mendekode dan mempratinjau gambar, semuanya secara lokal.

Data URI Base64 sekitar 33% lebih besar dari biner aslinya karena setiap kelompok tiga byte berkembang menjadi empat karakter ASCII. Peningkatan ukuran ini adalah pertukaran yang diharapkan untuk kenyamanan menyematkan gambar ke dalam dokumen atau stylesheet. Alat ini menampilkan string Base64 mentah dan cuplikan tag img HTML yang siap digunakan serta cuplikan CSS background-image untuk salin-tempel cepat ke proyek Anda.

Ditulis oleh Bastien Sulyan

Cara menggunakan Gambar ke Base64, langkah demi langkah

  1. Jatuhkan file gambar ke area unggah atau klik untuk mencari. Format yang diterima: JPEG, PNG, WebP, GIF, SVG.
  2. Data URI Base64 muncul segera di bidang keluaran.
  3. Salin string Base64 mentah, atau gunakan tag img HTML yang sudah diformat atau cuplikan background-image CSS.
  4. Untuk mendekode, tempelkan string Base64 ke bidang input dan beralih ke mode dekode untuk mempratinjau gambar.
  5. Klik tombol salin di samping cuplikan mana pun untuk menyalinnya ke clipboard.

Kasus penggunaan umum

  • Seorang pengembang front-end menyematkan ikon kecil sebagai data URI dalam file CSS untuk menghilangkan permintaan HTTP tambahan.
  • Seorang pengembang menyematkan spinner pemuatan kecil sebagai atribut src Base64 sehingga gambar placeholder tersedia sebelum bundle JavaScript dimuat.
  • Seorang insinyur QA menyalin Base64 dari gambar pengujian untuk ditempelkan langsung ke payload JSON untuk pengujian API.
  • Pembuat template email menyematkan logo tanda tangan sebagai data URI Base64 karena beberapa klien email memblokir permintaan gambar eksternal.

Pertanyaan yang sering diajukan

Mengapa keluaran Base64 sekitar sepertiga lebih besar dari file asli saya?

Encoding Base64 merepresentasikan setiap tiga byte biner sebagai empat karakter ASCII (rasio 4/3). Gambar yang berukuran 100 KB dalam biner menjadi sekitar 133 KB sebagai string Base64. Ini melekat pada skema encoding, bukan keterbatasan alat.

Apakah konten gambar dikirimkan ke server selama encoding?

Tidak. FileReader API membaca file biner dari disk lokal Anda dan meneruskan hasilnya langsung ke fungsi encoding JavaScript di dalam tab browser Anda. Data gambar tidak meninggalkan perangkat Anda.

Bisakah saya menggunakan keluaran data URI dalam konteks HTML atau CSS mana pun?

Ya. Data URI yang dimulai dengan data:image/jpeg;base64, diikuti oleh string yang dikodekan dapat digunakan sebagai atribut src dari tag img atau sebagai nilai url() dalam properti CSS background-image. Semua browser modern mendukung data URI. Data URI yang sangat besar dapat memperlambat rendering halaman, sehingga penyematan biasanya diperuntukkan bagi gambar kecil di bawah beberapa kilobyte.

Apakah alat ini mendukung GIF animasi?

Alat ini mengodekan konten biner penuh dari file apa pun yang Anda berikan, termasuk GIF animasi. Data URI yang dihasilkan, ketika digunakan sebagai src dari tag img, akan memutar animasi di browser yang mendukung animasi GIF.

Bagaimana cara sebaliknya mendekode string Base64 kembali ke gambar?

Beralih alat ke mode dekode, tempelkan string Base64 Anda (dengan atau tanpa awalan data:), dan alat akan mendekodenya dan menawarkan gambar biner sebagai unduhan serta menampilkan pratinjau.

Alat terkait

Jaga semuanya tetap lokal, jelajahi alat pelengkap.

Semua alat gambar