Home > Menengah > Web Desain > Tutorial CSS > Tutorial CSS : Percepat Loading Halaman Web Menggunakan Image Sprite

.

Tidak ada komentar BYAdmin Ilmuwebsite

sosmed-spriteSalam, mungkin Anda bertanya-tanya perihal apa itu image sprite? Bukan begitu? Apa masih ada hubungannya dengan polisi? Kalo pengemudi motor bandel nggak pake helm, langsung di sprite. SEMPRIT! PRIIT. Stop!

Penulis yakin, dipastikan Anda selalu memanfaatkan fitur dari CSS setiap ber-webdesign-ria, tutorial css kali ini pun yang akan di bahas adalah masih css. :D. Kebanyakan web designer pemula itu selalu menggunakan single image, untuk menjadikan gambar tersebut sebagai background dari suatu element. Anggaplah misalnya banner, atau button-button yang digunakan untuk follow sosial media. 

Atau seperti ini, Misalkan Anda akan membuat sebuah link button facebook, menggunakan tag element anchor yang memiliki atribut classnya adalah facebook, kemudian Anda akan memberikan dia background bergambar logo facebook, dan Anda juga memberikan hover link button, ketika mouse diarahkan ke button tersebut maka si button facebook akan berubah entah itu warnanya, seperti dari logo facebook gelap ke terang atau yang semisal dengannya. Yang pasti Anda akan menggunakan 2 gambar berbeda, yakni facebookdark.png dan facebookglow.png. Dua file berbeda untuk 1 button. Sungguh merepotkan bukan?

Dan yang terpenting browser itu meload gambar menjadi 2 kali, menghasilkan waktu yang lebih lama. Lalu bagaimana solusinya? Tutorial css kali ini akan membahas solusinya. Mengapa tidak menggunakan sprite image saja? Sprite image itu merupakan banyak gambar-gambar yang digunakan dalam ber-css-ria dijadikan ke dalam satu image. Anda tinggal meload satu gambar dan tinggal dirubah saja background-positionnya ketika akan menggunakannya. Begitulah cara kerjanya. Untuk contoh demo adalah dalam tutorial css kali ini adalah sebagai berikut.

Lihat Demo

Contoh sprite imagenya adalah seperti ini. Gambar-gambar sosial media yang dijadikan ke dalam satu image.

sosmed-sprite

Lalu bagaimana mengimplementasikannya? berikut adalah script lengkapnya

 

Silahkan lihat bagian pentingnya yakni element untuk button itu sendiri

 

Dan untuk css nya

 

Karena setiap gambar itu memiliki ukuran 84px maka untuk menggesernya tinggal dikalikan ke berapa urutannya. Sebagai contoh untuk button twitter. Dia berada di urutan 3 dari belakang, maka 3 * 84 adalah 252px. Kemudian kita ingin mengambil logo twitter berlatar belakang gelap. Dia ada di baris pertama dari bawah, maka kita tinggal mengkalkulasikannya 84 * 1 yakni 84px.

Sehingga barisan seperti ini

 

Memiliki arti ambil gambar urutan ke 3 dari kanan = 252px, dan urutan pertama dari bawah = 84px.

Contoh demonya adalah seperti ini

Lihat Demo

Begitulah, silahkan kalkulasi sendiri, untuk button yang lainnya.

Selamat bereksperimen. Sekian tutorial css yang kesekian kalinya.

DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0813 1167 5785, atau bisa pesan secara online di sini)



No Responses

You must be logged in to post a comment.

eXTReMe Tracker