Lompat ke konten
Utilizy

Gambar ke Base64

Salin sebagai data URI, siap untuk CSS atau HTML

Berjalan di browser Anda

Gambar

Hasil

Hasil

Belum ada gambar

Masukkan gambar dan keluaran Base64 muncul di sini.

Base64 membuat data sekitar 33% lebih besar. Pakai hanya untuk gambar kecil.

Menyisipkan gambar kecil sebagai data URI menghilangkan satu permintaan jaringan, yang berarti untuk ikon yang muncul di setiap halaman. Di atas beberapa kilobita cara ini tidak lagi sepadan, karena Base64 membuat datanya sekitar sepertiga lebih besar dan tidak bisa disimpan di cache secara terpisah.

Cara pakai

  1. 1 Masukkan sebuah gambar — ikon kecil paling cocok.
  2. 2 Pilih apakah Anda ingin data URI lengkap atau hanya muatan Base64-nya.
  3. 3 Salin hasilnya lalu tempel ke CSS atau HTML Anda.

Pertanyaan yang sering diajukan

Kapan sebaiknya saya menyisipkan gambar secara inline?

Di bawah sekitar 4KB, dan hanya untuk gambar yang dipakai di hampir semua halaman. Di atas itu, penalti ukuran dan hilangnya cache terpisah melebihi hemat satu permintaan.

Kenapa filenya jadi lebih besar?

Base64 mewakili tiga bita biner sebagai empat karakter ASCII, penambahan tetap sebesar 33%, ditambah sedikit untuk awalan URI-nya. Itulah harga menanamkan data biner di dalam berkas teks.

Apakah data URI disimpan di cache?

Hanya sebagai bagian dari file yang memuatnya. Ubah satu ikon inline dan seluruh stylesheet harus diunduh ulang — persis itulah sebabnya menyisipkan gambar besar justru merugikan.

Cocok dipakai bersama