Pensil Warna Design - Animasi, Web Design & Logo Design

CSS sprites bukanlah barang baru bahkan CSS sprites adalah cara lama yang ampuh dan sudah menjadi hal yang biasa dalam web development. Meskipun CSS sprites bukanlah hal yang penting tetapi dalam situasi tertentu CSS sprites ini dapat memberikan manfaat dan keuntungan yang nyata, terutama apabila beban server menjadi salah satu pertimbangan dalam mendesign sebuah website.

Kata sprite ini berasal dari kosa kata komputer graphic yang berarti sebuah obyek grafis yang digabungkan kedalam 2d atau 3d animasi melalui prosesor graphic. Sprite ini dikembangkan karena ranah video games yang makin kompleks dan memerlukan cara pengolahan gambar berkualitas tinggi yang cerdas tanpa mengganggu pola alur permainan itu sendiri.

Salah satu cara populer adalah dengan mengembangkan design master yang kemudian dikeluarkan secara selektif ketika dibutuhkan oleh sebuah code yang dipetakan kedalam posisi unik dari masing-masing design untuk kemudian ditampilkan dalam layar. Sprites ini banyak digunakan untuk gambar statis maupun dinamis dimana posisi dari masing-masing gambar design ditentukan oleh hardware controller. Contoh gambar dibawah ini adalah design sprites untuk Pokemon.

Seiring dengan berjalannya waktu, pada era tahun 2000-an banyak web designer yang progresif dan futuristic mulai mencari cara alternatif untuk menampilkan design menu yang menarik tanpa memakai JavaScripts, ketika inilah sprites mulai memasuki ranah web design dan development. Dengan masuknya CSS dalam arus utama web design pemakaian sprites dalam web design dimungkinkan dan semakin mudah, handal, cepat serta sederhana daripada memakai tehnik JavaScripts yang mulai ketinggalan zaman.

Pemakaian sprites dalam pendekatan CSS pada web design juga memakai metoda yang telah melegenda dalam dunia video games, dimana banyak gambar dipakai disemua website yang dijadikan satu melalui dengan apa yang disebut “master image”. Pemakaian sprite dalam mendesing web berbasis CSS hanya tinggal mengatur posisi tampilan dengan properti yang terdapat dalam CSS, begitu juga dengan penampilan hover, active atau focus. Semuanya menjadi sangat mudah melalui sprites ini.

Ketika sebuah halaman web diload, gambar tidak ditampilkan satu persatu akan tetapi seluruh master image. Sekilas hal ini tidak terlihat perbaikan apapun yang nyata, akan tetapi apabila dilihat lebih mendalam efek JavaScripts mouse rollover memerlukan dua kali HTTP request dimana akan menyebabkan terjadi kedipan pada gambar atau bahkan tidak ada gambar sama sekali apabila koneksi internet sedang buruk. Memakai tehnik CSS sprite dalam web design ini tidak akan ada sama sekali kedipan karena semua gambar telah diload ketika mengupload master image.

Keuntungan lain dari penggunaan CSS sprites ini adalah mengurangi HTTP request dan waktu loading dari website. Karena itulah CSS sprite sering digunakan untuk mendesign website dengan traffic pengunjung yang tinggi seperti amazon, google, yahoo, AOL, apple, CNN hingga digg. Kemampuan membuat CSS sprite ini sangatlah dibutuhkan bagi para web designer.

Membuat master image untuk digunakan dalam web design dengan CSS sprites sangat memerlukan ketelitian yang besar dan perencanaan konspetual yang tinggi karena tanpa adanya kedua hal ini CSS sprite ini malah akan menjadi beban dan masalah bagi situs maupun server.