Base64 ke Gambar

Input Base640 Karakter

Decode data enkode Base64 menjadi gambar yang dapat dipratinjau dan diunduh secara online, mendukung 7+ format gambar umum seperti PNG/JPG/WebP/GIF/SVG. Mengenali awalan Data URL secara otomatis, pratinjau langsung di peramban, cocok untuk debugging antarmuka dan verifikasi enkode.

Rekomendasi Terkait

Apa itu Base64 ke Gambar?

Base64 ke Gambar adalah proses kebalikan dari enkode Base64: mengembalikan string yang dienkode Base64 menjadi data gambar biner asli (seperti format PNG / JPG / WebP / GIF / SVG dll.), dan mempratinjau atau mengunduhnya sebagai file gambar lokal langsung di peramban. Ini adalah alat penting untuk menangani skenario seperti gambar yang dikembalikan API, sumber daya inline (Data URL), lampiran email dalam Base64, dll.

**Prinsip inti:** Base64 mengkodekan data biner menjadi 64 karakter ASCII yang dapat dicetak (A-Z, a-z, 0-9, +, /). Mengubah ke gambar berarti mengembalikan string ASCII ini menjadi aliran byte biner asli, yang kemudian diuraikan oleh peramban menjadi piksel gambar untuk ditampilkan sesuai dengan tipe MIME yang ditentukan (seperti image/png). Data URL (seperti `data:image/png;base64,iVBORw0KGgo...`) adalah bentuk kombinasi Base64 + awalan MIME, alat ini akan mengenali dan memprosesnya secara otomatis.

**Skenario penggunaan umum:** ①Debugging API: Banyak API mengembalikan kode verifikasi gambar, avatar pengguna, tanda tangan elektronik sebagai string Base64 secara langsung, yang perlu dipulihkan untuk dilihat oleh frontend; ②Pengembangan frontend: Ikon kecil yang disematkan dalam Data URL (CSS background-image: url(data:image/png;base64,...)) dapat ditempelkan ke alat untuk melihat efek sebenarnya; ③Pemulihan lampiran email: Lampiran yang dienkode MIME Base64 dapat didecode kembali ke gambar asli untuk disimpan; ④Data crawler: Gambar Base64 yang di-crawl dapat didecode dan disimpan sebagai file lokal; ⑤Pemrosesan awal OCR: Decode lalu gunakan alat OCR untuk mengenali konten gambar.

**Format gambar yang didukung:** Alat ini mendukung semua tipe MIME gambar yang dikenali secara native oleh peramban: PNG (image/png), JPG/JPEG (image/jpeg), WebP (image/webp), GIF (image/gif), SVG (image/svg+xml), BMP (image/bmp), AVIF (image/avif), ICO (image/x-icon), dll. Setiap format memiliki algoritma kompresi dan skenario penggunaan yang berbeda: PNG tanpa rugi cocok untuk ikon dan tangkapan layar, JPG dengan rugi cocok untuk foto, WebP direkomendasikan untuk peramban modern, SVG vektor cocok untuk ikon dan logo.

**Keamanan decoding:** Semua operasi decoding diselesaikan di peramban melalui JavaScript (berdasarkan `atob()` + `TextDecoder` atau API `Blob`), data biner gambar tidak diunggah ke server mana pun. String Base64 yang berisi informasi sensitif (seperti avatar pengguna, tangkapan layar internal) dapat digunakan dengan aman, semua data akan dihapus secara otomatis setelah halaman ditutup.

Kasus penggunaan

  • Memulihkan data gambar Base64 yang dikembalikan API menjadi file gambar yang dapat dipratinjau dan diunduh
  • Memverifikasi apakah sumber daya gambar inline frontend (format Data URL) dienkode dengan benar
  • Mengonfirmasi apakah konten Base64 lengkap saat debugging antarmuka unggah gambar
  • Menyimpan gambar Base64 sebagai file PNG/JPG lokal untuk desain atau dokumen
  • Mendekode enkode Base64 lampiran email dan memulihkannya menjadi gambar
  • Memulihkan gambar Base64 yang di-crawl crawler lalu menyimpannya ke disk
  • Mendekode Data URL untuk memverifikasi efek rendering sebenarnya dari ikon SVG
  • Memulihkan gambar Base64 yang dikembalikan antarmuka OCR / AI menjadi file lokal untuk dilihat

