# Hack Your Skills! to be Professional Mechatronics
Icon Teknik biasa :
Icon Teknik CSS Sprites :
Berikut contoh gambar icon dalam bentuk array:
Hasil tampilan dari script di atas :
Semoga Bermanfaat :)
Short Tutorial : CSS Sprites untuk Mempercepat Loading Web
Bahasan: Programmer web tentu wajib menguasai CSS sebab CSS merupakan inti dari style website seperti pewarnaan dan beberapa animasi minor. Tapi cs...
Published at Rabu, 10 April 2013, Updated at Rabu, 10 April 2013
Reviewed by dr. on
Rating: 4.7
Short Tutorial : CSS Sprites untuk Mempercepat Loading Web
CSS Sprites
,
HTML/CSS
,
Informatika
,
Loading Page
,
Meta Tag Description
,
Scrap of Scripts
3 komentar
Programmer web tentu wajib menguasai CSS sebab CSS merupakan inti dari style website seperti pewarnaan dan beberapa animasi minor. Tapi css bukan segalanya, tapi CSS bisa melakukan sesuatu yang tidak bisa dilakukan oleh HTML. Lalu apa bedanya CSS (biasa) dengan CSS Sprites? Tidak ada. Kita hanya menggunakan fasilitas css untuk menampilkan bagian tertentu dari gambar. Jadi, CSS Sprites sekedar teknik pengembangan.
CSS Sprites merupakan salah satu teknik CSS dalam mempercepat loading halaman web. Umumnya CSS Sprites digunakan pada icon-icon atau button yang beragam. Biasanya, setiap icon adalah satu gambar. Maka jika ada 50 icon, berarti ada 50 gambar. Dengan demikian, akan ada 50 link yang harus dirambah oleh browser untuk menampilkan ke-50 gambar tersebut. Jika menggunakan CSS Sprites, kita hanya butuh satu gambar yang berisi banyak icon sehingga loadingnya lebih cepat. Misalkan seperti berikut :
Icon Teknik biasa :
http://www.elangsakti.com/img/icon1.png http://www.elangsakti.com/img/icon2.png http://www.elangsakti.com/img/icon3.png http://www.elangsakti.com/img/icon4.png ..... http://www.elangsakti.com/img/icon49.png http://www.elangsakti.com/img/icon50.png
Icon Teknik CSS Sprites :
http://www.elangsakti.com/img/icons.png
Jika untuk menampilkan satu icon butuh waktu 0.5 detik, maka untuk menampilkan 50 icon butuh 25 detik atau dalam hal ini bandwidth juga berpengaruh. Jadi CSS Sprites ini solusi untuk pengguna dengan koneksi lemah. :)
Untuk mengecek seberapa cepat loading web/blog, kita bisa ngecek lewat Google Insight (https://developers.google.com/speed/pagespeed/insights). Dengan tool tersebut, kita akan tahu apa yang membuat loading web kita jadi berat yang dikategorikan dalam High, Medium, dan Low Priority. Bisa karena gambar background, gambar button, css, external link, dll. Salah satu solusi yang direkomendasikan adalah CSS Sprites. Ini hal yang sangat menarik (tentu karena tulisan ini sedang membahas itu :P ).
Oke, kita mulai belajar memnggunakan CSS Sprites. Untuk membuat CSS Sprites, kita butuh dua langkah, pertama membuat icon-icon dalam satu buah gambar. Lebih mudah jika ukuran gambarnya seragam. Kedua, menampilkan gambar tersebut sebagai background sesuai dengan posisi pixelnya.
Berikut contoh gambar icon dalam bentuk array:
Icon yang dibuat adalah 20x20 pixel dalam array 3x3. Untuk menentukan posisi gambar pada array yaitu menggunakan gambar yang sebelah kanan. Semakin ke kanan posisi gambar, nilai pixelnya semakin negatif. Dan semakin ke bawah posisi gambar nilai pixelnya juga semakin negatif. Untuk menggambarnya dalam bentuk html, kita contohkan menggunakan 'div' berukurang 20x20 pixel sesuai dengan ukuran icon yang sudah dibuat. Berikut script html sekaligus dengan CSS-nya.
<html>
<head>
<title>Belajar CSS Sprites</title>
<style>
.icon{
background-image: url('icons.jpg');
width: 20px;
height: 20px;
float: left;
margin-right: 5px;
}
.senyum{
background-position:-40px 0px;
}
.damai{
background-position:0px -20px;
}
.bengong{
background-position:-40px -40px;
}
</style>
</head>
<body>
<div>
<div class="icon"></div>Sedih
</div>
<div>
<div class="icon senyum"></div>Senyum
</div>
<div>
<div class="icon damai"></div>Damai
</div>
<div>
<div class="icon bengong"></div>Bengong
</div>
</body>
</html>
Hasil tampilan dari script di atas :
Semoga Bermanfaat :)
Top Artikel :
Short Tutorial : CSS Sprites untuk Mempercepat Loading Web
Bahasan: Programmer web tentu wajib menguasai CSS sebab CSS merupakan inti dari style website seperti pewarnaan dan beberapa animasi minor. Tapi cs...
Published at Rabu, 10 April 2013, Updated at Rabu, 10 April 2013
Reviewed by dr. on
Rating: 4.7
Langganan:
Posting Komentar
(
Atom
)
Gan . , .
BalasHapusGmn mengetahui ukuran iconnya. ,.
pake ukuran standar aja mas, standar icon itu ukurannya 12px, 16px, 24px, 32px, 48px, 64px, 128px, dst.. coba cek di iconfinder.com. Kalaupun mau bikin sendiri, lebih simple ngikuti standar.
Hapusmantap,,. memang anda master yang sangat ahli dibidangnya :)
BalasHapus