Softonic

Encoder Gambar Base64

Langkah 1 / 3 Jatuhkan gambar Anda di sini

Memproses...

Meng-inline gambar kecil sebagai data URI Base64 dapat menghemat satu HTTP request dan membuat aset ikut bersama HTML atau CSS yang memakainya. Encoder ini menerima PNG, JPEG, GIF, WebP, atau SVG yang didukung hingga 5 MiB. Gambar raster setelah didekode tidak boleh melebihi 16.384 piksel pada salah satu sisi atau 33.554.432 piksel secara keseluruhan. Encoder memvalidasi decoding raster di browser dan hanya struktur SVG UTF-8, lalu menghasilkan Base64, CSS, HTML, atau JSON. Uji hasil di sistem tujuan dan perlakukan SVG yang tidak tepercaya sebagai konten aktif meskipun sudah di-encode.

Cara encode gambar

  1. 1

    Letakkan gambar Anda

    Pilih PNG, JPG, GIF, WebP, atau SVG berukuran maksimal 5 MiB. Gambar raster tidak boleh melebihi 16.384 piksel pada salah satu sisi atau 33.554.432 piksel secara keseluruhan, dan teks hasil encoding tetap di bawah 7 MiB.

  2. 2

    Encoding berjalan di browser

    Byte gambar dibaca, di-encode Base64, dan diberi prefix header URI `data:` yang benar.

  3. 3

    Pilih format output

    Raw Base64, rule CSS `background-image`, tag HTML `<img>`, atau string yang aman untuk JSON.

  4. 4

    Salin hasilnya

    Tempel setelah memeriksa dukungan data URI, batas ukuran, dan keamanan konten di sistem tujuan.

Kapan inline gambar layak dilakukan

Kandidat bagus untuk inline:

  • Ikon di bawah 2 KB - Menghemat HTTP request dengan overhead nyaris tidak berarti.
  • Template email - Dukungan data URI tidak konsisten di berbagai klien email. Uji klien tujuan dan gunakan gambar CID atau gambar yang dihosting jika diperlukan.
  • Placeholder layar pertama (LQIP) - Versi blur berkualitas rendah dipasang inline, gambar penuh dimuat setelahnya.
  • SVG yang dipakai sekali - Data URI dengan percent-encoding bisa lebih ringkas daripada Base64, asalkan karakter khusus di-encode dengan benar dan SVG tak tepercaya tetap diperlakukan sebagai konten aktif.

Kandidat buruk:

  • Gambar besar - Inflasi 33% untuk gambar 500 KB berarti pemborosan 166 KB.
  • Gambar yang dipakai ulang lintas halaman - Inline menonaktifkan caching browser antar rute.
  • CSS kritis - Inline gambar berat membengkakkan jalur render kritis.

Ekspektasi ukuran

Ukuran gambar Ukuran string Base64
500 byte ~680 karakter
2 KB ~2,7 KB
20 KB ~27 KB
200 KB ~270 KB

Format Data URI

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==
  • Skema data:
  • MIME type
  • Indikator ;base64,
  • Byte yang di-encode

SVG adalah kasus khusus

SVG sudah berupa teks, tetapi perbandingan ukuran bergantung pada isinya dan banyaknya percent-encoding yang diperlukan. Untuk bentuk non-Base64, gunakan data:image/svg+xml, dengan karakter khusus yang di-encode dengan benar; parameter ;utf8 umum dipakai tetapi bukan parameter standar dan tidak menggantikan percent-encoding. Alat ini tidak mempratinjau SVG dan hanya memeriksa struktur UTF-8, jadi SVG tak tepercaya tetap merupakan konten aktif dan Base64 bukan sanitasi.

Pertanyaan yang Sering Diajukan

Base64 menambah ukuran data biner sekitar sepertiga sebelum wrapper data URI dan kompresi transfer diperhitungkan. Tidak ada ambang ukuran tetap yang selalu menang; bandingkan jumlah request, caching, kompresi, dan frekuensi penggunaan, lalu ukur performa situs Anda.

Data URI tidak memberi keuntungan SEO otomatis. Search engine mengindeks HTML di sekitarnya, sedangkan background CSS tidak menyediakan alternatif teks seperti atribut alt. Gunakan <img> dengan teks alternatif yang bermakna bila gambar menyampaikan informasi, lalu nilai performa secara terpisah.

Tidak. Encoder membaca file secara lokal dengan FileReader API dan menghasilkan string Base64 di dalam browser. Tidak ada yang meninggalkan mesin Anda.

Ya - gunakan tool Base64 to Image untuk mengubah URI data:image/... kembali menjadi file yang dapat didownload.

Alat Terkait

Pembuat Kertas Paranada

Buat kertas paranada siap cetak: paranada kosong, kunci G atau F, paranada ganda untuk piano, atau tablatur gitar. Atur jumlah, jarak garis, A4 atau Letter, dan margin, lalu unduh PDF atau SVG.

Pembuat Mosaik LEGO

Ubah foto menjadi rancangan mosaik persegi berukuran 16, 32, 48, atau 64 sel per sisi. Lihat perkiraan warna, hitung pelat 1×1, dan unduh panduan bernomor.

Pembuat kertas grafik

Buat kertas grafik siap cetak secara online: pilih kisi kotak atau titik, atur jarak dalam mm, pilih A4 atau Letter dan warna garis khusus, lalu cetak atau unduh SVG yang tajam.

Pemilih Warna Material Design

Jelajahi palet warna Material Design. Salin nuansa mana pun (dari 50 hingga A700) dalam format HEX, RGB, atau HSL dengan sekali sentuh.

Pembuat Avatar

Buat avatar ilustrasi datar di browser Anda. Pilih warna kulit, rambut, mata, mulut, pakaian, latar belakang, dan nama tampilan opsional, lalu unduh SVG atau PNG.

Pembuat Tiket Undian

Buat lembar tiket pribadi dua bagian bernomor berurutan untuk acara informal. Cetak semua halaman A4 atau US Letter, atau unduh halaman saat ini.

Alat ini tersedia dalam bahasa lain