Base64 adalah sebuah metode yang biasa digunakan untuk melakukan proses encode/decode data biner dari format string ASCII kedalam radix 64. Base64 menggunakan format karakter 7-bit ; A–Z, a–z, 0–9 “+” dan “/“. Dengan mengubah suatu data kedalam format base64 maka hasilnya adalah sebuah karakter yang sangat panjang dan sulit dimengerti. disini saya tidak menjelaskan begitu rinci mengenai pengertian dari base64 encoding. untuk itu mari kita simak cara penggunaan dari Base64 tersebut berikut ini.
 |
| Mengenal Base64 Encoding Dan Cara Penggunaannya |
Bas64 encoding biasanya banyak digunakan untuk memformat sebuah gambar. Contoh penggunaanya bisa anda lihat pada perbedaan kedua Url gambar folder dibawah ini. :
1. Normal
https://3.bp.blogspot.com/-Ib9CzRss8sI/V5PdCRiw06I/AAAAAAAAD98/cQrGCK7Y1qw3DORszvx5faLYE1o38BdjgCLcB/s1600/folder.png
2. Base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD0QAAA9EBmIqJtAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACMSURBVDiNY/y/ioH5gagCKwMaUOB98JfB+P9vdHF0wPh6l9htBgYGFSxyHxmZ/2oLO715is8AJhyaGRgYGPj//WUSJcYF//HI32JgYPiOR/tNFgIWqOGX/q/PwsjMcZyAIXgBC7OgjiUlBjBRonnUgEFkAOMd8rUz3mERuMOl8UD0NUZ2JgYovBb9DQD9OR9CnnG4BgAAAABJRU5ErkJggg==
Seperti yang anda lihat pada gambar diatas. gambar tersebut adalah sama, yaitu folder. akan tetapi Url kedua gambar tersebut berbeda. Jika anda mengunjungi kedua url gambar tersebut, anda akan melihat perbedaanya. yaitu akan terlihat pada saat anda memuat gambar tersebut. untuk url gambar dengan menggunakan base64 akan terasa lebih cepat. karena gambar yang menggunakan base64 encoding diproses dengan satu kali. untuk membukanyapun tidak diperlukan koneksi data.
Untuk penggunaanya sama dengan penggunaan css/ html pada umumnya, yaitu sebagai berikut :
#CSS
.base64 {background: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD0QAAA9EBmIqJtAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACMSURBVDiNY/y/ioH5gagCKwMaUOB98JfB+P9vdHF0wPh6l9htBgYGFSxyHxmZ/2oLO715is8AJhyaGRgYGPj//WUSJcYF//HI32JgYPiOR/tNFgIWqOGX/q/PwsjMcZyAIXgBC7OgjiUlBjBRonnUgEFkAOMd8rUz3mERuMOl8UD0NUZ2JgYovBb9DQD9OR9CnnG4BgAAAABJRU5ErkJggg==”);}
#HTML
<img src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD0QAAA9EBmIqJtAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACMSURBVDiNY/y/ioH5gagCKwMaUOB98JfB+P9vdHF0wPh6l9htBgYGFSxyHxmZ/2oLO715is8AJhyaGRgYGPj//WUSJcYF//HI32JgYPiOR/tNFgIWqOGX/q/PwsjMcZyAIXgBC7OgjiUlBjBRonnUgEFkAOMd8rUz3mERuMOl8UD0NUZ2JgYovBb9DQD9OR9CnnG4BgAAAABJRU5ErkJggg==”/>
Sayangnya base64 encoding ini tidak semua bisa dibaca oleh browser. hanya beberapa browser saja yang bisa membacanya, seperti ; Chrome, Firefox, IE 8+, UCBrowser, Safar, dll.
Base64 ini biasanya banyak dimanfaatkan pada sebuah website agar terlihat lebih cepat/ fast loading saat memuatnya, begitu juga blog ini.
Untuk mengconvert sebuah data/ file gambar keadalam Base64 biasanya menggunakan tools yang disediakan secara online pada beberapa situs berikut ini :
1. https://www.base64-image.de
2. https://www.base64decode.org
3. http://www.motobit.com/util/base64-decoder-encoder.asp
4. http://base64converter.com
5. http://www.freeformatter.com/base64-encoder.htm
– Dan lainnya…
Mungkin itu saja penjelasan yang bisa saya bagikan kali ini mengenai Mengenal Base64 Encoding Dan Cara Penggunaannya, semoga bisa bermanfaat dan jangan lupa untuk melihat artikel keren lainnya yang tersedia didalam blog ini. terimakasih. 😀
