Mengubah format file gambar menggunakan base64

Encoder base64 dapat digunakan untuk mengubah file format gambar (jpg, gif, png dll) menjadi berformat teks. Encoder ini biasanya sudah termasuk dalam paket default distro Linux yaitu coreutils.

Agar dapat digunakan dalam dokumen html, maka perlu mengetahui sintaks penggunaannya yaitu:

<img src=\"data:<tipe-mime>;base64,<kode-base64>" />

Untuk mendapatkan kode-base64 dari sebuah file gambar, cukup dengan mengetikkan perintah berikut pada terminal:

$ base64 -w 0 image.png

Sekedar saran, sebaiknya pilih gambar yang ukuran file-nya tidak begitu besar bila ingin menampilkan gambar dengan .kode-base64 ini pada laman web (< 100kB).

Agar proses copy-paste kode-base64 ini dapat berjalan dengan mudah, perintah di atas dapat kita redirect langsung ke sebuah file misalnya test. Seperti contoh perintah berikut ini.

$ echo "<img src=\"data:image/png;base64,$(base64 -w 0 image.png)\" />" > test

Buka file test dengan editor teks, piih semua dengan Ctrl-A, lalu salin dengan Ctrl-C. Pindahkan isi clipboard-nya ke laman html yang diinginkan.

Sebagai contoh hasilnya adalah gambar berikut ini. Silakan lihat kode sumber-nya kalau perlu.

Untuk format CSS-nya, kode-base64 dapat ditempatkan sebagai isi alamat URI dari elemen background pada sebuah class. Sehingga gambar dengan format ini dapat digunakan berkali-kali dalam sebuah laman web. Contoh syntax-nya adalah:

.nama_class {
 background:url(data:<tipe-mime>;base64,<kode-base64>) no-repeat;
 width:px;
 height:px;
}

Elemen class width dan height haruslah ditentukan ukurannya, bila tidak maka gambar tidak akan muncul. Berikut adalah hasil dari penggunaan yang diterapkan pada pola CSS (silakan melihat kode sumber laman ini)

---