Kapan sebaiknya gambar ditanam sebagai base64?

Menanam masuk akal untuk gambar di bawah sekitar 5 KB, seperti ikon kecil dan pola latar, karena pada ukuran itu biaya permintaan jaringan tersendiri lebih besar daripada penghematan yang didapat. Di atas ukuran itu, memuat berkas terpisah hampir selalu lebih cepat karena bisa disimpan di cache dan diunduh paralel.

Apakah gambar saya diunggah ke server?

Tidak, berkasnya dibaca langsung oleh browser-mu memakai FileReader dan tidak pernah dikirim ke mana pun. Menutup tab akan menghapusnya sepenuhnya dari memori.

Kenapa hasil base64 lebih besar dari berkas aslinya?

Karena base64 mewakili setiap tiga byte data dengan empat karakter teks, sehingga ukurannya bertambah sekitar sepertiga. Pertambahan itu adalah harga yang dibayar untuk bisa menuliskan data biner sebagai teks biasa di dalam HTML atau CSS.

Teks & Konverter

Konverter Gambar ke Base64

Pilih berkas gambar untuk mendapat data URL base64, lengkap dengan potongan siap pakai untuk HTML dan CSS.

Pilih atau seret gambar DIPROSES DI PERANGKATMU · TIDAK DIUNGGAH

// BELUM ADA BERKAS

Apa ini

Konverter gambar ke base64 mengubah berkas gambar menjadi rangkaian teks yang mewakili isi berkas itu, sehingga gambarnya bisa ditanam langsung di dalam HTML atau CSS tanpa berkas terpisah. Hasilnya disebut data URL, dan browser memperlakukannya persis seperti alamat gambar biasa. Kegunaannya paling nyata untuk gambar kecil — ikon, logo mungil, pola latar — yang jika dimuat terpisah justru menghabiskan lebih banyak waktu untuk permintaan jaringannya sendiri daripada untuk isinya.

Cara kerja

Base64 memperbesar ukuran data sekitar 33% karena setiap tiga byte gambar diwakili oleh empat karakter teks. Karena itu gambar besar sebaiknya tidak ditanam: berkas 500 KB menjadi sekitar 670 KB teks yang harus diunduh bersama halamannya, dan tidak bisa disimpan di cache secara terpisah seperti berkas gambar biasa.

Untuk gambar SVG, menanamnya sebagai teks biasa dengan pengodean URL sering menghasilkan berkas lebih kecil daripada base64, karena SVG memang sudah berupa teks. Alat ini menampilkan keduanya untuk SVG sehingga kamu bisa memilih yang lebih ringkas.

Cara pakai

Pilih berkas gambar Klik area unggah atau seret berkasnya ke sana. Berkas diproses di perangkatmu.
Periksa ukuran hasilnya Perbandingan ukuran asli dan ukuran base64 ditampilkan, agar terlihat apakah menanamnya masuk akal.
Salin potongan yang kamu butuhkan Tersedia data URL polos, potongan HTML, dan potongan CSS — tinggal salin.

Pertanyaan umum

Kapan sebaiknya gambar ditanam sebagai base64?: Menanam masuk akal untuk gambar di bawah sekitar 5 KB, seperti ikon kecil dan pola latar, karena pada ukuran itu biaya permintaan jaringan tersendiri lebih besar daripada penghematan yang didapat. Di atas ukuran itu, memuat berkas terpisah hampir selalu lebih cepat karena bisa disimpan di cache dan diunduh paralel.
Apakah gambar saya diunggah ke server?: Tidak, berkasnya dibaca langsung oleh browser-mu memakai FileReader dan tidak pernah dikirim ke mana pun. Menutup tab akan menghapusnya sepenuhnya dari memori.
Kenapa hasil base64 lebih besar dari berkas aslinya?: Karena base64 mewakili setiap tiga byte data dengan empat karakter teks, sehingga ukurannya bertambah sekitar sepertiga. Pertambahan itu adalah harga yang dibayar untuk bisa menuliskan data biner sebagai teks biasa di dalam HTML atau CSS.

Catatan

Berkasmu diproses di browser dan tidak pernah diunggah.