Pelajari teknik penggunaan image sprites di CSS untuk meningkatkan performa loading website.

CSS Image Sprites

Image sprites adalah teknik menggabungkan beberapa gambar kecil menjadi satu file gambar besar, lalu menggunakan background-position untuk menampilkan bagian tertentu dari gambar itu.

Keuntungan:

Mengurangi jumlah permintaan HTTP ke server.
Mempercepat waktu loading halaman.

Contoh Dasar Image Sprite

<style>
  #navlist {
    position: relative;
  }
 
  #navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
  }
 
  #navlist li, #navlist a {
    height: 44px;
    display: block;
  }
 
  #home {
    left: 0px;
    width: 46px;
    background: url('https://www.mulaicode.com/css/img_navsprites.gif') 0 0;
  }
 
  #prev {
    left: 63px;
    width: 43px;
    background: url('https://www.mulaicode.com/css/img_navsprites.gif') -47px 0;
  }
 
  #next {
    left: 129px;
    width: 43px;
    background: url('https://www.mulaicode.com/css/img_navsprites.gif') -91px 0;
  }
</style>
 
<ul id="navlist">
  <li id="home"><a href="/"></a></li>
  <li id="prev"><a href="image-gallery"></a></li>
  <li id="next"><a href="attribute-selector"></a></li>
</ul>

Penjelasan:

background-image: menentukan file gambar sprite.
background-position: menentukan bagian mana dari sprite yang ditampilkan.
width dan height: mengatur ukuran area tampilan untuk masing-masing ikon.

CSS Image Sprites

CSS Image Sprites

Contoh Dasar Image Sprite

Penjelasan:

On this page