Latest Article

Promotion Ads

Buat Website Murah

Featured Article

Popular Article

Convert Image to Data URI (Base64)

Saya disini mau bagi tool favorite saya ketika saya ingin mengkonversikan gambar ke URI (uniform resource identifier) untuk disisipkan dalam website / blog. Tool ini juga disertai fitur Image Optimization dari SmushIt. Selain itu, gambar ini juga di compress dengan content gzip hingga 30%. Untuk menyisipkan kedalam CSS maupun HTML, caranya cukup mudah hanya dengan mengganti url tempat image dengan hasil outputnya url(data:image/png;base64,iVBORw0.... Anda bisa lihat contohnya dibawah ini.

.sprite {
  background-image:url(http://www.nurulimam.com/tezt.jpg);
}

Diganti dengan

.sprite {
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAA... etc);
}

Bagi yang tertarik silahkan kunjungi website yang menyediakan tool untuk mengkonversi gambar ke base64 dibawah ini.

http://duri.me/
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

Cara penggunaannya, anda hanya diharuskan mengupload gambar atau menyisipkan link gambar kemudian klik convert. Setelah String Base64 keluar, anda copy ke dalam HTML & CSS anda.

Created By :        Date : 2 - November - 2013

Jasa Pembuatan Website

15 Comments

  1. Mizz AizaReply

    informasi baru untuk saya.. terima kasih ya..

    • Nurul ImamReply

      Sama-sama mbak aiza ;)

  2. Intan SudibjoReply

    wah keren nih, bisa gampang buat css sprite nya ya mas :)

    • Nurul ImamReply

      Output CSSnya numpuk klo pake base64 :(

  3. Adib MahdyReply

    baru tau ni ada cara kayak gini, thax bro
    Kunjungan perdana

    • Nurul ImamReply

      Sama-sama ini juga balasan komentar perdana :D

  4. Cara RirinReply

    agak rumit juga ya untuk mengkonversi gambar ke url. Jadi mungkin harus pelan-pelan bacanya ya biar bisa paham hehe :)

    • Nurul ImamReply

      Iya, jangan langsung scroll ke kotak komentar mbak :p

  5. Rizkyzone.comReply

    owalah, ini tw mas caranya yang sering di pakai dan d share temen2 d fb, sharing gambar tapi codenya panjang banget

    • Nurul ImamReply

      Iya, mungkin dapat mengelabui beberapa newbie yang mau direct link (jika tidak memakai hotlinking)

      • Rizkyzone.comReply

        hotlinking itu apa yah mas ?

        • Nurul ImamReply

          Untuk proteksi gambar dll (MIME) supaya tidak berfungsi ketika disisipkan di web lain / copas

  6. Banten IT SolutionsReply

    Test

  7. DilakusmawatiReply

    Ilmu baru buat neng yang newbie

  8. DilaReply

    Waduh mantep tenan mas base64nya buat sahabat skalian di blog neng ada tool untuk convert images menjadi base 64 berikut cara menggunakannya silahkan ke webtool31 makasih yaa mas
    silahkan ya

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>