Cara Penggunaan

  1. Tempelkan data gambar yang dienkode Base64 (mendukung dengan atau tanpa awalan Data URL, seperti data:image/png;base64,iVBORw0KG...)
  2. Alat secara otomatis mendeteksi tipe MIME dan melakukan decoding (dikenali di Data URL, atau disniff berdasarkan header konten)
  3. Pratinjau gambar beserta informasi ukuran file dan dimensi ditampilkan secara real-time di sebelah kanan
  4. Klik「Unduh」untuk menyimpan sebagai file gambar lokal, atau klik kanan gambar「Simpan Gambar Sebagai」
  5. Jika decoding gagal, tipe MIME dapat ditentukan secara manual atau gunakan alat Base64 Clean untuk pemrosesan awal

Fitur

  • Pratinjau gambar online: Setelah decoding, gambar ditampilkan langsung di peramban tanpa perlu mengunduh ke lokal
  • Dukungan multi-format: Mendukung 7+ tipe MIME gambar umum seperti PNG / JPG / WebP / GIF / SVG / BMP / AVIF
  • Pengenalan otomatis Data URL: Melepaskan awalan data:image/png;base64, secara otomatis, mengekstrak konten Base64 murni untuk didecode
  • Input Base64 murni: Mendukung string Base64 murni tanpa awalan, tipe MIME dapat ditentukan
  • Mengunduh file gambar: Mendukung penyimpanan gambar yang telah didecode sebagai file PNG/JPG lokal dengan satu klik
  • Statistik karakter real-time: Menampilkan jumlah karakter input, jumlah byte setelah decoding secara real-time, memudahkan evaluasi ukuran gambar
  • Deteksi kesalahan: Menampilkan lokasi kesalahan spesifik saat decoding gagal (karakter Base64 tidak valid, panjang salah, MIME tidak cocok)
  • Nol unggahan lokal di peramban: Semua decoding dan pratinjau diselesaikan di peramban, tidak melewati server mana pun
  • Kompatibilitas terbalik sepenuhnya: Digunakan berpasangan dengan alat「Gambar ke Base64」, membentuk alur kerja konversi dua arah yang lengkap

Contoh Kode

JavaScript: Decoding Native Peramban + Pratinjau Blob URL

javascript

Menggunakan API native peramban atob() + TextDecoder + Blob untuk mendecode Base64 dan menampilkan gambar di peramban.

// Base64 → Gambar (implementasi native peramban)
function base64ToImage(base64String, mimeType = 'image/png') {
  // 1. Hapus awalan Data URL (jika ada)
  const clean = base64String.replace(/^data:image\/\w+;base64,/, '');

  // 2. Decode native peramban atob() menjadi string biner
  const binary = atob(clean);

  // 3. Ubah menjadi Uint8Array
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }

  // 4. Buat Blob URL untuk pratinjau tag <img>
  const blob = new Blob([bytes], { type: mimeType });
  const url = URL.createObjectURL(blob);

  // 5. Atur img.src untuk pratinjau
  const img = document.createElement('img');
  img.src = url;
  img.onload = () => {
    console.log(`Dimensi gambar: ${img.width}x${img.height}`);
    console.log(`Ukuran file: ${bytes.byteLength} bytes`);
  };

  return { img, url, size: bytes.byteLength };
}

// Contoh penggunaan:
const result = base64ToImage('iVBORw0KGgoAAAANSUhEUgAAAAUA...');
document.body.appendChild(result.img);

// Bebaskan Blob URL (menghindari kebocoran memori)
setTimeout(() => URL.revokeObjectURL(result.url), 60000);

Python: Decoding pustaka base64 dan menyimpan gambar

python

Pustaka standar Python base64 mendecode data Base64 menjadi aliran biner gambar, lalu disimpan dengan PIL/Pillow atau operasi file bawaan.

import base64
from pathlib import Path

def base64_to_image(base64_string: str, output_path: str, mime_type: str = 'image/png'):
    """Mendecode string Base64 dan menyimpannya sebagai file gambar"""

    # 1. Hapus awalan Data URL
    if base64_string.startswith('data:image'):
        # Format: data:image/png;base64,iVBORw0...
        header, base64_string = base64_string.split(',', 1)
        # Ekstrak MIME dari header secara otomatis
        if 'image/' in header:
            mime_type = header.split('data:')[1].split(';')[0]

    # 2. Decode
    image_bytes = base64.b64decode(base64_string)

    # 3. Simpan ke file
    output_file = Path(output_path)
    output_file.parent.mkdir(parents=True, exist_ok=True)
    output_file.write_bytes(image_bytes)

    print(f"✅ Tersimpan: {output_file}")
    print(f"   Ukuran file: {len(image_bytes):,} bytes")
    print(f"   Tipe MIME: {mime_type}")

    return output_file


