base64webimage

Base 64 Web Image

• Pengertian Base64

Base64 adalah metoda yang digunakan untuk melakukan encoding (penyandian) terhadap data binary sehingga menjadi “printable” atau pendek katanya data binary disandikan menjadi format 7-bit character semacam bagian isi email.
Saya hanya akan menjelaskan arti inti dari sebuah base64, karena apabila kita jelaskan akan sangat panjang atau Anda juga bisa membacanya lengkap di Wikipedia http://en.wikipedia.org/wiki/Base64.
Intinya Base64 adalah kode yang disusun oleh 64 karakter, dimana karakternya ( berdasarkan : RFC 1421 ) terdiri dari ( A-Z, a-z, 0-9, +, /)  atau “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/”. Tapi ada satu karater tambahan yaitu “=”, yang fungsinya untuk menggenapkan atau istilahnya sebagai pengisi pad.

• Support

Base64 tentunya tidak dapat dibaca di semua browser, oleh karena itu base64 hanya support pada browser dibawah ini.

• Internet Explorer 8+
• Google Chrome
• Opera Mini
• Firefox
• Safari

Kita juga bisa merubah file ke base64 seperti Gambar, Font, File HTML, CSS, JS dll.

• Alat Untuk Merubah File Ke Base64
• www.motobit.com/util/base64-decoder-encoder.asp‎
• www.base64decode.org
• webcodertools.com/imagetobase64converter‎
• www.freeformatter.com/base64-encoder.html
• www.opinionatedgeek.com/dotnet/tools/base64encode/

Dari alat diatas Saya sering menggunakanwebcodertools.com/imagetobase64converter‎ karena lebih mudah dan cepat ( menurut Saya ).

• Cara Merubah Gambar Menjadi Base64

1. Buka Base64 Image Encoder.2. Lalu klik gambar "Upload Image".
            

3. Lalu anda harus mengupload gambar yang akan

diubah menjadi base64. Format gambar yang bisa
diubah menjad base64 jpg, png, dan gif. Tekan pilih
file, lalu pilih gambar yang akan diubah menjad
base64, dan klik encode image.

4. Setelah itu akan muncul hasil gambar anda yang
anda ubah menjadi base64, silakan ambil kodenya
sesuai kebutuhan.

Read More

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>

Read More