Konversi Gambar ke Base64 dan Kegunaannya pada Website

Ada banyak kegunaan Base64, tentu saja digunakan untuk mengenkripsi sesuatu, baik itu teks maupun gambar. Sangat mudah untuk mengenkripsi atau mendekripsi Base64, dapat dilakukan dengan hampir semua kode program.

Dari waktu ke waktu, Anda mungkin menemukan gambar dengan tipe Base64 di situs web. Tujuan dari aplikasi ini tidak lebih dari untuk meningkatkan kinerja website, salah satunya adalah untuk mengurangi meminta setiap Sumber daya. Dengan demikian, Anda dapat sedikit mempercepat proses pemuatan halaman.

Contoh pemanggilan gambar Base64 dengan tag IMG

Memanggil gambar Base64 sangat sederhana dalam sebuah tag IMG dalam HTML. Berikut adalah contoh kode:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAooAAAEXCAMAAAAdupW+AAADAFBMVEX6+vr...." />

Dengan menggunakan metode ini, browser akan langsung merender halaman beserta HTML yang ada, yaitu tanpa harus memuat ulang gambar dari URL.

Dan jika Anda melihat lebih jauh, sintaksis dalam kode Base64 gambar ini terlihat seperti ini:

data:[<MIME>][;charset=<CHARSET>][;base64],<DATA>

Menambahkan Gambar Base64 ke CSS

Gambar Base64 tidak hanya dapat diintegrasikan ke dalam tag IMG, tetapi juga dapat diinstal ke csstepatnya di properti url latar belakang. Berikut adalah pengaturannya:

.gambar 
{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAooAAAEXCAMAAAAdupW+AAADAFBMVEX6+vr....);
}

Bagaimana cara mengubah gambar ke Base64?

Jika Anda masih tidak tahu cara mengonversi gambar ke kode Base64, Anda dapat melakukannya menggunakan situs web. Salah satu situs web yang menyediakan alat konversi ini adalah Base64-Image.de.

Ukuran maksimum gambar yang dapat dikonversi adalah 1 MB. Jadi jika gambar Anda lebih besar dari ini, yang terbaik adalah mengompresnya terlebih dahulu dengan layanan kompresi gambar online.

Dan setelah mengonversi gambar, kode Base64 akan muncul, siap untuk disalin. Silakan coba terapkan pada kode HTML tag IMG seperti di atas untuk melihat apakah gambar terlihat seperti seharusnya.

Lihat juga: Kumpulan situs web penyedia gambar bebas hak cipta

Keuntungan dan kerugian menggunakan gambar Base64 di situs web

Keuntungan menggunakan metode ini di situs web adalah dapat mengoptimalkan kecepatan permintaan HTTP yang biasanya dipecah menjadi hanya satu file HTML atau CSS. Selain itu, semua gambar juga dapat disimpan dalam database.

Sementara itu, kerugian menggunakan gambar Base64 adalah: ukuran gambar akan meningkat sekitar 20% dari ukuran aslinya. Jadi jika Anda menggunakan gambar Base64 untuk resolusi gambar yang tinggi dan ada banyak kondisi, itu hanya akan menambah ukuran halaman.

Jadi, saya sampai pada kesimpulan bahwa penggunaan gambar Base64 tidak boleh diterapkan ke semua gambar agar ukuran situs web tidak bertambah. Jika digunakan untuk satu atau dua gambar per halaman, itu jauh lebih baik.

Semoga bermanfaat dan selamat mencoba