Beginilah cara meringankan gambar dengan Encode Base64. Hasilnya, benar-benar diluar perkiraan anda. Meski blog anda banyak gambar tapi tetap akan ringan dibuka
Setelah anda pahami Apa Itu Base64 dan Fungsinya untuk Blog Anda, maka sekarang mari kita praktekkan pada salah satu gambar blog anda sebagai demo. Bagaimana caranya?
Jika kemampuan anda berpikir coding sudah encer, maka anda bisa lakukan sendiri secara manual dengan menerapkan algoritma enkripsi dan deskripsi. Atau yang dikenal dengan kriptografi. Tapi jika tidak, maka lebih baik gunakan layanan online yang kini sudah banyak tersedia di internet. Cara kerjanya sangat praktis. Hanya dengan mengupload gambar anda ke sebuah situs convert image to base64, maka hasilnya akan langsung muncul begitu gambar tersebut berhasil terkirim ke situs penyedian layanan tersebut.
Lalu dimana situs yang menyediakan layanan ini? Sangat banyak. Tapi sebagai contoh, saya akan menggunakan layanan gratis dari situs Base64 Image Encoder. Untuk melakukannya sekarang silahkan anda buka situs resminya dengan alamat https://www.base64-image.de
Setelah halaman depannya terbuka seperti ini maka langsung saja klik tombol OR CLIK HERE
Sekarang carilah dimana gambar anda tersimpan di komputer atau laptop anda lalu klik file gambar tersebut. Selanjutnya klik tombol Open. Lalu tunggu proses upload tersebut sampai selesai, hingga akhirnya muncul tampilan seperti dibawah ini.
Klik gambar untuk tampilan lebih besar
Nah jika sudah muncul tampilan seperti ini, berarti proses encoding gambar anda menjadi Base64 sudah berhasil. Selanjutnya anda tinggal ambil kode base64-nya. Caranya kliklah pada menu Show Code(lihat no.4) sehingga terbuka jendela yang berisi detail file gambarnya seperti ini:
Nah itulah gambar tampilan dari file original gambar yang saya gunakan pada contoh ini. Selanjutnya anda tinggal mengambil script atau kodenya. Caranya kliklah pada tombol selected all. Lalu paste dimana gambar itu ingin anda sisipkan atau ditampilkan di bog ada. Sebagai contoh inilah hasil copy paste dari gambar diatas yang sudah diencode ke base64.
data:image/png;base64,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
Panjang amat ya kodenya?
Soal keluhan nanti akan saya tanggapi. Jika semua kode diatas anda copykan ke kotak adress browser lalu ENTER, maka yang akan terbuka adalah sebuah gambar. Persis gambar aslinya. Dan loadingnya, jauh lebih cepat dibanding gambar hasil upload ke halaman Entri Postingan atau situs sharing file image. Kecepatannya sama dengan kecepatan anda membuka halaman yang hanya berisi teks.
Jika anda cermati kode diatas, ciri yang bisa anda kenali adalah, setiap kode base64, betapapun panjangnya, selalu diawali dengan data:image/png;base64 dan diakhiri dengan karakter ==
Sebagai tambahan, tulisan yang berwarna merah diatas, adalah ekstensi file gambar. Karena itu tulisan merah tersebut tidak akan sama, tergantung jenis file gambar yang anda gunakan. Bisa PNG, JPEG, gif dan seterusnya.
Selanjutnya bagaimana cara menyisipkan kode yang panjang tersebut ke blog anda? Baik ke halaman posting, header, footer maupun sidebar? Mari kita lanjutkan di ruangan ini: Cara Menggunakan Script Base64 pada Blog.
