Ada banyak sekali kegunaan dari Base64, yang sepastinya itu dipakai untuk meng-enkripsi berbagai hal, baik itu teks ataupun gambar. Melakukan enkripsi atau dekripsi terhadap Base64 sangatlah mudah, itu bisa dilakukan hampir pada semua kode pemrograman.
Sesekali, mungkin kamu pernah menemukan gambar dengan jenis Base64 pada suatu website. Tujuan dari hal tersebut diterapkan tidak lain adalah untuk meningkatkan performa pada website, salah satunya adalah mengurangi tingkat request tiap resource. Jadi dengan cara ini, sebenarnya bisa sedikit mempercepat proses memuat halaman.
Contoh Pemanggilan Gambar Base64 dengan Tag IMG
Pemanggilan gambar Base64 sangat simpel pada tag IMG di HTML. Berikut ini contoh kodenya:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAooAAAEXCAMAAAAdupW+AAADAFBMVEX6+vr...." />
Dengan memakai metode ini, browser akan langsung me-render halaman bersamaan dengan kode HTML yang ada, alias tanpa harus memuat gambar dari URL lagi.
Dan jika diteliti lebih lanjut, syntax pada kode Base64 gambar ini adalah sebagai berikut:
data:[<MIME>][;charset=<CHARSET>][;base64],<DATA>
Menambahkan Gambar Base64 pada CSS
Tak cuma di tag IMG saja gambar Base64 bisa di-integrasikan, namun juga bisa dipasang pada CSS, tepatnya pada properti background url. Berikut ini pemasangannya:
.gambar
{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAooAAAEXCAMAAAAdupW+AAADAFBMVEX6+vr....);
}
Bagaimana Cara Konversi Gambar ke Base64?
Apabila kamu masih belum tahu bagaimana cara menjadikan gambar menjadi kode Base64, sebenarnya itu bisa dilakukan dengan bantuan situs web. Salah satu website yang menyediakan alat konversi ini adalah Base64-Image.de.
Maksimal ukuran gambar yang bisa dikonversi disana adalah 1 MB. Jadi apabila ukuran gambar kamu lebih dari itu, maka sebaiknya untuk mengompresnya terlebih dahulu dengan layanan kompres gambar yang ada di internet.
Dan setelah meng-konversi gambar, nantinya akan muncul kode Base64 yang siap untuk disalin. Silakan coba untuk menerapkannya pada kode HTML Tag IMG seperti diatas untuk mengetahui apakah gambarnya muncul sesuai harapan.
Kelebihan dan Kekurangan Memakai Gambar Base64 pada Website
Kelebihan dalam menggunakan metode ini pada website adalah dapat mengooptimalkan tingkat HTTP request yang biasanya terpisah menjadi satu file HTML atau CSS saja. Selain itu segala gambar juga bisa disimpan pada database.
Sementara itu untuk kekurangan dalam memakai gambar Base64 adalah ukuran gambar akan meningkat kurang lebihnya 20% dari ukuran aslinya. Jadi jika memakai gambar Base64 untuk resolusi gambar tinggi dan kondisinya ada banyak, ini hanya akan membuat ukuran halaman menjadi lebih besar.
Jadi saya simpulkan untuk penggunaan gambar Base64 ini tidak harus diterapkan untuk seluruh gambar supaya ukuran website tidak semakin besar. Jika dipakai untuk satu atau dua gambar per halaman, itu jauh lebih baik.
Semoga bermanfaat dan Selamat mencoba
