Sunday, October 25, 2015

Cara Inline Gambar Base64 Di Blogger

gambar base64

Base 64 adalah sebuah metode encoding terhadap data binary sehingga menjadi lebih printable. Nah Kali ini saya akan memberikan sedikit penjelasan tentang cara inline gambar blog ke dalam base64, Langkah ini sekaligus sebagai cara alternatif mengurangi jumlah permintaan HTTP untuk mempercepat loading blog.
Baca Cara Mengurangi Jumlah HTTP Request

Apa hubungannya ?

Sebuah objek gambar yang terdapat dalam sebuah komponen web/situs pastilah memerlukan tempat penyimpanan agar dapat diakses oleh browser. Untuk menampilkannya kita memerlukan sebuah link url yang mengarah ke penyimpanan gambar tersebut. Jika dalam sebuah situs web/blog terdapat 100 link gambar dengan tempat penyimpanan yang berbeda - beda , maka browser otomatis akan memuat satu per satu gambar tersebut sampai terbuka seluruhnya.

Dalam proses ini tentunya akan membutuhkan waktu lebih lama yang akan mempengaruhi kecepatan loading sebuah situs web/blog. Namun jika kita menggunakan metode base 64 ini kita tidak akan di permasalahkan lagi dengan sebuah permintaan HTTP, karena browser akan memuat secara langsung dan lebih cepat.

Contoh Format Gambar Dengan Data URL Base64


<img src="data:image/jpg;base64,dan seterusnya"/>

Kode source encoding base64 diawali dengan " data:image/jpg;base64,dan seterusnya "

Langkah langkah Inline Image Base64

Memasang gambar base 64 di Postingan Blog


Upload gambar menggunakan tool encoder base64 yang ada di blog ini kemudian copy code base64nya. Setelah itu anda bisa memilih salah satu metode inlinenya mulai dari xhtml, base string, maupun css background. Karena kita akan memasukkan gambar di postingan maka kita pilih metodenya dengan xhtml. Copy kode dan masukkan pada mode HTML di area posting blog.

Contoh :

Setiap kita selesai memasukkan gambar dalam draft postingan akan diperoleh kode seperti dibawah ini:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-G3WbMB-4Nxxxx/s1600/images+(10).jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="http://2.bp.blogspot.com/-G3WbMB-4Nxxxx/s1600/images+(10).jpg" /></a>
</div>

Berdasarkan kode diatas secara default kita telah membuat inline css atribut dalam elemen HTML class='separator' yang akan berdampak pada validasi HTML5. Untuk mengatasi inline css attribute blogger kita harus membuatkan style sendiri pada class separator tersebut dengan menambahkan kode css pada template blog kita.

Masukkan kode dibawah ini sebelum kode ]]></b:skin> atau </style>

.separator{text-align:center;} // jika anda ingin membuat gambar posisi ditengah //
.separator{text-align:left} // jika anda ingin membuat gambar posisi di sebelah kiri //
Jadi nanti secara keseluruhan kode gambarnya menjadi seperti dibawah ini :

<div class="separator">
 <img src="data:image/jpg;base64,dan seterusnya"/>
</div>

Memasang Gambar Base64 di Template HTML


Cari format url gambar dan ganti dengan gambar yang sudah diencode ke base64 tadi. Pada intinya kita hanya mengubah source url gambar ke dalam source data encoding base64.


<img src="data:image/jpg;base64,dan seterusnya"/>

Memasang Gambar Base64 di CSS Background



<style type="text/css">
div.image {
    width:            100px;
    height:           100px;
    background-image: url('data:image/jpg;base64 dan seterusnya');
}
</style>

Note :
Agar tidak memperbesar ukuran HTML setelah iniline sebaiknya gunakan gambar dengan ukuran dibawah 10 kb dengan format jpg sebelum di encode base64. Anda bisa mengubahnya dengan Riot software secara offline.