9 Mei 2014

Mengubah gambar menjadi base64 hanya dengan sebuah browser

Base64 adalah sebuah gambar yang telah dikonversi menjadi kumpulan karakter yang akan tetap menampilkan wujudnya jika dibuka dengan browser/support pada html, dengan kata lain gambar ini di-encode menjadi karakter yang terus terang saya masih mempelajarinya, bukan Biner, bukan pula ASCII, tampaknya ia adalah String, itupun mungkin. Penjelasan tentang base64 encode bisa anda temukan di google, bahkan tidak sedikit artikel yang membahas tentang cara untuk mengubah sebuah gambar menjadi base64 melalui media online. Jika masih bingung dengan base64, copy code dibawah ini lalu paste ke-address bar browser dan tekan enter :

data:image/png;base64,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


Kumpulan karakter diatas adalah sebuah gambar yang tidak perlu di-upload atau di-hosting lagi, karena gambar ini langsung tersimpan pada html. Contoh dibawah adalah cara penggunaan base64 pada HTML dan CSS:

HTML

<img src="code-diatas" />

CSS

div.image {
  width:100px;
  height:100px;
  background-image:url(code-diatas);
}

Code diatas selalu diawali dengan data:image/png;base64, atau image/jpg dan image/gif. Tergantung formatnya. Dan katanya base64 hanya bisa dikonversi dari jenis ketiga format tersebut. Baiklah jika anda malas mengikuti cara dibawah silahkan menuju www.base64-image.de untuk melakukan konversi secara online, yang ingin konversi secara manual, ikuti langkah dibawah.

Buka browser firefox, lalu copy code dibawah ke-address bar, agar mode mozilla menjadi layaknya text editor.

data:text/html, <html contenteditable>

Lalu drag and drop gambar yang ingin di konversi ke dalam browser :

Konversi gambar bitmap menjadi base64



Setelah gambar sudah berada pada browser, simpan halaman seperti biasa, dan pada bagian save as type, pilih web page, complete. Lalu buka file yang disimpan tadi dengan cara, klik kanan file-open with-notepad.

Base64 encode


Setelah dibuka dengan notepad, copy code dari data sampai bagian akhir sebelum tanda " sebelah alt, lihat gambar diatas. Waaw.. Satu gambar saja panjangnya bukan main, belum ada gambar yang saya konversi menjadi base64 pada blog ini selain dari contoh, namun gosip beredar, base64 lebih cepat dalam proses page-load, karena gambar tidak berada pada server lain, melainkan pada html langsung. Semoga bermanfaat.

Mungkin anda ingin membaca artikel dibawah : 
  1. Tentang keylogger
  2. Apa yang dicari teman anda dari google...?
  3. Cara melihat dan memahami kode CSS pada web/blog orang lain
  4. Ctrl+Alt+Del menjadi shutdown
Tidak ada komentar:
Posting Komentar

Jika ada artikel yang tidak Anda mengerti, maka gunakan fasilitas kotak komentar ini atau pada halaman kontak untuk menanyakannya.

Best Regard


Decky canser