Ads by Yasya El Hakim
Cara Mempercepat Loading Blog/Website menggunakan Base64 Encoding

Banyak orang yang tidak memperhatikan bahwasanya gambar dapat dimasukkan kedalam kode HTML. Metode ini dapat disebut dengan istilah Base64 Encoding.

Gambar yang telah di ubah dengan Base64 akan menjadi bagian dari HTML dan dapat ditampilkan seperti memuat teks pada dokumen HTML. Dan 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 tipe data menjadi teks dan angka yang aman digunakan dalam dokumen HTML. Gamabr adalah salah satu tipe data yang dapat diubah menjadi Base64.

Gambar yang diubah menjadi Base64


Apakah anda sudah melihat gambar yang saya gunakan diatas? Jika anda mengeklik kanan dan membuka gambar tersebut pada tab baru, anda dapat melihat URL yang berbeda bukan? Gambar tersebut sudah diubah menjadi Base64.

Terkadang, saya menggunakan Base64 untuk icon Blog agar dapat mempercepat dan mengurangi request.

Menggunakan Base64

Terdapat banyak Online Tools yang bisa anda gunakan untuk mengubah suatu gambar menjadi Base64.

Berikut adalah beberapa Tools yang dapat anda gunakan:
  1. Browserling
  2. Codebeauty
  3. Base64-Image 
Saya pribadi paling sering menggunakan Tools Base64-Image.

Bagaimana Base64 Bekerja?

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

Sebuah halaman Blog/Web yang tidak menggunakan Base64 harus memuat empat hal yaitu: HTML, CSS, Gambar 1, Gambar 2, dst.

Sebuah halaman Blog/Web yang menggunakan Base64 hanya memuat dua hal yaitu: HTML dan CSS saja.

Dampak Penggunaan Base64

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

Mengapa kita Harus Menggunakan Base64?

Pada setiap Blog/Website pasti terdapat suatu gambar yang tidak penting dan tidak berdampak apapun. Contohnya adalah Icon Blog, Social Icon, Social Share Icon, dll.

Gambar diatas memang berukuran kecil dan (menurut saya) tidak perlu di index oleh Google karena dapat memperlambat loading Blog/Website anda.

Rata-rata, setiap Blog/Website memiliki 6-12 Social Icon dan masing-masing icon tersebut memilki HTTP Request.

Bagaimana Cara Menggunakan Base64?

Contoh: Berikut adalah kode HTML untuk menampilkan gambar:
<img src="contoh.png">

Ubah teks "contoh.png" menjadi Base64:
<img src="data:image/png;base64,jBNPTe1LHhpSSSSMDIjRIhSSSXSSSSFDVSASSSNYjaUySSSSSCBN">

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. Saya tidak merekomendasikan anda untuk menggunakannya.

Mungkin itu saja sedikit penjelasan tentang Base64 Encoding, semoga anda dapat memahaminya dan semoga bermanfaat.

0Komentar

Sebelumnya Selanjutnya