Gambar ke Base64

Baru

Ubah gambar apa pun menjadi string URL data Base64

Alat Developer

Cara Menggunakan Gambar ke Base64

  1. 1Unggah gambar Anda
  2. 2Salin string Base64 yang dihasilkan
  3. 3Tempelkan ke HTML img src, CSS background-image, atau payload JSON
  4. 4Paste it directly into your HTML or CSS

Tentang Gambar ke Base64

Image to Base64 converts your image file into a Base64 text string that can be embedded directly into HTML img tags, CSS backgrounds, or JSON payloads — no separate image file needed. The tool shows the full data URL, the pure Base64 portion, and an example HTML snippet.

Base64 encoding is the standard technique for embedding binary image data inside text-based formats. It is used everywhere: HTML email templates that cannot reference external files, CSS files that inline background icons, JSON API responses that carry image thumbnails, and SVG files that embed raster images. This tool automates the conversion instantly in your browser.

Three output views are provided: the full data URL (ready to paste into an src attribute), the raw Base64 string (for APIs that expect just the encoded data), and a complete HTML img tag example. One-click copy buttons make it easy to grab each piece without manual selection.

Fitur Utama Gambar ke Base64

  • Converts PNG, JPG, WEBP, GIF, and SVG to Base64
  • Outputs a ready-to-use data URI string
  • One-click copy of the full encoded output
  • Shows encoded string length and estimated size
  • Supports drag-and-drop image upload
  • Instant encoding with no server upload
  • 100% client-side using the FileReader API
  • Works with any image size up to browser memory limits

Format yang Didukung

Format Input

PNGJPGWEBPGIFSVGBMPICO

Format Output

Base64 data URL stringRaw Base64 stringHTML img snippet

The output data URL includes the correct MIME type prefix (data:image/png;base64, etc.) automatically.

Contoh

Inline icon in HTML email

Embed the icon directly in your email HTML so it displays even when external images are blocked.

Input

Small 32x32 PNG icon

Output

data:image/png;base64,iVBOR... (full data URL)

CSS background image

Use the data URL in a CSS background-image property to avoid an extra HTTP request for small decorative assets.

Input

Small decorative PNG texture

Output

background-image: url("data:image/png;base64,...")

Image in JSON API response

Copy the raw Base64 string to use as the value of an "avatar" field in a JSON payload without the data URL prefix.

Input

User avatar PNG

Output

Raw Base64 string for JSON field value

Kasus Penggunaan Umum

  • Embed small icons directly in HTML to avoid extra HTTP requests
  • Include images inline in CSS for background graphics
  • Store image data inside JSON API payloads or config files
  • Create self-contained HTML email templates with embedded images
  • Encode signature images for embedding in PDF generation scripts
  • Bundle small sprites directly in JavaScript source files

Pemecahan Masalah

Output string is extremely long and slows down the editor

Solusi

Base64 encoding increases size by ~33%. For images over 100 KB, consider serving them as regular files instead of inline data URIs.

Data URI does not display in the browser

Solusi

Ensure the data URI includes the correct MIME type prefix, e.g. "data:image/png;base64," — the tool generates this automatically, so check for accidental truncation when copying.

SVG encoding produces broken output

Solusi

For SVG files, URL-encoding is sometimes more reliable than Base64. Use the raw SVG source or URL-encode the SVG string instead.

Pertanyaan yang Sering Diajukan

Mengapa menggunakan Base64 untuk gambar?

Base64 memungkinkan Anda menyematkan gambar langsung dalam kode tanpa permintaan file terpisah.

Apakah Base64 meningkatkan ukuran file?

Ya, sekitar 33%. Gunakan hanya saat penyematan diperlukan.

What is the difference between the data URL and the raw Base64 string?

The data URL includes the MIME type prefix (e.g., data:image/png;base64,) followed by the Base64 data. The raw Base64 string is just the encoded data without that prefix. Use the full data URL in HTML src attributes and CSS url() values; use the raw string when an API expects Base64-only input.

Is there a file size limit?

There is no server-side limit since all encoding happens in your browser. Images up to 10 MB encode reliably on modern devices. Very large images may slow down or crash the browser tab.

Which image formats are supported?

Any format your browser can load: PNG, JPG, WEBP, GIF, SVG, BMP, and ICO are all supported. The MIME type is detected automatically from the file.

Can I use the Base64 output in CSS?

Yes. Use the full data URL as the value of a CSS background-image property: background-image: url("data:image/png;base64,..."). Useful for small decorative images and icons.

Can I use the Base64 output in a JSON API?

Yes. Copy the raw Base64 string (without the data URL prefix) to use as the value of an image field in a JSON payload.

What happens to transparency in the Base64 output?

Transparency is preserved in the data URL when the source is a PNG. The MIME type in the prefix (data:image/png;base64,) ensures the browser renders it correctly.