CSS Image Sprites

CSS Sprite pada dasarnya adalah sebuah metode menggabungkan beberapa background image menjadi satu. CSS sprite bisa digunakan untuk mengurangi banyaknya http request. Http request sendiri adalah proses permintaan transfer suatu file dari browser ke server untuk kemudian didownload dan ditampilkan pada web browser.

Sebelum menggunakan metode CSS image sprite ini, contoh diatas bisa di gambarkan kurang lebih dengan style sheet dibawah ini

ul#social li.tw {
  background-image: url("twitter.png");
}

ul#social li.fb {
  background-image: url("facebook.png");
}

ul#social li.rss {
  background-image: url("rss.png");
}

Pada contoh diatas akan ada begitu banyak background image yang harus dipanggil. Sebuah browser harus memanggil gambar sebanyak tiga kali, Untuk contoh diatas mungkin ukuran gambar masih bisa dibilang kecil, tapi bayangkan jika ukuran gambarnya cukup besar. Itu jelas akan memperlambat waktu akses sebuah website

Sekarang kita bandingkan dengan menggunakan metode CSS Sprite.

Untuk menggunakan CSS Sprite image, kita hanya perlu mengatur posisi dari gambarnya saja dengan perintah : background-position: Xpx Ypx; Sama halnya dengan grafik pada mode perhitungan matematika, hanya saja positioning dalam image sprite adalah dalam nilai minus. Angka 0 adalah patokan, dimana positioning gambar dimulai dari sudut 0 ini.

Syntax

ul#social li {
  padding: 0 0 2px 22px;
  background-image: url("sprite_image.png");
  background-repeat:no-repeat;
  list-style:none;
}

ul#social li.tw {
  background-position: 0px 0px;
}

ul#social li.fb {
  background-position: 0px -19px;
}

ul#social li.rss {
  background-position: 0px -38px;
}

Pada contoh diatas browser hanya memanggil gambar sebanyak satu kali, yang tentunya akan mengurangi jumlah http request dan akses ke sebuah website akan lebih cepat

HTML

<ul id="social">
    <li class="tw"><a href="https://twitter.com/LabInformatika">Twitter</a></li>
    <li class="fb"><a href="https://www.facebook.com/LabInformatika">Facebook</a></li>
    <li class="rss"><a href="https://www.lab-informatika.com/page/feed/">RSS Feeds</a></li> 
</ul>

Selain manfaatnya dalam mengurangi http request dan mempercepat loading suatu website, ukuran file yang digabungkan sebagai image sprite menjadi lebih kecil dibandingkan dengan jumlah file image yang terpisah.

Alfa Adhitya Member since December 18, 2019

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter – Eric S