Kapan saya harus menyematkan gambar secara sebaris?

Untuk gambar yang sangat kecil (di bawah beberapa KB) yang muncul di atas lipatan, sebaris dapat mempercepat rendering dengan menghindari permintaan HTTP tambahan. Untuk gambar yang lebih besar, overhead encoding (sekitar 33%) melebihi permintaan yang dihemat.

Format apa yang didukung?

PNG, JPEG, SVG, WebP, AVIF, dan GIF. SVG sangat baik untuk sebaris karena tetap berbasis teks, sehingga overhead encoding minimal.

Apakah data URI aman digunakan di CSS?

Ya. Bungkus dalam url() dengan kutip di sekitar data URI itu sendiri. Keluaran yang dihasilkan Toova sudah URL-safe dan bekerja langsung di background-image, mask-image, dan properti apa pun yang menerima URL.

Dapatkah saya mendekode data URI kembali ke gambar?

Ya. Tempelkan data URI dan Toova mendekodenya menjadi gambar asli, siap untuk diunduh. Berguna untuk mengekstrak gambar yang disematkan dari file HTML atau CSS.

Apakah gambar saya dikirim ke mana pun?

Tidak. Encoding terjadi sepenuhnya di peramban Anda.

Konverter Gambar ke Base64 — PNG, JPG, WebP ke Data URI

Konversi gambar apa pun ke data URI Base64 di peramban Anda, siap untuk disematkan secara sebaris di HTML, CSS, atau JSON. Toova menangani setiap format umum, menghasilkan data URI yang valid, dan tidak pernah mengunggah gambar Anda — berguna untuk ikon kecil, template email, dan dokumen mandiri.

Kapan menyematkan gambar secara sebaris

Gambar kecil (ikon di bawah beberapa KB) sering kali dirender lebih cepat sebagai data URI sebaris daripada sebagai permintaan HTTP terpisah, karena melewati pulang-pergi. Template email sering menyematkan gambar secara sebaris karena banyak klien surel memblokir pemuatan eksternal secara default. Dokumen HTML mandiri (panduan luring, laporan yang dapat diunduh) membutuhkan semuanya dalam satu file. Toova mengonversi gambar apa pun ke data URI Base64 yang dapat Anda tempelkan langsung ke src, background-image, atau field JSON.

Pertimbangan format dan ukuran

Encoding Base64 menambah sekitar 33% ke ukuran file, sehingga sebaris hanya menang untuk gambar kecil. Di atas sekitar 5-10 KB, permintaan HTTP terpisah biasanya lebih cepat daripada payload sebaris yang membengkak. Toova menampilkan ukuran asli, ukuran yang di-encode, dan persentase overhead sehingga Anda dapat memutuskan. Setiap format umum (PNG, JPEG, SVG, WebP, GIF) didukung.

Hanya lokal

Gambar dibaca dan di-encode sepenuhnya di peramban Anda. File tidak pernah diunggah, dan tidak ada pencatatan konten. Itu penting saat gambar adalah mockup yang belum dirilis, foto pelanggan, atau aset proprietary apa pun. Tab Network akan tetap kosong selama encoding, dan halaman bekerja secara luring setelah pemuatan pertama.

Pertanyaan yang Sering Diajukan

Kapan saya harus menyematkan gambar secara sebaris?: Untuk gambar yang sangat kecil (di bawah beberapa KB) yang muncul di atas lipatan, sebaris dapat mempercepat rendering dengan menghindari permintaan HTTP tambahan. Untuk gambar yang lebih besar, overhead encoding (sekitar 33%) melebihi permintaan yang dihemat.
Format apa yang didukung?: PNG, JPEG, SVG, WebP, AVIF, dan GIF. SVG sangat baik untuk sebaris karena tetap berbasis teks, sehingga overhead encoding minimal.
Apakah data URI aman digunakan di CSS?: Ya. Bungkus dalam url() dengan kutip di sekitar data URI itu sendiri. Keluaran yang dihasilkan Toova sudah URL-safe dan bekerja langsung di background-image, mask-image, dan properti apa pun yang menerima URL.
Dapatkah saya mendekode data URI kembali ke gambar?: Ya. Tempelkan data URI dan Toova mendekodenya menjadi gambar asli, siap untuk diunduh. Berguna untuk mengekstrak gambar yang disematkan dari file HTML atau CSS.
Apakah gambar saya dikirim ke mana pun?: Tidak. Encoding terjadi sepenuhnya di peramban Anda.