# Contoh penggunaan:
# 1. String Base64 yang didapat dari respons API
api_base64_response = "iVBORw0KGgoAAAANSUhEUgAA..."

# 2. Decode dan simpan
base64_to_image(api_base64_response, 'output/captcha.png')

# 3. Opsional: Pemrosesan lebih lanjut dengan PIL
try:
    from PIL import Image
    img = Image.open('output/captcha.png')
    print(f"Dimensi gambar: {img.size}")
    img.save('output/captcha.png', optimize=True)
except ImportError:
    print('Instal Pillow untuk memproses gambar: pip install Pillow')

Java: java.util.Base64 + ImageIO decoding gambar

java

Pustaka standar Java Base64 mendecode aliran biner gambar, bekerja sama dengan ImageIO / BufferedImage untuk memproses metadata gambar.

import java.io.*;
import java.util.Base64;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;

public class Base64ToImage {
    public static void main(String[] args) throws Exception {
        String base64String = "iVBORw0KGgoAAAANSUhEUgAA...";
        String mimeType = "image/png";

        // 1. Hapus awalan Data URL (jika ada)
        if (base64String.startsWith("data:image")) {
            int commaIdx = base64String.indexOf(',');
            String header = base64String.substring(0, commaIdx);
            base64String = base64String.substring(commaIdx + 1);
            // Ekstrak MIME dari header
            if (header.contains("image/")) {
                mimeType = header.substring(header.indexOf("data:") + 5, header.indexOf(";"));
            }
        }

        // 2. Decoding Base64
        byte[] imageBytes = Base64.getDecoder().decode(base64String);

        // 3. Simpan ke file
        String extension = mimeType.substring("image/".length());
        File outputFile = new File("output." + extension);
        try (FileOutputStream fos = new FileOutputStream(outputFile)) {
            fos.write(imageBytes);
        }
        System.out.println("✅ Tersimpan: " + outputFile.getAbsolutePath());
        System.out.println("   Ukuran file: " + imageBytes.length + " bytes");

        // 4. (Opsional) Baca metadata gambar
        ByteArrayInputStream bais = new ByteArrayInputStream(imageBytes);
        BufferedImage image = ImageIO.read(bais);
        if (image != null) {
            System.out.println("Dimensi gambar: " + image.getWidth() + "x" + image.getHeight());
        }
    }
}

Pertanyaan Umum

Format gambar apa saja yang didukung?

Mendukung semua tipe MIME gambar yang dikenali secara native oleh peramban seperti PNG, JPG, WebP, GIF, SVG, BMP, AVIF, ICO. Alat akan menentukan secara otomatis berdasarkan awalan MIME di Data URL atau fitur input, tipe MIME juga dapat ditentukan secara manual di antarmuka. Memilih format yang benar dapat memastikan peramban melakukan decoding dan menampilkan dengan benar.

Apakah input perlu menyertakan awalan data:image/png;base64?

Tidak perlu. Alat mendukung dua format input: ①String Base64 murni (seperti iVBORw0KGgoAA...), perlu memilih tipe MIME di antarmuka (seperti PNG / JPG); ②Format Data URL (seperti data:image/png;base64,iVBORw0KGgo...), alat mengenali tipe MIME di awalan secara otomatis dan melakukan decoding. Kedua cara input didukung.

Bisakah dipratinjau langsung di peramban?

Bisa. Gambar yang telah didecode akan ditampilkan langsung di peramban melalui Blob URL, mendukung pratinjau online. Setelah mengonfirmasi konten benar, baru mengunduh sebagai file lokal atau menyalin Data URL untuk penyematan HTML/CSS. Seluruh proses pratinjau tidak memerlukan permintaan jaringan.

Apa perbedaan dengan alat Base64 ke File?

Base64 ke Gambar dioptimalkan khusus untuk format gambar: ①Mengenali tipe MIME secara otomatis; ②Pratinjau langsung di peramban melalui Blob URL; ③Mengatur ekstensi file secara otomatis berdasarkan MIME (.png / .jpg dll.); ④Menampilkan informasi dimensi gambar. Base64 ke File adalah alat umum, cocok untuk pemulihan dan pengunduhan file biner apa pun (seperti PDF, ZIP, audio dll.).

Bagaimana jika gambar yang ditampilkan setelah decoding tidak lengkap?

