Tutorial Optimalisasi Website dengan Combine Images Menggunakan CSS Sprites di Website
- Panduan Lengkap VM - Juli 29, 2024
- Panduan Pembayaran Via Bank Mandiri - Juli 2, 2024
- PHP X-Ray di cPanel untuk Optimasi Kecepatan Web - April 18, 2023
Hai Sob! Terkadang saat Kamu membuat website di web hosting, Kamu akan membutuhkan banyak gambar mulai ukuran yang besar hingga ukuran yang sangat kecil untuk mewakili beberapa fungsi yang digunakan pada website, seperti tombol beranda (home), kembali (left), lanjut/proceed (right). Nah, item-item itulah yang sering dipanggil 'sprite'.
Terdapat beberapa cara yang dapat digunakan terkait kondisi diatas, salah satu cara yang sederhana namun efektif adalah dengan menggabungkan gambar menjadi satu gambar utuh. Kuy, kita liat caranya:
STEP 1. Seperti pada contoh dibawah, dimana pada folder terdapat 3 gambar, yaitu img_home.gif, img_left.gif, img_right.gif, yang digunakan pada file index.html, aktivitas penggabungan gambar tsb menghasilkan 1 gambar yang sering disebut sebagai sprites.
tampilan file dalam folder
<!DOCTYPE html>
<html>
<head>
<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('img_home.gif');
}
#prev {
left: 63px;
width: 43px;
background: url('img_left.gif');
}
#next {
left: 129px;
width: 43px;
background: url('img_right.gif');
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
-- isi dari file index.html --
STEP 2. Ketika Kamu mengakses file index.html, pada browser terlihat adanya proses request terhadap 3 file tsb, seperti lampiran bawah ini.
tampilan browser
STEP 3. Maka, Kamu dapat menggabungkan ketiga gambar tsb menjadi 1 file gambar yang bernama img_navsprites.gif, Kamu juga perlu melakukan beberapa perubahan pada file index.html agar menggunakan file img_navsprites.gif untuk mewakili 3 gambar lainnya.
tampilan file dari folder
<!DOCTYPE html>
<html>
<head>
<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('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
-- isi dari file html --
STEP 4. Setelah dilakukan perubahan dengan menggabungkan, terlihat pada browser saat ini hanya melakukan 1 request untuk mewakili 3 gambar.
tampilan browser
Penggunaan sprite sejatinya cukup bebas dan tidak terlalu ada parameter yang saklek untuk masalah ukuran. Tapi berhitung-hitung dengan kekuatan aksesnya itu sendiri, akan lebih baik jikalau Kamu mengoptimalkannya menggunakan kualitas sprite yang baik dengan ukuran sekecil mungkin.
Nah, Kalau masih kesulitan Kamu bisa hubungi teman-teman Jagoan Hosting untuk informasi lewat Live Chat dan Open Ticket. Yuk Ah!