Mempercepat Loading Website dengan Base64 Encoding

Cara Mempercepat Loading atau Pemuatan Halaman Blog/Website dengan menggunakan Base64 Encoding.

Mempercepat Loading Website dengan Base64 Encoding

Pada artikel kali ini, kita akan membahas metode yang dapat disebut dengan istilah Base64 Encoding untuk Gambar.

Gambar yang telah di ubah menjadi Base64 akan menjadi bagian dari HTML dan dapat ditampilkan seperti memuat teks pada dokumen HTML. Bagusnya lagi, gambar tersebut tetap bisa di Download.

Apa itu Base64?

Menurut Wikipedia, Base64 merupakan cara tertua untuk mengubah suatu tipe data dan dapat disisipkan kedalam dokumen HTML. Base64 Encoding dapat mengubah suatu tipe data menjadi teks dan angka yang tentunya aman digunakan atau dimasukkan kedalam dokumen HTML. Gambar adalah salah satu tipe data yang dapat diubah menjadi Base64.

Mengubah Gambar Menjadi Base64

Berikut adalah contoh gambar yang telah diubah menjadi Base64:

Gambar yang telah diubah menjad Base64

Perhatikanlah gambar diatas, jika kalian mengeklik kanan dan membuka gambar tersebut pada tab baru, kalian dapat melihat URL yang berbeda (Bukan URL gambar yang berformat atau memiliki ekstensi .jpg, .png, dan lain-lain). Gambar diatas sudah diubah menjadi Base64.

 Gambar yang diubah menjadi Base64

Terkadang, penulis menggunakan format Base64 untuk icon agar dapat mempercepat dan mengurangi Request atau Resource.

Menggunakan Base64

Terdapat banyak Tools Online yang bisa kalian gunakan untuk mengubah suatu gambar menjadi Base64, beberapa diantaranya adalah:

  1. Browserling;
  2. Codebeauty;
  3. Base64-Image.

Penulis pribadi paling sering menggunakan Tools Base64-Image.

Cara Kerja Base64

Keutungan utama jika kita menggunakan Base64 adalah dapat mempercepat loading Website karena tidak memuat gambar eksternal.

Sebuah halaman Website yang tidak menggunakan Base64 harus memuat empat hal yaitu: HTML, CSS, Gambar 1, Gambar 2, dan seterusnya. Sedangkan suatu halaman Website yang menggunakan Base64 hanya memuat dua hal yaitu: HTML dan CSS saja.

Dampak Penggunaan Base64

Dampak utama yang penulis ketahui ketika menggunakan Base64 adalah Gambar yang telah diubah menjadi Base64 tidak akan ter-index oleh Search Engine. Artinya, gambar yang menggunakan Base64 tidak akan muncul pada Pencarian Gambar di Search Engine atau mesin penelusuran.

Kelebihan Base64

Setiap Website pasti terdapat suatu gambar yang tidak penting dan tidak berdampak apapun. Contohnya adalah Icon seperi Icon Media Sosial, dan lain-lain.

Gambar yang telah diubah menjadi Base64 diatas memang berukuran sangat kecil dan (menurut penulis) tidak perlu ter-index oleh Search Engine karena dapat memperlambat loading Website.

Rata-rata, setiap Website memiliki kurang lebih 6-12 Icon media sosial dan masing-masing icon tersebut memilki HTTP Request.

Cara Menggunakan Base64

Menggunakan Base64 tidak jauh beda dengan memasang Gambar biasa pada dokumen HTML. Berikut adalah kode HTML untuk menampilkan gambar:

<img src="contoh.png">

Untuk memasukkan Base64, kita hanya perlu mengubah "contoh.png" menjadi string Base64:

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">

Setelah diubah menjadi Base64, sumber gambar tidak lagi berasal dari File External.

Masalah Ukuran

Jika gambar yang telah diubah menjadi Base64 berukuran lebih dari 5KB. Penulis tidak merekomendasikan untuk menggunakannya.

Mungkin itu saja sedikit penjelasan tentang Base64 Encoding, semoga kalian dapat memahaminya dengan mudah dan semoga bermanfaat.

Updated: Tuesday, 09 March 2021

Diskusikan

0 Diskusi