Kemungkinan penyebab: ①String Base64 terpotong (periksa apakah panjangnya lengkap); ②Tipe MIME ditentukan salah (seperti mendecode data PNG sebagai JPG); ③Data asli itu sendiri sudah rusak. Saran: ①Pastikan Base64 sumber lengkap; ②Coba beralih tipe MIME yang berbeda; ③Gunakan alat Base64 Validate untuk memeriksa legalitas.

Berapa ukuran Base64 lebih besar dari gambar asli?

Enkode Base64 akan meningkatkan ukuran data biner asli sekitar 33% (3 byte → 4 karakter). Misalnya PNG 100KB setelah dienkode menjadi string Base64 sekitar 133KB. Jadi Base64 cocok untuk gambar kecil (< 10KB), gambar besar disarankan menggunakan HTTP URL untuk transmisi langsung.

Apakah mendukung gambar vektor SVG?

Mendukung. SVG adalah format gambar vektor berbasis XML, setelah dienkode Base64 dapat disematkan langsung ke HTML <img> atau CSS background-image. Setelah decoding akan dirender secara vektor di peramban, dapat diskalakan tanpa rugi. Perhatikan bahwa SVG mungkin berisi kode JavaScript, perhatikan keamanan XSS saat menggunakannya.

Bagaimana cara menyimpan sebagai format tertentu?

Setelah decoding klik tombol unduh, alat akan menambahkan ekstensi yang sesuai secara otomatis berdasarkan tipe MIME saat decoding (image/png → .png, image/jpeg → .jpg). Jika perlu konversi format (seperti PNG → JPG), disarankan untuk mendecode terlebih dahulu lalu mengonversi dengan alat lain (seperti Canvas / ImageMagick).

Gambar setelah decoding kosong atau rusak?

Penyebab umum: ①Base64 berisi karakter baris baru atau spasi yang belum dibersihkan — gunakan alat Base64 Clean untuk pemrosesan awal terlebih dahulu; ②Padding (=) hilang — alat ini akan melengkapinya secara otomatis; ③Tipe MIME tidak cocok dengan data asli — periksa Content-Type yang dikembalikan API sumber atau coba MIME lain secara manual; ④Base64 sumber terpotong selama transmisi — dapatkan string lengkap kembali.

Apakah mendukung gambar besar (>10MB)?

Mendukung, tetapi kinerja rendering peramban untuk gambar sangat besar akan menurun. Decoding Base64 10MB (sekitar 7,5MB gambar asli) biasanya lancar; melebihi 50MB mungkin muncul peringatan memori. Saran: ①Gunakan base64-clean untuk menghilangkan spasi terlebih dahulu; ②Decode gambar besar secara blok; ③Pastikan memori peramban cukup (disarankan memori tersedia 4GB+).

Pemecahan Masalah

Gambar yang ditampilkan setelah decoding kosong

Mungkin tipe MIME tidak cocok atau Base64 tidak lengkap. Periksa: 1) Header Content-Type yang dikembalikan API sumber; 2) Beralih tipe MIME secara manual dan coba lagi; 3) Pastikan string Base64 lengkap (panjang sesuai harapan).

Decoding gagal InvalidCharacterError

String Base64 berisi karakter ilegal (spasi, baris baru, karakter Indonesia dll.). Gunakan alat Base64 Clean untuk menghilangkan semua spasi dan karakter ilegal terlebih dahulu, lalu konversi.

Ekstensi gambar yang diunduh salah

Periksa apakah tipe MIME saat decoding sesuai dengan gambar asli. Jika API sumber mengembalikan image/jpeg tetapi data Base64 sebenarnya adalah PNG, setelah diunduh ekstensinya adalah .jpg tetapi format sebenarnya adalah PNG. Disarankan mengonfirmasi format asli dari awalan MIME atau header Content-Type.

Peramban macet saat mendecode gambar besar

String Base64 yang melebihi 50MB dapat menyebabkan luapan memori. Saran: ①Gunakan alat base64-clean untuk menghilangkan karakter spasi terlebih dahulu; ②Decode gambar besar secara batch (seperti membagi berdasarkan tile); ③Pastikan memori peramban cukup (disarankan memori tersedia 4GB+); ④Gunakan skrip Node.js / Python sisi server untuk memproses gambar sangat besar.

Gambar SVG tidak dapat ditampilkan setelah decoding

