UltKit

Ubah Gambar ke Base64

Ubah file gambar menjadi sebaris teks yang bisa Anda tempel ke HTML, CSS, request JSON, atau file Markdown, dengan prefiks data URI sudah terpasang di depan sehingga langsung berfungsi begitu ditempel.

Konverter Data

atau jatuhkan file CSV, TSV, TXT … di sini ·

Maks. 95 MB per file· Hingga 20 file· Dihapus setelah 30 menit

Keluaran

File diproses di server kami dan dihapus setelah 30 menit.

Cara menggunakan alat ini

  1. 1

    Tambahkan gambar

    Jatuhkan file PNG, JPG, GIF, WebP, atau SVG ke area unggah, hingga 20 file sekaligus dan maksimal 95 MB per file.

  2. 2

    Pertahankan atau buang prefiksnya

    Prefiks data URI aktif, sehingga hasilnya diawali data:image/png;base64, atau jenis yang sesuai. Matikan di Pengaturan lanjutan jika API meminta string Base64 polos.

  3. 3

    Konversi dan salin

    Tekan Konversi ke Teks Base64 dan unduh satu file .txt per gambar, siap ditempel ke kode Anda.

Unggah gambar dan tekan Konversi ke Teks Base64. Anda mendapat file yang dikodekan sebagai karakter biasa, diawali data:image/…;base64, sehingga bisa langsung dimasukkan ke src img atau url() CSS. Tidak ada yang berubah pada gambarnya.

Kapan gambar dalam bentuk Base64 berguna

Base64 didefinisikan dalam RFC 4648 (2006) dan memetakan setiap 3 byte data biner ke 4 karakter dari alfabet 64 karakter yang terdiri atas A–Z, a–z, 0–9, + dan /. Hasilnya aman melewati saluran apa pun yang dibuat untuk teks. Skema data URI, yang dirumuskan Larry Masinter sebagai RFC 2397 pada 1998, kemudian memungkinkan browser memperlakukan teks itu sebagai file.

Developer front-end menyisipkan ikon kecil, animasi loading, dan gambar placeholder langsung ke kode agar halaman tampil tanpa request tambahan. Developer back-end mengirim gambar di dalam JSON, karena banyak API, termasuk layanan vision dan OCR, menerima gambar sebagai kolom Base64. Penguji menyimpan fixture di kode sumber, dan orang yang membuat laporan HTML satu file atau catatan Markdown menyematkan screenshot agar file tetap utuh saat dikirim lewat email atau diarsipkan.

Seperti apa hasil Base64-nya

PNG transparan 1 × 1 (68 byte) sebagai data URI di dalam tag img
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=" width="1" height="1" alt="piksel transparan">

File ikon PNG

24 KB

set ikon toolbar biasa, 96 × 96 px

Ukuran +33%, kualitas tidak berubah

Teks Base64

32 KB

4 karakter per 3 byte, ditambah prefiks

ANY I

Gambar apa pun

Alat ini menerima format gambar umum, termasuk JPG, PNG, WebP, HEIC, GIF, BMP, dan TIFF. Formatnya dideteksi otomatis dari file, jadi Anda tidak perlu tahu jenis gambar yang Anda miliki.

Konverter Any image

BASE64

Teks berenkode Base64

Base64 adalah encoding yang didefinisikan dalam RFC 4648, yang mengubah data biner apa pun menjadi string dari 64 karakter teks yang aman. Encoding ini dipakai untuk menyematkan gambar dalam HTML dan CSS sebagai data URI, melampirkan file ke email, dan mengirim data biner dalam JSON atau XML. Encoding dapat dibalik sepenuhnya, tetapi membuat data sekitar 33% lebih besar. Base64 bukan enkripsi dan tidak memberikan keamanan apa pun; siapa saja dapat mendekodenya.

Kompresi
Lossless
Transparansi
–
Animasi
–
Diperkenalkan
–
Konverter BASE64

