Konverter PNG ke Base64

Enkode file PNG sebagai Base64 dengan transparansi tetap utuh. Seret atau tempel PNG, lalu salin sebagai data URI, tag img HTML, latar belakang CSS, atau gambar Markdown.

Konversi ke Lebar maks.

Seret gambar ke sini, klik untuk memilih, atau tempel dari papan klip PNG, JPEG, GIF, WebP, SVG, BMP, ICO, AVIF, dan lainnya. Diproses secara lokal.

Berjalan sepenuhnya di browser Anda. Tidak ada yang diunggah.

Cara menggunakan

Seret PNG ke area seret-lepas, klik untuk memilih file, atau tempel tangkapan layar dari papan klip.
Biarkan Konversi ke pada Format asli untuk mengenkode byte PNG aslinya, atau atur Lebar maks. untuk memperkecil gambar yang besar.
Bandingkan ukuran asli dengan ukuran hasil enkode yang ditampilkan untuk gambar tersebut.
Salin atau unduh keluaran data URI, Base64 mentah, tag img, CSS, atau Markdown.

PNG dan Base64

PNG (Portable Network Graphics, tipe MIME image/png) adalah format raster lossless dengan kanal alfa penuh, sehingga menjadi pilihan umum untuk ikon, logo, diagram, dan tangkapan layar. Setiap file PNG diawali dengan signature 8 byte yang sama, jadi setiap data URI PNG juga diawali dengan cara yang sama: data:image/png;base64,iVBORw0KGgo....

Base64 tidak menyentuh piksel. Mendekode string tersebut menghasilkan kembali file yang identik byte demi byte, dengan warna dan area transparan yang sama.

Penggunaan yang tepat untuk data URI PNG

Ikon antarmuka dan logo kecil yang memerlukan latar belakang transparan.
Tangkapan layar di dalam laporan HTML mandiri, laporan bug, atau dokumentasi yang diekspor.
Grafik dan kode QR yang dibuat di server lalu dikembalikan dalam respons JSON.
Gambar yang dibuat dengan canvas.toDataURL(), yang secara default memang sudah menghasilkan data URI PNG.

Lain halnya dengan foto. PNG menyimpannya secara lossless sehingga filenya menjadi besar; JPEG atau WebP akan menghasilkan string yang jauh lebih pendek.

Perkecil PNG sebelum dienkode

Setiap byte yang Anda pangkas dari PNG menghemat sekitar 1,33 karakter Base64. Proses file terlebih dahulu dengan pengoptimal seperti oxipng atau zopflipng (lossless) atau pngquant (mengurangi palet). Periksa juga ukuran pikselnya: ikon yang diekspor tiga kali lebih besar dari ukuran tampilannya biasanya dapat diperkecil dengan opsi Lebar maks.

Konversi ke WebP mempertahankan transparansi dan sering kali jauh lebih kecil. Konversi ke JPEG menghilangkan transparansi, sehingga area transparan berubah menjadi warna solid. Mengenkode ulang ke PNG di browser tidak mengoptimalkan kompresi, jadi hasilnya bisa lebih besar daripada file asli yang sudah dioptimalkan dengan baik; bandingkan ukurannya sebelum menyalin.

Menggunakan keluaran

<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">

.icon-settings {
  background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}

# Baris perintah: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.png

Pertanyaan yang sering diajukan

Apakah Base64 mempertahankan transparansi PNG?

Ya. Base64 mengenkode byte file tanpa perubahan, sehingga kanal alfa tetap ada. Transparansi hanya hilang jika Anda mengonversi gambar ke JPEG.

Mengapa setiap string Base64 PNG diawali dengan iVBORw0KGgo?

Karakter-karakter tersebut adalah bentuk Base64 dari signature file PNG. Jika string yang diklaim sebagai PNG diawali dengan karakter lain, berarti formatnya berbeda atau datanya rusak.

Bisakah saya langsung menempelkan tangkapan layar?

Bisa. Salin tangkapan layar lalu tempelkan di halaman ini. Browser biasanya meneruskan tangkapan layar yang ditempel sebagai PNG, jadi Anda mendapatkan hasil data:image/png.

Seberapa besar PNG yang layak disematkan sebagai Base64?

Patokan yang umum adalah beberapa kilobyte, hingga sekitar 10 KB. Gambar yang lebih besar sebaiknya disajikan sebagai file terpisah yang dapat di-cache dan dimuat secara paralel oleh browser.