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 Undangan

Buat undangan pernikahan, ulang tahun, akikah, atau acara kantor. Sesuaikan tulisan dan warna, lihat pratinjau langsung, lalu unduh PNG siap cetak ukuran 5R.

Editor Foto

Editor foto berbasis browser dengan pangkas, putar, kecerahan, kontras, saturasi, filter, hamparan teks, dan ekspor ke JPG, PNG, atau WebP.

Generator Kode QR

Buat kode QR secara lokal di browser dari URL, teks biasa, atau payload QR yang diformat benar, lalu unduh sebagai PNG.

Pembaca Kode QR

Dekode kode QR dari gambar PNG, JPG, atau WebP di browser. Lihat URL, Wi-Fi, vCard, SMS, email, kalender, geo, atau teks sebelum digunakan.

Vektorisasi PNG ke SVG

Telusuri gambar raster PNG menjadi jalur SVG langsung di browser. Cocok untuk logo, ikon, dan gambar garis. Atur ambang, jumlah warna, dan penghalusan.

Generator Barcode

Buat barcode Code 128, EAN-13, UPC, ITF-14, dan tujuh format linear lainnya. Data diproses di browser dan dapat diunduh sebagai SVG atau PNG.