Mungkin banyak yang belum tahu apa itu gambar base64 string, maksud dari gambar ini adalah gambar yang telah di convert menjadi string base 64 yang berupa css. Yang perlu sobat ketahui adalah gambar berbentuk base64 string menjadi salah satu tips mengurangi beban loading pada blog/situs karena terbukti ampuh dapat meminimalisir HTTP request pada gambar yang berakibat beratnya loading blog dan menjadi penyebab bounce rate/ratio keluar
Data URI Generator akan menghasilkan base64 encoded data dari sebuah file gambar. Data ini kemudian dapat digunakan dalam file CSS sobat yang dapat di cache oleh browser dan tidak tergantung lagi dari permintaan HTTP gambar, oleh karena itu gambar berformat base64 dapat meningkatkan kecepatan loading halaman. Perlu diingat bahwa gambar yang sudah diconvert menjadi base64 string akan membuat file gambar lebih besar kira-kira 20%, tetapi, karena file base64 berupa CSS yang berada pada template itu artinya lebih mudah dicache oleh browser, dan lebih cepat dari pada memuat gambar setiap kali sobat mengunjungi sebuah halaman baru pada blog/situs.
intinya gambar berformat base64 akan berat ketika seseorang baru pertama kali membuka halaman tersebut, tapi akan lebih ringan ketika seseorang sudah membuka halaman tersebut lebih dari dua kali karena sudah di cache oleh browser
CARA MERUBAH GAMBAR MENJADI BASE64
1. buka Data base64 Generator
2. pilih gambar daari komputer sobat
3. klik upload
4. akan muncul code hasil convert ke base64
KETERANGAN
Lebih baik gunakan gambar base64 pada gambar background template atau gambar judul blog. lebih disarankan jika gambar background template menggunakan css repeat scroll
sesuatu yang baru.
ReplyDeletethanks ilmunya yg sudah di sharing
sama-sama gan :cendol
ReplyDeleteMakasih tips nya...
ReplyDeleteBy : Aji-Apps
kalo awalnya berat mungkin saja orang gk bakalan balik atau melanjutkan surfing sob :)
ReplyDeleteengga kok, buktinya agan bisa komen disini :genit dan gk langsung :ngacir
ReplyDeletemas, saya punya masalah mengenai base64 ini, bagaimana caranya kita ubah gambarnya pake base64 trus datanya masukkan ke css, trus link css trsb digunakan untuk memanggil gambar yg diinginkn>?
ReplyDeletemohon solusinya :D
Deletehttp://www.cssportal.com/image-to-data/ agan convert dulu nanti ada penjelasannya, bagaimana memanggilnya sebagai tag ataupun background :D
Deletemakasih mas ntar saya coba :)
DeleteUntuk base64 yang digunakan di css bisa seperti ini, misal untuk background:
Deletebody{
background-color:grey;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC);
}
:)
kok gambarnya 1x1 px :D hehehe
DeleteIya itu saya menggunakan gambar placeholder jQuery Lazyload. :) Hehehe
Deletemakasih gan dah ngasih contohnya :D
DeleteNah ini yang saya cari. Sebab, visitor blog akan banyak mengeluhnya, karena image (gambar) yang terlalu banyak pada homepage, seperti saya maksudnya, hehehe :D
ReplyDeleteSaya malah baru tahu mas, tentang post ini, saya pelajari, ternyata data:image itu towh. Makasih banyak ya mas, sangat membantu.. :D (y)
sama-sama gan, tutorial ini sebenernya lebih bagus untuk background blog(dengan pengulangan sumbu x dan y) maupun header blog yang gambarnya tidak terlalu besar, kalau banyak gambar yang direquest di homepage coba digabuungkan gambarnya dengan CSS sprite
DeleteSedikit tambahan, penggunaan base64 biasanya digunakan untuk menampilkan gambar sebagai background. :)
DeleteSama saja menggunakan data:uri dengan menggunakan link pada umumnya karena ukurannya sama suatu misal gambar berukuran 12kb di convert menjadi data:uri, nanti ukuran text data:uri-nya juga akan 12kb.
data:uri bisa digunakan untuk blog yang menggunakan tidak terlalu banyak gambar, lah kalau semua gambar dirubah menjadi data:uri, betapa beratnya ukuran blog kita?
Memang si meminimalisir permintaan http, tetapi penggunaan data:uri pada image juga mempunyai efek samping. Misal gambar yang kita convert berukuran lebih dari 500kb, itu akan semakin menambah beban load blog kita sendiri... :) Pada intinya sama saja kok... heheheh
Saya kurang setuju dengan kalimat ini kang... :)
DeleteYang perlu sobat ketahui adalah gambar berbentuk base64 string menjadi salah satu tips mengurangi beban loading pada blog/situs karena terbukti ampuh dapat meminimalisir HTTP request pada gambar
Karena tidak semua base64 string dapat mengurangi beban loading, seperti yang saya jelaskan sebelumnya semua tergantung ukuran gambar yang digunakan. Jika Anda mengubah gambar dengan ukuran besar, pasti akan mendapatkan teks base64 string yang besarnya sama dengan ukuran gambar.
Dan jika itu dipasang di blog, toh sama ajah walaupun mengurangi permintaan http tetapi akan menambah ukuran blog. :)
"lebih bagus untuk background blog(dengan pengulangan sumbu x dan y) maupun header blog yang gambarnya tidak terlalu besar" ini benerkan, kelebihanya lagi mudah di cache
DeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeletemas kalau di gtmetrix nilai web ku E dibagian Remove query strings from static resources itu solusinya gimana ya
ReplyDelete