Cara Merubah Gambar, CSS dan Javascript ke Base64

Apa itu Base64 ?
Menurut Wikipedia, Base64 adalah sekelompok text encoding skema yang mewakili data biner dalam ASCII format string dengan menerjemahkan ke dalam radix-64 representasi. Istilah Base64 berasal dari pengalihan tertentu ke encoding konten MIME.

Nah, jadi ketika sebuah file atau gambar telah dirubah menjadi base64, maka kualitas ataupun fungsi dari file tersebut tidak akan berubah. Hanya saja berubah bentuk eksternalnya saja.

Sebuah gambar yang di muat dari web pasti memerlukan data, dan jika sebuah gambar yang dimuat telah di rubah menjadi base 64, maka untuk tersambung tidak membutuhkan koneksi ke internet.

Saya akan memberikan satu contoh gambar sebelum dan sesudah di konversi ke base64.

Gambar Asli


Base64

Coba diperhatikan kedua gambar diatas, apakah Anda melihat perbedaan?
Saya rasa tidak. Karena base64 memang tidak merubah bentuk eksternal output, namun hanya berubah kode sumbernya.

Untuk memastikan apakah Base64 benar-benar tidak membutuhkan koneksi, silahkan salin URL kedua gambar tersebut dan buka menggunakan komputer lain yang tidak tersambung ke internet. Atau putuskan sementara koneksi komputer Anda dan cobalah menguji.

Berikut alat yang bisa Anda gunakan untuk merubah file menjadi Base64 secara gratis FREE



Contoh penggunaan base64 ekstensi .jpeg:
<img src="data:image/jpeg;base64,Ganti dengan hasil Generated base64"/>
Contoh penggunaan base64 ekstensi .gif:
<img src="data:image/gif;base64,Ganti dengan hasil Generated base64"/>
Contoh penggunaan base64 ekstensi .png:
<img src="data:image/png;base64,Ganti dengan hasil Generated base64"/>
Contoh penggunaan base64 ekstensi .js:
<script type="text/javascript" src="data:text/javascript;base64,Ganti dengan hasil Generated base64"></script>
Contoh penggunaan base64 ekstensi .css:
<link rel="stylesheet" type="text/css" href="data:text/css;base64,Ganti dengan hasil Generated base64"/>
Contoh penggunaan base64 CSS Style:
.yourClass{background: url('data:image/jpeg;base64,Ganti dengan hasil Generated base64');
Contoh penggunaan base64 XML Image:
<xml><image>data:image/jpeg;base64,Ganti dengan hasil Generated base64</image></xml>
URL

3 Tanggapan » Lihat

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini