Percepat Loading Halaman Web Menggunakan Image Sprite

Salam, mungkin Anda bertanya-tanya perihal apa itu image sprite? Bukan begitu? Apa masih ada hubungannya dengan polisi? Kalo pengemudi motor bandel nggak pake helm, langsung di sprite. SEMPRIT! PRIIT. Stop!

Penulis yakin, dipastikan Anda selalu memanfaatkan fitur dari CSS setiap ber-webdesign-ria, tutorial css kali ini pun yang akan di bahas adalah masih css. :D. Kebanyakan web designer pemula itu selalu menggunakan single image, untuk menjadikan gambar tersebut sebagai background dari suatu element. Anggaplah misalnya banner, atau button-button yang digunakan untuk follow sosial media.

Atau seperti ini, Misalkan Anda akan membuat sebuah link button facebook, menggunakan tag element anchor yang memiliki atribut classnya adalah facebook, kemudian Anda akan memberikan dia background bergambar logo facebook, dan Anda juga memberikan hover link button, ketika mouse diarahkan ke button tersebut maka si button facebook akan berubah entah itu warnanya, seperti dari logo facebook gelap ke terang atau yang semisal dengannya. Yang pasti Anda akan menggunakan 2 gambar berbeda, yakni facebookdark.png dan facebookglow.png. Dua file berbeda untuk 1 button. Sungguh merepotkan bukan?

Dan yang terpenting browser itu meload gambar menjadi 2 kali, menghasilkan waktu yang lebih lama. Lalu bagaimana solusinya? Tutorial css kali ini akan membahas solusinya. Mengapa tidak menggunakan sprite image saja? Sprite image itu merupakan banyak gambar-gambar yang digunakan dalam ber-css-ria dijadikan ke dalam satu image. Anda tinggal meload satu gambar dan tinggal dirubah saja background-positionnya ketika akan menggunakannya. Begitulah cara kerjanya. Untuk contoh demo adalah dalam tutorial css kali ini adalah sebagai berikut.

Contoh sprite imagenya adalah seperti ini. Gambar-gambar sosial media yang dijadikan ke dalam satu image.

ubig-sosmed-sprite

Lalu bagaimana mengimplementasikannya? berikut adalah script lengkapnya

<!DOCTYPE html>
<html>
	<head>
		<title>Sprite Image</title>
		<style type="text/css">
			body{
				padding:0;
				margin:0;
			}
			
			ul{
				margin:20px 0 0 20px;
				padding:0;
			}
			
			ul li{
				display:inline-block;
			}
			
			ul li a{
				display:block;
				width:84px;
				height:84px;
			}
			
			a.icon{
				background-image:url('sosmed-sprite.png');
			}
			
			a.facebook{
				background-position: 924px 84px;
			}
			
			a.facebook:hover{
				background-position: 924px 168px;
			}
			
			a.twitter{
				background-position: 252px 84px;
			}
			
			a.twitter:hover{
				background-position: 252px 168px;
			}
			
			a.youtube{
				background-position: 84px 84px;
			}
			
			a.youtube:hover{
				background-position: 84px 168px;
			}
			
		</style>
	</head>
	
	<body>
		<ul>
			<li><a href="#" class="icon facebook"></a></li>
			<li><a href="#" class="icon twitter"></a></li>
			<li><a href="#" class="icon youtube"></a></li>
		</ul>
	</body>
</html>

Silahkan lihat bagian pentingnya yakni element untuk button itu sendiri

<ul>
	<li><a href="#" class="icon facebook"></a></li>
	<li><a href="#" class="icon twitter"></a></li>
	<li><a href="#" class="icon youtube"></a></li>
</ul>

Dan untuk css nya

body{
	padding:0;
	margin:0;
}
 
ul{
	margin:20px 0 0 20px;
	padding:0;
}
 
ul li{
	display:inline-block;
}
 
ul li a{
	display:block;
	width:84px;
	height:84px;
}
 
a.icon{
	background-image:url('sosmed-sprite.png');
}
 
a.facebook{
	background-position: 924px 84px;
}
 
a.facebook:hover{
	background-position: 924px 168px;
}
 
a.twitter{
	background-position: 252px 84px;
}
 
a.twitter:hover{
	background-position: 252px 168px;
}
 
a.youtube{
	background-position: 84px 84px;
}
 
a.youtube:hover{
	background-position: 84px 168px;
}

Karena setiap gambar itu memiliki ukuran 84px maka untuk menggesernya tinggal dikalikan ke berapa urutannya. Sebagai contoh untuk button twitter. Dia berada di urutan 3 dari belakang, maka 3 * 84 adalah 252px. Kemudian kita ingin mengambil logo twitter berlatar belakang gelap. Dia ada di baris pertama dari bawah, maka kita tinggal mengkalkulasikannya 84 * 1 yakni 84px.

Sehingga barisan seperti ini

a.twitter{
	background-position: 252px 84px;
}
 
a.twitter:hover{
	background-position: 252px 168px;
}

Memiliki arti ambil gambar urutan ke 3 dari kanan = 252px, dan urutan pertama dari bawah = 84px.

Begitulah, silahkan kalkulasi sendiri, untuk button yang lainnya.

Selamat bereksperimen. Sekian tutorial css yang kesekian kalinya.

Sumber : IlmuWebsite