BASE64 WEB IMAGE

Data Base64 Encode Image

Assalamu'alaikum wr wb

saya kembali membagikan ilmu yang telah didapat hari ini,Biasanya Jika kita selalu menguplod file image kita ke hosting image,seperti halnya tinypic atau photobucket dll,untuk memasang image ke website,kita harus mempunyai alamat url gambar agar gambar tersebut tampil di post kita

Tetapi saya pernah source di template terkenal,dan saya menemukan alamat url gambar yang panjang sekali
seperti data pada umumnya,dan itu membuat saya penasaran untuk menggunakan serta mencari tahu bagaimana caranya

Saya pun mencari di Google,Awalnya saya belum menemukan situsnya karena saya begitu yakin karena url data tersebut pasti dari sebuah situs.Saya mencari kembali dan akhirnya menemukan keyword yang tepat

Ternyata url data tersebut bernama Data Image Base64 Encode ternyata memang sangat menarik url data ini karena pada awalan urlnya seperti ini data image:/(jenis gambar);base64,<imgdata>
Data Image mendukung 3 ekstensi gambar yaitu jpeg,png dan gif,sehingga urlnya seperti ini :

data image:/jpeg;base64,<imgdata>
data image:/png;base64,<imgdata>
data image:/gif;base64,<imgdata>

Untuk Percobaan Silahkan kalian copy data image di atas dan paste ke adress browser kalian,kemudian entar,lalu akan menampilkan file image seperti ini,contohnya pada file jpeg

dalam adress tersebut hanya ada bacaan data:
itu artinya data image tersebut telah menampilkan file image dengan jenis .jpeg

jika kalian ingin mengubah file image menjadi data image silahkan ke base64.nl
caranya sangat mudah sekali tinggal choose file image di komputer anda terus klik button Base64 Encode Image,lalu data image anda telah jadi dalam hitungan detik dan membutuhkan proses upload yang cepat dan ringan.

bagaimana cara pemasangannya?

Pada HTML kita gunakan <img src="data:image/(jenis file image);base64,<imgdata>"/>

Untuk CSS gunakan seperti ini pada selektor

background-image:url(data:image/(jenis file image);base64,<imgdata>);

contoh pada css :

<style>

.gambar {

 width:80%

 background-image: #000 url(data:image/(jenis file gambar image)lbase64,<imgdata>);

}

</style>

<div class="gambar"></div>