Apa itu Sprites?Sprites pertama kali digunakan dalam dunia game 2D seperti “Super Mario Bros“. Lalu sekitar tahun 2004, sprites pun sudah mulai digunakan dalam dunia website. Sprites dalam dunia game bisanya berisikan gambar sang karakter (dalam berbagai gerakan), background dan elemen pendukung menjadi 1 gambar besar. Sedangkan dalam dunia website, sprites terdiri dari penggabungan gambar atau elemen pendukung seperti navigasi (termasuk kondisi saat hover & klik), icon dan button, yang kemudian menjadi satu gambar besar disebut Sprite Sheet.
Sebagian kecil dari Sprite Sheet Super Mario Bros
Mengapa harus digabungkan menjadi satu?
Dalam dunia game, sprites sangat berguna dalam mengurangi penggunaan memori, mempercepat proses penampilan gambar dan menjaga frame rate tetap tinggi. Menggunakan sprites pada website dapat mengurangi permintaan browser ke server (HTTP request). Contoh, di halaman home memiliki 10 gambar kecil dengan masing-masing berukuran 1 kB. Maka browser akan mengirimkan 10 permintaan ke server. Tapi jika menggunakan sprites, 10 gambar menjadi 1 dengan ukuran 10 kB, maka browser hanya akan mengirim 1 permintaan ke server. Dengan begitu load sebuah halaman web akan lebih cepat. Sprites
biasanya terdiri dari kumpulan gambar untuk digunakan sebagai navigasi, button dan elemen-elemen pendukung.
Manfaat yang dirasakan pada sebuah website?
Yang jelas terasa manfaatnya adalah kecepatan load sebuah web menjadi lebih cepat. Bagi web desainer, sprites juga dapat digunakan sebagai acuan untuk tetap konsisten dalam mendesain sebuah web. Terutama ketika mendesain halaman web yang memiliki banyak elemen pendukung, dengan menggunakan sprites (tentunya sprites masih dalam format yang bisa diubah) kita dapat dengan mudah menambahkan elemen-elemen ke dalam desain halaman baru. Apakah pernah lupa untuk mendesain button untuk kondisi hover/klik? Dengan sprites, kita bisa melihat apakah button tersebut sudah memiliki desain untuk kondisi hover/klik. Saran dari saya, cobalah untuk menggabungkan elemen-elemen yang ada di halaman utama/home dahulu sebelum melanjutkan mendesain halaman berikutnya. Saat ini hampir semua web BINUS yang dikelola oleh DMD sudah menerapkan sprites, diantaranya adalah web BINUS University , DMD, dan Bina Nusantara.
Berikut beberapa contoh Sprites yang diterapkan pada BINUS University:
Sprite Sheet Button & Elemen Pendukung
Sprite Sheet elemen pendukung
Selama ini belajar web design dan pemrograman sederhana (HTML & PHP) otodidak, dan ngeh soal sprites ini kirain semacem… Semacem, apa ya, kaya character sheet di anime/manga gitu XD Ternyata bisa toh, buat manggil gambar dan ga membebani server. Kalo kaya gitu caranya gimana sih? :D Penasaran. Masih newbie ini XD Apa nyimpen satu gambar yang isinya para karakter/sprites gitu, atau gimana… Masih n00b banget kalo urusan gini :))
Nindya