Plesk

VestaCP

Webuzo

Wordpress Toko Online

Wordpress Company Profile

CodeIgniter

Laravel

Prestashop

Joomla

Drupal

Nextcloud

Moodle

Open Cart

Cari tutorial

Tutorial Optimalisasi Website dengan Combine Images Menggunakan CSS Sprites di Website

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.

optimalisasi website menggunakan css sprites pada website anda

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.

optimalisasi website menggunakan css sprites pada website anda

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.

optimalisasi website menggunakan css sprites pada website anda

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.

optimalisasi website menggunakan css sprites pada website anda

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!

Apakah artikel ini membantu, Sob?

Berikan rating buat artikel ini!

Rata-rata rating 0 / 5. Dari total vote 0

Pertamax, Sob! Jadilah pertama yang memberi vote artikel ini!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Leave a Comment





Ada yang baru sob! Tempat buat kamu diskusi & tanya jawab di Forum JagoanHosting

Cek langsung TKP!