RevealTheme logo

Konverter Gambar ke Base64

Konversikan berkas gambar apa pun menjadi URL data Base64. Tempel hasilnya langsung ke CSS, HTML, atau JSON.

Cara menggunakan alat ini

  1. 1

    Click the file picker and choose an image (PNG, JPEG, GIF, WebP, SVG, or any format your browser accepts).

  2. 2

    Wait a moment while the browser reads the file and renders a preview thumbnail.

  3. 3

    Review the generated data URL in the text box below the preview.

  4. 4

    Click Copy to put the full data URL on your clipboard, then paste it into your stylesheet or markup.

Apa itu Konverter Gambar ke Base64?

URL data Base64 menyematkan konten biner sebuah gambar langsung ke dalam HTML atau CSS. Ini menghilangkan permintaan HTTP untuk ikon dan grafik kecil, yang dapat meningkatkan waktu muat yang dirasakan. Konsekuensinya: pengodean Base64 menggembungkan ukuran berkas sekitar 33 %, jadi ini ideal untuk ikon di bawah 5 KB.

Kasus penggunaan umum

  • Inline a small icon directly in a CSS background-image: url(...) rule to save an HTTP request.

  • Embed a logo in a single self-contained HTML email or offline page with no external files.

  • Paste image data into a JSON payload or API request that only accepts text fields.

  • Store a tiny placeholder image as a string in a config file or environment variable.

  • Drop an avatar or sprite straight into a React or Vue component without a separate asset import.

  • Generate a quick data URL to test how a graphic renders in a sandbox or CodePen snippet.

Pertanyaan yang sering diajukan

Kapan saya sebaiknya menggunakan gambar Base64?
Untuk ikon, logo, atau sprite kecil ketika Anda ingin menghilangkan satu permintaan HTTP. Hindari untuk gambar besar: overhead pengodean meniadakan manfaat apa pun.
Bisakah saya menggunakan ini di CSS?
Ya: tempel URL data langsung ke dalam deklarasi background-image: url(...).

Alat terkait