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 :
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.
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 :
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