Apa css sprite dan bagaimana membuatnya

CSS sprite adalah sebuah teknik menampilkan gambar di halaman web atau blog dengan cara mengkombinasikan beberapa gambar dalam satu file, kemudian memanggilnya melalui css dengan cara menuliskan posisi titik x dan titik y sesuai gambar yang dibuat.

Dengan menggunakan teknik css sprite ini, loading halaman web atau blog lebih cepat, trus juga meminimalkan http request karna yang diambil cuman 1 file. Menurut informasi yang saya baca,  teknik ini adalah cara efektif dalam menampilkan gambar-gambar kecil seperti menu. Saya sudah coba terapkan di web saya ini (liat bagian info artikel gambar tanggal, penulis dll), css sprite ini juga sudah banyak diterapkan pada banyak situs diinternet.

Bagaimana membuat css sprite?

Pertama yang anda lakukan adalah menyiapkan gambar-gambar yang akan digabungkan menjadi 1 file. Jika belum ada anda bisa cari yang gratis diinternet seperti :

1. https://www.iconspedia.com
2. https://www.freeiconsdownload.com
3. https://www.findicons.com

Untuk menggabungnya anda bisa gunakan editor grafis seperti photoshop, gimp atau yang lainya. Jangan lupa menyimpanya sebaiknya dalam format gif atau png atau jpg. Saya pribadi menganjurkan dalam format PNG karena mendukung transparan.

Jika anda ingin cara instan sekarang sudah banyak tersedia tool gratis yang bisa digunakan secara online seperti :

1. https://css-sprit.es/
2. https://spritegen.website-performance.org/
3. https://www.spritecow.com/
4. https://csssprites.com/

Misal hasil penggabungan gambarnya seperti berikut :

Masing-masing bagian gambar berukuran 64pixel, sehingga kalo total lebar gambar adalah 256pixel. Anda juga bisa gabungkan gambar secara vertikal sehingga hasil tinggi gambar total 256px. Cara memanggilnya sedikit berbeda pada titik x dan y-nya.

Bagaimana jika ingin menampilkanya satu persatu, caranya lihat kode css berikut :

<style type="text/css">
.img-1,.img-2,.img-3,.img-4 {
   width: 64px; height: 64px;
}
.img-1 { 
   background: url('hasil-css-sprite.png') no-repeat 0px 0px; 
}
.img-2 { 
   background: url('hasil-css-sprite.png') no-repeat -64px 0px; 
}
.img-3 { 
   background: url('hasil-css-sprite.png') no-repeat -128px 0px; 
}
.img-4 { 
   background: url('hasil-css-sprite.png') no-repeat -192px 0px; 
}
</style>

Kode css diatas melakukan pentuan posisi sesuai bidang gambar yang kita buat. Jika posisi pada paling kiri berarti nilai x = 0px, agak bergeser kekanan nilai x=-64px dan seterusnya. Semua titik hanya mengarah ke satu gambar yang sama dengan posisi x dan y berbeda.

Jika gambar vertikal kebawah berarti yang berubah adalah titik y.

Setelah kode css selesai, kemudian buat kode html seperti berikut :

<div class="img-1"></div>
<div class="img-2"></div>
<div class="img-3"></div>
<div class="img-4"></div>

Kode diatas memanggil komponen gambar yang sudah kita atur dalam css, masing-masing ditunjukkan dengan nama class yang sudah dibuat.

Hasilnya :

Beberapa sumber yang membahas tentang css sprite :

1. https://css-tricks.com/css-sprites/
2. https://moovindesigns.blogspot.com/2011/05/planting-css-sprites_24.html
3. https://freewebtipsandtrick.blogspot.com/2011/02/css-sprites-what-they-are-and-how-to.html
4. https://skyje.com/css-sprites/

Jika masih binggung atau ada koreksi silahkan kirim kementar pada bagian bawah artikel ini.

Semoga bermanfaat

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **