Dua tiga hari dok ber sprite jer, hehehe, bukan minuman macam sebelah yer. Sprite adalah teknik CSS yang menggabungkan imej-imej dalam website menjadi satu file yang besar, bagi mengurangkan permintaan HTML seterusnya mempercepatkan loading time. Saya berjaye juga akhirnya menggunakan teknik coding ini yang saya ambik dari tutorial CSS sprite w3schools. Walaubagaimanapun, ade sedikit kesan iaitu, tidak semua browser akan paparkan benda yang sama, jadi perlu coding CSS berlainan. Misalannya Internet Explorer. Setakat ini segala teknik advance CSS boleh pakai di Google Chrome. Modzilla Firefox pula saya rate sebagai medium. (Depend kalo wat CSS dekat Firefox, ia elok tetapi tidak pada Chrome).
Apa itu sprite imej ?
Sprite imej ialah sekumpulan imej yang digabungkan menjadi satu imej file. Sebagaimana yang kita ketahui, PC kita akan request kepada server setiap file-file imej yang ade. Setiap kali ulang-alik request ini akan wujudkan delay time. Secara logik cuba korang fikir mana cepat ? masa korang nak buat kerja sekolah, korang mesti perlu pen kan ? Pastu kalau salah tulis, korang kena pulak padam dengan liquid kan ? Korang pi laa cari liquid tuu dah jumpa, pastu korang nak guna pulak pencil.
Pi beli jap kedai, dah balik kedai, rase pulak nak beli pemadam, cuba tengok, berapa kerap masa korang terbuang, baik korang beli semua peralatan, letak dalam pencil box. Bile perlu korang cari dalam pencil box, cepat kan ? Cuma berat skit laa nak bawak pencil box tuu dari bawak satu-satu barang. Konsep yang sama, korang apply dalam CSS sprite. Letak semua imej yang perlu dalam satu file imej sahaja. Pastu masa loading pertama kali belog korang, semua imej dah download. Bila korang klik readmore atau pergi ker entry lain dalam belog itu, file yang sama dah didownload.
Jadi paparan pun lebih cepat ditunjuk, tak perlu korang tunggu2 loading imej lagi. Teknik ini juga dapat menjimatkan bandwidth download broaband korang. Tapi saya sarankan supaya imej2 yang bersifat seperti button sahaja atau file imej yang agak kecil. Untuk tutorial kali ini, saya akan tunjukkan bagaimana hendak membuat imej sprite dengan mudah tanpa perlu korang edit dekat photoshop korang boleh guanakan CSS Sprite Generator. Ikuti jew tutorial didalamnya, senang sangat, kalo x tau boleh PM saya, saya tolong apa yang termampu.
Kenali CSS Sprite
Supaya korang lebih memahami CSS Sprite ini. Maka saya akan tunjukkan salah satu contoh tutorial di w3schools iaitu Image Sprites - Hover Effect. Korang explorer laa sendiri yer, menarik tau. Korang klik pada Try it Yourself di website w3schools. Saya selalu belajar dengan cara mudah tentang CSS / HTML di w3school ini. Banyak yang korang boleh belajar kat sana. Selepas korang klik Try it Yourself akan keluar editor seperti di bawah ini. Sebelah kiri untuk korang edit. Sebelah kanan ialah hasilnya.
Tammat Sudah
Saya tak sempat nak tunjuk macam-mana nak letak code dari w3school ke dalam HTML belog korang. Takpe, rasanya korang pun perlu stady lagi kan pasal topik nie orite ! Teknik Sprite sudah lama dipraktikkan, bukan dekat website sahaja, klo korang pernah main game zaman dulu-dulu macam pokemon atau mario bross, mesti korang tak tau kan, didalam game tuu banyak sekali teknik sprite digunakan. Ianya adalah teknik untuk meringankan download time bagi sesuatu paparan. Setiap penjimatan yang kecil jika dikumpulkan akan menjadi sangat besar. Saya just nak kongsi ape yang baik bagi saya dan untuk korang. Well ilmu patut di sharing. "sharing is caring" tak kisah laa kalo korang nak copy-paste tutorial ini dan letak dekat entry korang. Janji korang refer belog sini balik yer. Saya pun nak hidup ternama macam blog2 famous tu jugak, ahaks..
Apa itu sprite imej ?
Sprite imej ialah sekumpulan imej yang digabungkan menjadi satu imej file. Sebagaimana yang kita ketahui, PC kita akan request kepada server setiap file-file imej yang ade. Setiap kali ulang-alik request ini akan wujudkan delay time. Secara logik cuba korang fikir mana cepat ? masa korang nak buat kerja sekolah, korang mesti perlu pen kan ? Pastu kalau salah tulis, korang kena pulak padam dengan liquid kan ? Korang pi laa cari liquid tuu dah jumpa, pastu korang nak guna pulak pencil.
Pi beli jap kedai, dah balik kedai, rase pulak nak beli pemadam, cuba tengok, berapa kerap masa korang terbuang, baik korang beli semua peralatan, letak dalam pencil box. Bile perlu korang cari dalam pencil box, cepat kan ? Cuma berat skit laa nak bawak pencil box tuu dari bawak satu-satu barang. Konsep yang sama, korang apply dalam CSS sprite. Letak semua imej yang perlu dalam satu file imej sahaja. Pastu masa loading pertama kali belog korang, semua imej dah download. Bila korang klik readmore atau pergi ker entry lain dalam belog itu, file yang sama dah didownload.
Jadi paparan pun lebih cepat ditunjuk, tak perlu korang tunggu2 loading imej lagi. Teknik ini juga dapat menjimatkan bandwidth download broaband korang. Tapi saya sarankan supaya imej2 yang bersifat seperti button sahaja atau file imej yang agak kecil. Untuk tutorial kali ini, saya akan tunjukkan bagaimana hendak membuat imej sprite dengan mudah tanpa perlu korang edit dekat photoshop korang boleh guanakan CSS Sprite Generator. Ikuti jew tutorial didalamnya, senang sangat, kalo x tau boleh PM saya, saya tolong apa yang termampu.
Kenali CSS Sprite
Supaya korang lebih memahami CSS Sprite ini. Maka saya akan tunjukkan salah satu contoh tutorial di w3schools iaitu Image Sprites - Hover Effect. Korang explorer laa sendiri yer, menarik tau. Korang klik pada Try it Yourself di website w3schools. Saya selalu belajar dengan cara mudah tentang CSS / HTML di w3school ini. Banyak yang korang boleh belajar kat sana. Selepas korang klik Try it Yourself akan keluar editor seperti di bawah ini. Sebelah kiri untuk korang edit. Sebelah kanan ialah hasilnya.
Tammat Sudah
Saya tak sempat nak tunjuk macam-mana nak letak code dari w3school ke dalam HTML belog korang. Takpe, rasanya korang pun perlu stady lagi kan pasal topik nie orite ! Teknik Sprite sudah lama dipraktikkan, bukan dekat website sahaja, klo korang pernah main game zaman dulu-dulu macam pokemon atau mario bross, mesti korang tak tau kan, didalam game tuu banyak sekali teknik sprite digunakan. Ianya adalah teknik untuk meringankan download time bagi sesuatu paparan. Setiap penjimatan yang kecil jika dikumpulkan akan menjadi sangat besar. Saya just nak kongsi ape yang baik bagi saya dan untuk korang. Well ilmu patut di sharing. "sharing is caring" tak kisah laa kalo korang nak copy-paste tutorial ini dan letak dekat entry korang. Janji korang refer belog sini balik yer. Saya pun nak hidup ternama macam blog2 famous tu jugak, ahaks..
No comments:
Post a Comment