Gambar diubah menjadi teks Base64 ketika harus dibawa di dalam sesuatu yang hanya memuat teks: file HTML atau CSS tanpa request terpisah, kolom JSON dalam panggilan API, fixture pengujian, atau laporan satu file.

Kapan menyisipkan gambar membantu halaman, dan kapan merugikan

Menyisipkan gambar menghemat satu request, yang paling berarti di era HTTP/1.1, ketika browser hanya membuka beberapa koneksi per situs. Dengan multiplexing HTTP/2 dan HTTP/3, request kecil tambahan murah, sehingga manfaatnya menyusut sementara biayanya tetap: gambar yang dikodekan tidak bisa di-cache terpisah, diunduh ulang setiap kali HTML atau CSS berubah, dan memperlambat parsing file tempatnya berada.

Aturan yang masuk akal adalah hanya menyisipkan gambar berukuran beberapa kilobyte yang muncul di setiap halaman, seperti logo atau sprite ikon, dan menyajikan sisanya sebagai file. Foto hampir tidak pernah cocok disisipkan. Jika yang sebenarnya Anda butuhkan adalah jenis file lain, bukan teks, gunakan konversi gambar.

Kelebihan gambar Base64

  • Satu file HTML, CSS, atau JSON yang mandiri
  • Tanpa request tambahan untuk ikon kecil
  • Aman di dalam JSON, XML, dan format teks lainnya
  • Lossless dan bisa dibalik

Kekurangan gambar Base64

  • Sekitar 33% lebih besar daripada file biner
  • Tidak di-cache terpisah oleh browser
  • Diblokir sebagai gambar oleh banyak aplikasi email
  • Sulit ditinjau dalam diff kode

Pertanyaan seputar gambar ke Base64

Apa bedanya Base64 dan data URI untuk gambar?

Base64 hanyalah karakter hasil pengodean. Data URI membungkusnya dengan skema dan jenis, data:image/png;base64, lalu diikuti karakter-karakter tersebut, sehingga browser tahu cara mendekode dan menampilkannya. HTML dan CSS membutuhkan data URI lengkap; sebagian besar API JSON hanya meminta bagian Base64 polosnya.

Seberapa besar ukuran gambar bertambah setelah diubah ke Base64?

Base64 menulis 4 karakter untuk setiap 3 byte, jadi teksnya sekitar sepertiga lebih besar daripada file aslinya, ditambah prefiks pendek. PNG 30 KB menjadi sekitar 40 KB teks. Jika HTML atau CSS dikirim dengan kompresi gzip, sebagian kelebihan itu kembali dihemat saat transfer.

Bisakah gambar Base64 dipakai di tanda tangan email?

Tidak bisa diandalkan. Gmail tidak menampilkan gambar data URI, dan beberapa program email desktop juga membuangnya, sehingga penerima melihat ikon rusak. Simpan gambar di server web atau lampirkan, dan gunakan Base64 untuk halaman web dan aplikasi.

Perlukah ikon SVG dikodekan ke Base64?

Bisa saja, tetapi SVG sudah berupa teks. Melakukan URL-encoding pada markup-nya, alih-alih Base64, biasanya menghasilkan data URI yang lebih pendek dan tetap terbaca. Untuk apa pun yang lebih besar dari ikon kecil, file SVG terpisah yang bisa di-cache browser adalah pilihan yang lebih baik.

Bisakah teks Base64 diubah kembali menjadi gambar?

Bisa, pengodean ini lossless dan sepenuhnya bisa dibalik: dekode mengembalikan byte asli persis sama. Setiap bahasa pemrograman menyediakan dekoder, dan menempelkan data URI lengkap ke bilah alamat browser akan menampilkan gambarnya.

Apakah pengodean Base64 mengubah kualitas gambar?

Tidak. Base64 mengubah cara byte ditulis, bukan pikselnya. Untuk memperpendek string, perkecil gambar lebih dulu, misalnya dengan kompres foto ke 20 KB, lalu kodekan file yang lebih kecil itu.