Cara Mengubah Gambar Menjadi Kode Base64

Oleh Rafid Aslam

28 Juli 2014

Base64 merupakan metode untuk melakukan encoding terhadap data binary menjadi printable. Sudah kita ketahui dari namanya Base64 memiliki 64 karakter terdiri dari A sampai Z, a-z, 0-9, +, /, dan =. Dengan Base64 ini kita bisa mengubah gambar menjadi kode Base64 yang bisa dilihat pada browser-browser tertentu. Jika anda belum pernah melihat kode Base64 akan saya tunjukkan di sini.

Contoh gambar Base64

http://2.bp.blogspot.com/-_rnhzBu8sZo/UEGdgI5VKWI/AAAAAAAAAYY/9c5qJnJmspk/s1600/image002.gif

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

Coba lihat kedua gambar di atas, gambar yang pertama tidak menggunakan Base64 sedangkan gambar yang kedua memakai Base64. Saat anda memasukkan gambar Base64 ke HTML maka ukuran gambar tersebut akan masuk ke HTML tersebut, contohnya ukuran gambar tersebut adalah 4 KB maka saat dimasukkan ke HTML ukurannya akan bertambah 4 KB. Coba anda bandingkan dengan memuat URL tersebut ke browser anda, coba gambar yang pertama pasti loading akan sedikit lambat, sedangkan yang ke dua langsung loading karena gambar sudah tertanam di dalam kode itu.

Browser yang support Base64

Tentu saja semua browser tidak support dengan Base64, browser handphone pun tidak bisa, jika browser anda tidak support dengan Base64 maka gambar tersebut pasti tidak kelihatan, di bawah ini adalah browser-browser yang support dengan Base64.

• Google Chrome
• Firefox
• Internet Explorer 8 atau lebih
• Opera Mini
• Safari

Browser di atas adalah browser yang sudah pasti support Base64, selain browser-browser di atas mungkin tidak support dengan Base64.

Alat yang bisa mengubah file dari gambar ke Base64

• www.motobit.com/util/base64-decoder-encoder.asp‎
• www.base64decode.org
• www.opinionatedgeek.com/dotnet/tools/base64encode/
• webcodertools.com/imagetobase64converter‎
• www.freeformatter.com/base64-encoder.html‎

Dari alat-alat di atas, dalam tutorial ini kita memakai alat yang ke 4 karena lebih simpel dan efisien.

Langkah pertama: Masuk ke halaman ini http://webcodertools.com/imagetobase64converter

Langkah kedua: Mengupload gambar

Silahkan pilih gambar sesuai selera anda yang mau diubah menjadi Base64, klik Pilih file lalu setelah selesai memilih filenya tinggal klik Upload.

Langkah terakhir: Menerapkan gambar

Setelah gambar diupload maka halaman akan loading dan memunculkan kode Base64 gambar yang tadi kita upload. Jika anda ingin menerapkannya pada post silahkan pilih yang Image tag, dan jika anda ingin menerapkan pada css silahkan pilih yang bawahnya.

Demikian post yang bisa saya tulis, jika anda meminta penjelasan saya dengan senantiasa akan menjawabnya di kotak komentar di bawah ini.

Tag : Tips Blogger

Bagikan :

Tweet