Mengenal DATA URI

Sebelum aku posting tentang DATA URI bang @beben sudah pernah posting tentang ini. setelah dibaca-baca dan sedikit memutar otak untuk dapat mengerti terjemahan dari Google tentang pengertian DATA URI. Menurut Wikipedia DATA URI adalah penggunaan skema data secara inline didalam halaman web yang seakan-akan data tersebut berada pada web lain ( eksternal web ), kalau masih salah tolong koreksinya ya, karena aku orang yang gak terlalu mudah mudeng jadi agak susah ngerti.

Lihat Browser Yang Support Dengan DATA URI : Browser Support.

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

1. MIME-type Berupa

- text/plain
- image/jpg
- image/gif
- image/png
- text/javascript
- text/html
- text/css
- audio/mp3
- audio/wav
- audio/ogg
- application/pdf
- text/xml

Untuk Semua Jenis MIME-TYPE bisa dicek Disini

2. encoding ( Baca: Pengkodean Karakter ) Berupa

- US-ASCII
- UTF-8
- EBCDIC
- UTF-16
- UTF-32

Namun Yang paling sering digunakan dalam web adalah UTF-8

3. base64 Adalah Hasil Encode dari sebuah kode,url,teks dan gak tau apalagi, kodenya terlihat aneh jika dilihat namun memiliki isi.

iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAS5JREFUOI2tlNmNhDAQRCekCYFQOMR9gzg+nZlD2RA2hN4uC0s7yAYD81FCou3XXWXwi4he35a14Pu+F4YhxXFMSZLYJLkuoijynaBBEHhpmlLbtjQMg1F938umaURRFJRlme8EzfOcxnGkdV2NWpZFMtgDuK5rYYTCMmCsN1t3gf7yxJhWyQhFhrDMViQ/vbIsD6HQNE06CjJCcShbhujssaVT6DaxkhGKE0VXZNV1HbJSUFvuXBOYFEDAL0F5o8qMT/lDVVX9wPY8z9eh2ITNiOa/eI2q35p0b5sbCN1MA+/YV5OxXSW839Z9HNglKDbjqf8k3egR9OwC0Y0f2d8LNax5ZH+vW5Oe/VHOmZ7leCQbVH3syAuXii3LS1BYwYd9lCPkCsWlK2HfRTboH71yVt9PdsQQAAAAAElFTkSuQmCC

4. data berupa teks yang dihasilkan dari Base64 ( seperti contoh diatas ).

Oke sekarang mari kita langsung ke contoh pengkodean menggunakan DATA URI.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAS5JREFUOI2tlNmNhDAQRCekCYFQOMR9gzg+nZlD2RA2hN4uC0s7yAYD81FCou3XXWXwi4he35a14Pu+F4YhxXFMSZLYJLkuoijynaBBEHhpmlLbtjQMg1F938umaURRFJRlme8EzfOcxnGkdV2NWpZFMtgDuK5rYYTCMmCsN1t3gf7yxJhWyQhFhrDMViQ/vbIsD6HQNE06CjJCcShbhujssaVT6DaxkhGKE0VXZNV1HbJSUFvuXBOYFEDAL0F5o8qMT/lDVVX9wPY8z9eh2ITNiOa/eI2q35p0b5sbCN1MA+/YV5OxXSW839Z9HNglKDbjqf8k3egR9OwC0Y0f2d8LNax5ZH+vW5Oe/VHOmZ7leCQbVH3syAuXii3LS1BYwYd9lCPkCsWlK2HfRTboH71yVt9PdsQQAAAAAElFTkSuQmCC

Coba copy tuh kodenya terus paste di addres bar, keluar gambar milik blogger kan hehe karena blogger juga menggunakan cara ini.

Oh iya setelah diperhatikan panjangnya kode Base64 itu tergantung dari ukuran File kita jika filenya kecil maka agak pendek pula kodenya jika ukurang file misalnya 100kb atau lebih maka kodenya juga akan panjang.

Terkait : Merahasiakan Url Gambar