SVG adalah format vektor berbasis XML, setelah decoding harus dipastikan: 1) Tipe MIME menggunakan image/svg+xml; 2) SVG tidak boleh berisi karakter khusus yang tidak di-escape; 3) Beberapa peramban memiliki batasan keamanan untuk kode JavaScript di SVG. Disarankan memverifikasi legalitas SVG terlebih dahulu dengan alat pengurai XML.

Glosarium

Base64
Metode enkode yang merepresentasikan data biner dengan 64 karakter ASCII, didefinisikan dalam RFC 4648. Alat ini melakukan kebalikannya: mengembalikan string Base64 menjadi biner gambar asli.
Data URL
Format URL inline yang didefinisikan RFC 2397: data:image/<MIME>;base64,<data>. Dapat digunakan langsung di HTML img src, CSS background-image. Alat ini mengenali dan melepaskan awalan secara otomatis.
MIME Tipe
Tipe media internet, seperti image/png, image/jpeg. Peramban menentukan cara menguraikan aliran byte menjadi gambar berdasarkan MIME.
PNG
Format bitmap kompresi tanpa rugi, mendukung saluran transparan. Sering digunakan untuk ikon, tangkapan layar, gambar yang perlu mempertahankan detail. Ukuran setelah Base64 sekitar 1,33 kali dari aslinya.
JPG/JPEG
Format bitmap kompresi dengan rugi, cocok untuk foto. Rasio kompresi tinggi tetapi tidak mendukung transparansi. Ukuran setelah Base64 sekitar 1,33 kali dari aslinya.
WebP
Format gambar modern yang dikembangkan Google, mendukung kompresi dengan rugi/tanpa rugi dan saluran transparan secara bersamaan. 25-35% lebih kecil dari PNG/JPG.
Blob (Binary Large Object)
Objek biner native peramban, dapat membungkus aliran byte yang telah didecode Base64 menjadi Blob URL gambar untuk pratinjau dan pengunduhan.

Tabel Perbandingan 8 Format Gambar

Format gambar yang berbeda memiliki algoritma kompresi, fitur, dan skenario penggunaan yang berbeda.

FormatTipe MIMETipe KompresiDukungan TransparanSkenario Umum
PNGimage/pngTanpa RugiIkon / Tangkapan Layar / Logo
JPGimage/jpegDengan RugiFoto / Gambar Pemandangan
WebPimage/webpDengan Rugi/Tanpa RugiRekomendasi Web Modern
GIFimage/gifTanpa Rugi (256 warna)✅ (1-bit)Animasi Kecil / Ikon Sederhana
SVGimage/svg+xmlVektorLogo / Ikon / Ilustrasi
BMPimage/bmpTanpaOpsionalGambar Sistem Windows
AVIFimage/avifDengan Rugi/Tanpa RugiFormat Gambar Generasi Berikutnya
ICOimage/x-iconTanpa RugiFavicon Situs Web

Perbandingan Pemuatan Gambar Data URL vs HTTP URL

Gambar yang telah didecode dapat disematkan langsung ke HTML/CSS sebagai Data URL, dibandingkan dengan HTTP URL tradisional.

DimensiData URLHTTP URL
Jumlah Permintaan HTTP01 kali
Penggunaan Kembali CacheSulitMudah (CDN / Peramban)
UkuranGambar Asli + 33%Ukuran Gambar Asli
Ukuran yang Cocok< 10 KBUkuran Berapa Pun
Transmisi KompresiTidak (Sudah Dienkode)gzip / Brotli
Batasan CSPMungkinUmumnya Diizinkan
Penyimpanan ServerTidak PerluPerlu
Akses Offline✅ (Tingkat File)❌ (Perlu Cache)

Tabel Rujukan 5 Kesalahan Umum Base64 ke Gambar

Saat mengalami kesalahan decoding, cari masalah dengan cepat sesuai tabel di bawah.

Gejala KesalahanKemungkinan PenyebabCara Mengatasi
Decoding Gagal: InvalidCharacterErrorBerisi spasi, baris baru, karakter non-Base64Gunakan alat Base64 Clean untuk pemrosesan awal
Gambar Ditampilkan KosongTipe MIME tidak cocok dengan data asliGanti MIME yang benar (seperti data PNG gunakan image/png)
Gambar Ditampilkan Tidak LengkapString Base64 terpotongDapatkan string Base64 lengkap kembali
Kesalahan PaddingURL-safe Base64 menghilangkan paddingGunakan alat Base64 Padding untuk melengkapi =
Memori Peramban MeluapGambar terlalu besar (> 50MB)Decode secara blok atau gunakan alat kompresi gambar

Authoritative References