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.

contoh css sprite

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 :

Contoh hasil css sprite

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 **

Artikel Lainnya

  • Mengatur paragraf dengan css
    Paragraf secara mendasar diartikan sebagai kumpulan kalimat yang memiliki ide atau pokok bahasan yang sama. Dalam penulisannya paragraf biasanya terdiri dari susunan kata-kata yang terhubung secara logis untuk menjelaskan suatu topik atau ide. Kali ini saya tidak membahas bagaimana membuat paragraf atau cara menulis paragraf, tapi saya akan membahas bagaimana menyusun tampilan sebuah paragraf html dengan css.
  • Membuat tulisan ditengah dalam halaman web
    Ada banyak cara untuk menempatkan sebuah text atau objek pada posisi tengah dalam halaman website bisa dengan perintah HTML biasa atau dengan teknologi CSS yang digunakan untuk menyusun tata layout halaman web.
  • Membuat background gradient dengan css3
    Salah satu fitur unggulan yang dihadirkan pada teknologi css3 adalah kemampuanya membuat warna latar/background gradient. Gradient adalah perubahan warna dari satu warna ke warna lainya yang dilakukan secara teratur. Gradient lebih identik pada hasil gambar yang diciptakan melalui proses penempatan kombinasi beberapa warna yang memenuhi sebuah area gambar. Biasanya untuk menghasilkan gambar gradient digunakan aplikasi pengolah gambar seperti photoshop, atau corel draw. Pada artikel ini saya akan berbagi tentang bagaimana membuat latar gradient dengan css3.
  • Template halaman admin gratis
    Setiap kali kita membuat sebuah aplikasi web tentunya pasti menginginkan hasil yang baik, enak dilihat, tampilan yang cepat, fleksibel dan gampang untuk dikembangkan. Dan satu lagi tentunya lagi hemat waktu dalam membuatnya.
  • Cara Membagi halaman hasil cetak printer dengan css
    Jika kita mencetak sebuah halaman web yang isinya panjang, biasanya hasil cetaknya bersambung menjadi beberapa halaman yang tidak pasti bagian-bagianya. Bisa saja satu halaman terdiri dari beberapa bagian bahasan atau format yang berbeda sehingga menyulit

Kiriman terbaru