Dekoder dan Penampil Gambar Base64 | Mengonversi Base64 ke Gambar
Dekode dan pratinjau string gambar yang terkode base64 secara instan. Mendukung format umum seperti JPEG, PNG, GIF dan penanganan kesalahan untuk input yang tidak valid.
Dekoder dan Penampil Gambar Base64
Tempelkan string gambar yang dienkode base64 dan dekode untuk melihat gambar.
Prabaca Gambar
Tidak ada gambar untuk ditampilkan. Tempelkan string base64 untuk melihatnya didekode secara otomatis.
Mendukung format gambar JPEG, PNG, GIF, dan format umum lainnya.
Instruksi
1. Tempelkan string gambar yang dienkode base64 di area teks di atas.
2. Gambar akan didekode secara otomatis saat Anda mengetik, atau klik tombol 'Dekode Gambar'.
3. Gambar yang telah didekode akan muncul di area prabaca di bawah.
Catatan: String harus diawali dengan 'data:image/' untuk hasil terbaik, tetapi alat ini akan mencoba mendekode string tanpa awalan ini juga.
Dokumentasi
Dekoder dan Penampil Gambar Base64
Pendahuluan
Base64 adalah skema pengkodean biner-ke-teks yang mewakili data biner dalam format string ASCII. Ini umum digunakan untuk menyematkan data gambar langsung di dalam HTML, CSS, JavaScript, JSON, dan format berbasis teks lainnya di mana data biner tidak dapat disertakan secara langsung. Alat ini memungkinkan Anda untuk mendekode string gambar yang dikodekan dalam base64 dan melihat gambar yang dihasilkan langsung di browser Anda.
Pengkodean base64 meningkatkan ukuran data sekitar 33% dibandingkan dengan biner asli, tetapi memungkinkan gambar disertakan langsung dalam dokumen berbasis teks tanpa memerlukan unduhan file terpisah. Ini bisa sangat berguna untuk gambar kecil seperti ikon, logo, atau grafik sederhana di mana kenyamanan penyematan lebih diutamakan daripada peningkatan ukuran.
Alat Dekoder Gambar Base64 kami menyediakan antarmuka sederhana di mana Anda dapat menempelkan string gambar yang dikodekan dalam base64 dan segera melihat gambar yang terdecode. Ini mendukung semua format gambar umum termasuk JPEG, PNG, GIF, WebP, dan SVG, dan dapat menangani baik format URL data (dengan awalan data:image/...) maupun string base64 mentah.
Detail Teknis
Format Pengkodean Base64
Pengkodean base64 mengonversi data biner menjadi satu set 64 karakter ASCII (A-Z, a-z, 0-9, +, dan /), dengan = digunakan untuk padding. Untuk gambar di web, data base64 biasanya diformat sebagai URL data dengan struktur berikut:
1data:[<media type>][;base64],<data>
2Sebagai contoh, gambar PNG yang dikodekan dalam base64 mungkin terlihat seperti ini:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2Komponen dari format ini adalah:
data:- Skema URLimage/png- Tipe MIME dari data;base64- Metode pengkodean,- Pembatas antara header dan data- Data yang dikodekan dalam base64 yang sebenarnya
Proses Dekoding
Saat mendekode string gambar base64, langkah-langkah berikut terjadi:
- String diparsing untuk mengidentifikasi apakah itu mengandung awalan URL data
- Jika ada awalan, tipe MIME diekstrak untuk menentukan format gambar
- Bagian data base64 diisolasi dan didekode menjadi data biner
- Data biner diubah menjadi Blob atau URL objek yang dapat ditampilkan sebagai gambar
Jika input tidak menyertakan awalan URL data, dekoder mencoba memperlakukannya sebagai data base64 mentah dan menyimpulkan tipe gambar dari header biner yang terdecode atau default ke PNG.
Format Gambar yang Didukung
Alat ini mendukung semua format gambar web umum:
| Format | Tipe MIME | Kasus Penggunaan Umum |
|---|---|---|
| JPEG | image/jpeg | Foto, gambar kompleks dengan banyak warna |
| PNG | image/png | Gambar yang memerlukan transparansi, tangkapan layar, grafik |
| GIF | image/gif | Animasi sederhana, gambar dengan warna terbatas |
| WebP | image/webp | Format modern dengan kompresi lebih baik daripada JPEG/PNG |
| SVG | image/svg+xml | Grafik vektor, ikon dan ilustrasi yang dapat diskalakan |
Kasus Penggunaan
Gambar yang dikodekan dalam base64 memiliki beberapa aplikasi praktis dalam pengembangan web dan di luar itu:
-
Menyematkan gambar dalam HTML/CSS/JS: Mengurangi permintaan HTTP dengan menyertakan gambar langsung dalam kode Anda, yang dapat meningkatkan waktu muat halaman untuk gambar kecil.
-
Template email: Memastikan gambar ditampilkan dengan benar di klien email yang memblokir gambar eksternal secara default.
-
Aplikasi satu file: Membuat aplikasi HTML yang mandiri di mana semua sumber daya disematkan dalam satu file.
-
Respons API: Menyertakan data gambar langsung dalam respons JSON tanpa memerlukan titik akhir gambar terpisah.
-
URL data dalam CSS: Menyematkan ikon kecil dan gambar latar langsung dalam file CSS.
-
Manipulasi kanvas: Memfasilitasi penyimpanan dan transfer data gambar kanvas.
-
Aplikasi offline: Menyimpan gambar sebagai string teks dalam localStorage atau IndexedDB.
Pertimbangan Kinerja
Meskipun pengkodean base64 menawarkan kenyamanan, ada trade-off yang menyertainya:
- Ukuran file yang meningkat: Pengkodean base64 meningkatkan ukuran data sekitar 33%.
- Tidak ada caching browser: Gambar yang disematkan tidak dapat di-cache secara terpisah seperti file gambar eksternal.
- Overhead parsing: Browser harus mendekode string base64 sebelum merender.
- Tantangan pemeliharaan: Gambar yang disematkan lebih sulit untuk diperbarui daripada file yang dirujuk.
Untuk kinerja optimal, pengkodean base64 umumnya hanya disarankan untuk gambar kecil (di bawah 10KB). Gambar yang lebih besar biasanya lebih baik dilayani sebagai file terpisah yang dapat di-cache dan dioptimalkan dengan baik.
Alternatif
Beberapa alternatif untuk pengkodean base64 ada untuk berbagai kasus penggunaan:
-
Penyematan SVG dalam garis: Untuk grafik vektor, SVG dalam garis seringkali memberikan kinerja dan fleksibilitas yang lebih baik daripada SVG yang dikodekan dalam base64.
-
WebP dan format gambar modern: Ini memberikan kompresi yang lebih baik daripada JPEG/PNG yang dikodekan dalam base64.
-
Sprite gambar: Menggabungkan beberapa gambar kecil menjadi satu file dan menggunakan posisi CSS.
-
CDN (Jaringan Pengiriman Konten): Untuk situs produksi, menyajikan gambar yang dioptimalkan dari CDN seringkali lebih efisien.
-
Kompresi data: Untuk mentransfer sejumlah besar data biner, algoritma kompresi khusus seperti gzip atau Brotli lebih efisien daripada base64.
Contoh Kode
Berikut adalah contoh bekerja dengan gambar yang dikodekan dalam base64 dalam berbagai bahasa pemrograman:
1// Mengonversi gambar menjadi base64 dalam JavaScript (browser)
2function imageToBase64(imgElement) {
3 const canvas = document.createElement('canvas');
4 canvas.width = imgElement.width;
5 canvas.height = imgElement.height;
6
7 const ctx = canvas.getContext('2d');
8 ctx.drawImage(imgElement, 0, 0);
9
10 // Mendapatkan sebagai URL data (string base64)
11 return canvas.toDataURL('image/png');
12}
13
14// Menampilkan gambar base64
15function displayBase64Image(base64String) {
16 const img = new Image();
17
18 // Menangani string tanpa awalan URL data
19 if (!base64String.startsWith('data:')) {
20 base64String = `data:image/png;base64,${base64String}`;
21 }
22
23 img.src = base64String;
24 document.body.appendChild(img);
25}
261import base64
2from PIL import Image
3from io import BytesIO
4
5# Mengonversi file gambar menjadi base64
6def image_to_base64(image_path):
7 with open(image_path, "rb") as image_file:
8 encoded_string = base64.b64encode(image_file.read())
9 return encoded_string.decode('utf-8')
10
11# Mengonversi base64 menjadi gambar dan menyimpan
12def base64_to_image(base64_string, output_path):
13 # Menghapus awalan URL data jika ada
14 if ',' in base64_string:
15 base64_string = base64_string.split(',')[1]
16
17 image_data = base64.b64decode(base64_string)
18 image = Image.open(BytesIO(image_data))
19 image.save(output_path)
20
21# Contoh penggunaan
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Cetak awal string
24
25base64_to_image(base64_str, "output.jpg")
261<?php
2// Mengonversi file gambar menjadi base64 dalam PHP
3function imageToBase64($path) {
4 $type = pathinfo($path, PATHINFO_EXTENSION);
5 $data = file_get_contents($path);
6 return 'data:image/' . $type . ';base64,' . base64_encode($data);
7}
8
9// Mengonversi base64 menjadi gambar dan menyimpan
10function base64ToImage($base64String, $outputPath) {
11 // Mengekstrak data biner yang dikodekan dalam base64
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // Dekode dan simpan
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// Contoh penggunaan
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Cetak awal string
23
24base64ToImage($base64Image, 'output.jpg');
25?>
261import java.io.File;
2import java.io.FileOutputStream;
3import java.io.IOException;
4import java.nio.file.Files;
5import java.util.Base64;
6
7public class Base64ImageUtil {
8
9 // Mengonversi file gambar menjadi base64
10 public static String imageToBase64(String imagePath) throws IOException {
11 File file = new File(imagePath);
12 byte[] fileContent = Files.readAllBytes(file.toPath());
13 String extension = imagePath.substring(imagePath.lastIndexOf(".") + 1);
14 String base64String = Base64.getEncoder().encodeToString(fileContent);
15
16 return "data:image/" + extension + ";base64," + base64String;
17 }
18
19 // Mengonversi base64 menjadi gambar dan menyimpan
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // Menghapus awalan URL data jika ada
22 if (base64String.contains(",")) {
23 base64String = base64String.split(",")[1];
24 }
25
26 byte[] decodedBytes = Base64.getDecoder().decode(base64String);
27
28 try (FileOutputStream fos = new FileOutputStream(outputPath)) {
29 fos.write(decodedBytes);
30 }
31 }
32
33 public static void main(String[] args) throws IOException {
34 String base64Image = imageToBase64("input.jpg");
35 System.out.println(base64Image.substring(0, 50) + "..."); // Cetak awal string
36
37 base64ToImage(base64Image, "output.jpg");
38 }
39}
401using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7 // Mengonversi file gambar menjadi base64
8 public static string ImageToBase64(string imagePath)
9 {
10 byte[] imageBytes = File.ReadAllBytes(imagePath);
11 string base64String = Convert.ToBase64String(imageBytes);
12
13 string extension = Path.GetExtension(imagePath).TrimStart('.').ToLower();
14 return $"data:image/{extension};base64,{base64String}";
15 }
16
17 // Mengonversi base64 menjadi gambar dan menyimpan
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // Menghapus awalan URL data jika ada
21 if (base64String.Contains(","))
22 {
23 base64String = base64String.Split(',')[1];
24 }
25
26 byte[] imageBytes = Convert.FromBase64String(base64String);
27 File.WriteAllBytes(outputPath, imageBytes);
28 }
29
30 static void Main()
31 {
32 string base64Image = ImageToBase64("input.jpg");
33 Console.WriteLine(base64Image.Substring(0, 50) + "..."); // Cetak awal string
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
381require 'base64'
2
3# Mengonversi file gambar menjadi base64
4def image_to_base64(image_path)
5 extension = File.extname(image_path).delete('.')
6 base64_data = Base64.strict_encode64(File.read(image_path))
7 "data:image/#{extension};base64,#{base64_data}"
8end
9
10# Mengonversi base64 menjadi gambar dan menyimpan
11def base64_to_image(base64_string, output_path)
12 # Menghapus awalan URL data jika ada
13 if base64_string.include?(',')
14 base64_string = base64_string.split(',')[1]
15 end
16
17 File.open(output_path, 'wb') do |file|
18 file.write(Base64.decode64(base64_string))
19 end
20end
21
22# Contoh penggunaan
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # Cetak awal string
25
26base64_to_image(base64_image, 'output.jpg')
271' Fungsi VBA Excel untuk mengkodekan file menjadi base64
2Function FileToBase64(filePath As String) As String
3 Dim fileNum As Integer
4 Dim fileData() As Byte
5 Dim objXML As Object
6 Dim objNode As Object
7
8 fileNum = FreeFile
9 Open filePath For Binary Access Read As fileNum
10 ReDim fileData(LOF(fileNum) - 1)
11 Get fileNum, , fileData
12 Close fileNum
13
14 Set objXML = CreateObject("MSXML2.DOMDocument")
15 Set objNode = objXML.createElement("b64")
16
17 objNode.DataType = "bin.base64"
18 objNode.nodeTypedValue = fileData
19
20 FileToBase64 = objNode.Text
21
22 Set objNode = Nothing
23 Set objXML = Nothing
24End Function
25
26' Penggunaan di Excel:
27' =FileToBase64("C:\path\to\image.jpg")
28Implementasi HTML
Berikut cara menyematkan gambar base64 langsung dalam HTML:
1<!-- Menyematkan gambar base64 langsung dalam HTML -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Gambar yang dikodekan dalam Base64">
3
4<!-- Menggunakan CSS dengan gambar latar base64 -->
5<style>
6.base64-bg {
7 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8 width: 100px;
9 height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13Sejarah
Pengkodean base64 memiliki akar dalam pengembangan sistem email elektronik pada tahun 1970-an. Ini dirancang untuk menyelesaikan masalah mentransmisikan data biner melalui sistem yang dirancang hanya untuk menangani teks ASCII.
Skema pengkodean ini diformalkan pada tahun 1987 dengan publikasi RFC 989, yang mendefinisikan standar Privacy Enhanced Mail (PEM). Ini kemudian diperbarui dalam RFC 1421 dan standar terkait lainnya. Istilah "base64" sendiri berasal dari fakta bahwa pengkodean menggunakan 64 karakter ASCII yang berbeda untuk mewakili data biner.
Dalam konteks pengembangan web, gambar yang dikodekan dalam base64 semakin populer dengan munculnya URL data, yang pertama kali diusulkan dalam RFC 2397 pada tahun 1998. Ini memungkinkan data biner disertakan langsung dalam HTML, CSS, dan dokumen web lainnya.
Penggunaan gambar yang dikodekan dalam base64 dalam pengembangan web menjadi lebih luas pada pertengahan 2000-an saat pengembang mencari cara untuk mengurangi permintaan HTTP dan meningkatkan waktu muat halaman. Teknik ini sangat diterima selama munculnya pengembangan web seluler, di mana meminimalkan permintaan sangat penting untuk kinerja pada koneksi seluler yang lebih lambat.
Saat ini, pengkodean base64 tetap menjadi alat penting dalam pengembangan web, meskipun penggunaannya telah menjadi lebih terarah seiring dengan perkembangan praktik terbaik. Pendekatan modern cenderung menggunakan pengkodean base64 secara selektif untuk gambar kecil yang kritis sambil memanfaatkan metode pengiriman yang lebih efisien seperti HTTP/2 untuk aset yang lebih besar.
Referensi
Umpan Balik
Klik toast umpan balik untuk mulai memberikan umpan balik tentang alat ini
Alat Terkait
Temukan lebih banyak alat yang mungkin berguna untuk alur kerja Anda