Test Block Top

The Blog...
Articles, Tips & Trick and Other Interesting Information...

»  »  CSS Tips - CSS Sprites

15 Juni 2012

CSS Tips - CSS Sprites

CSS Sprite

CSS Sprites - menggabungkan beberapa file gambar menjadi satu gambar

CSS Sprites!! Pernahkah dengar nggak??? Sprite... Hmm... sejenis minuman temannya Coca-Cola mungkin!!! ha.. ha... :D

CSS Sprites itu merupakan tekhnik CSS untuk menggabungkan beberapa file gambar (khusus gambar yang berdimensi kecil) menjadi satu gambar utuh. Tujuan utama pembuatan CSS Sprites ini adalah untuk mengurangi waktu delay download resource & HTTP Requests file-file gambar sebelum digabungkan.

Keuntungannya tentu saja waktu load web/blog menjadi lebih optimal (singkat/cepat terbuka), alasannya seperti di atas ditambah pengurangan karakter code CSS yang secara langsung berdampak pada penurunan/pengurangan ukuran file (file size) CSS.

ok!!! Langsung praktek & lihat contohnya saja. Gambar yang akan dipakai pada contoh artikel ini antara lain logo gambar beberapa merk sepatu sport terkemuka (Adidas, Kappa, Nike, Puma & Reebok) yang mempunyai ukuran tinggi (height) sama (75px);
  1. Adidas.png → Dimensi (px) 115 x 75
  2. Adidas-Hover.png → Dimensi (px) 115 x 75
  3. Kappa.png → Dimensi (px) 96 x 75
  4. Kappa-Hover.png → Dimensi (px) 96 x 75
  5. Nike.png → Dimensi (px) 144 x 75
  6. Nike-Hover.png → Dimensi (px) 144 x 75
  7. Puma.png → Dimensi (px) 150 x 75
  8. Puma-Hover.png → Dimensi (px) 150 x 75
  9. Rebook.png → Dimensi (px) 157 x 75
  10. Rebook-Hover.png → Dimensi (px) 157 x 75
Logo Sepatu Adidas

Logo Adidas

Logo Adidas Hover

Logo Adidas Hover

Logo Kappa

Logo Kappa

Logo Kappa Hover

Logo Kappa Hover

Logo Nike

Logo Nike

Logo Nike Hover

Logo Nike Hover

Logo Puma

Logo Puma

Logo Puma Hover

Logo Puma Hover

Logo Reebok

Logo Reebok

Logo Rebook Hover

Logo Rebook Hover

Misal akan membuat Hyperlink (tautan link) namun menggunakan file gambar logo sepatu sport di atas sebagai ganti Hyperling text. Code CSS yang ditulis seperti ini:



#tutorialSpryte {
width: auto;
height:75px;
margin:15px 0 15px 20px
}

#tutorialSpryte div a {height:75px}

#tutorialSpryte div.adidas a, #tutorialSpryte div.kappa a, #tutorialSpryte div.nike a, #tutorialSpryte div.puma a, #tutorialSpryte div.reebok a {
text-decoration: none;
border-bottom:none;
overflow: hidden;
text-indent: -9000px;
float:left
}

#tutorialSpryte div.adidas a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtggpiQPe9fBS4Z7g81eCgAFDUn5faudeIrxPhWaw9gNpgeUObiTnBwUyjAWxTb3jb1Lx8HHSTtmS4O92IWZXxiHwo96BhVJ_QlDfC997thakI8IQKqImTwqe8VxdaD5o2CVlOUzkFBGU/s200/Adidas.png) no-repeat;
width:115px
}

#tutorialSpryte div.adidas a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNBRj3Rxj576Tihlj_tRkjiwQKioG32fDdHLDQH_120YLehoLR1DdmyZsodO8zLC1RLl2WNdYfHUokdVrlu1adXputtR7rTCQNKkYUUJ6VLokfjIqa1FZHVXHSDMDN1OlNAAIXWOtII7k/s200/Adidas-Hover.png) no-repeat
}

#tutorialSpryte div.kappa a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdVCPJGhwy85ORH8G47xSUTuVqvCtxZuony2DNmloADqzaQAa5W8mMOiCOBUIb8PzzF9HFU5GKsm98gz8VjgLJqVOVp_YE160EOIdOijfeOK3jF1NMpbmvYosthZmxX0MfoLdO2dFvaIM/s200/Kappa.png) no-repeat;
width:96px
}

#tutorialSpryte div.kappa a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMlz5Wl0KuvZQ0d_MlgXs8C5simVGk7hbDGgKfFD12kmsgCbO90arsCq7RQtz9qmH_97doVdOaCz6KaDBVFrnMFxWRVnlyoXkzioF84O0xwaQOe5dWkrUxrDUuT6NT1a5TMFq5kogFkvs/s200/Kappa-Hover.png) no-repeat
}

#tutorialSpryte div.nike a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhxmJqb3Fjz8BvvIVK3oCvPw1U2VpQJpw7yqFUPDlkRVZNPlgFUXnEFri0JKO0C8C3jjKd3s-v6eD_VTJbpOvzJTw5RevRuv_8L8Mj3YEnp63EBsEv1xzF3UixWYcqPVHpgVRWqwD3lR8/s200/Nike.png) no-repeat;
width:144px
}

#tutorialSpryte div.nike a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3kg1N7hqGyUdGGClYuME_HeWZJ9m_xlB5W_IZTq2Oux-cNmmF_2BkDfkuBtlDmrwf8kFB2ZgfUBh1AppawxPEvdJInsG2czLAVCpbLU-KMxycQa0V0oFoVlZH3clNG_NPC93pxb9ligY/s200/Nike-Hover.png) no-repeat
}

#tutorialSpryte div.puma a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicFgftgCQYNeIGzRROlcpPk-_mR-R5P2zMbHgGBT5cfIzBeKmCxzEvD1hPccbR_1I3gRfRJuIJd7rkQ7x2VEyZHODIjI4BHmLxo6QbUXVcJOm95bAYhkbCbrQuf1jNeEeMJYREwwqVkLU/s200/Puma.png) no-repeat;
width:150px
}

#tutorialSpryte div.puma a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG45ie4078SqOswZ5B5ChGluWrrzZ4ovaf9WdyNpF3ube9iePOn2D6iWPFem0RulcTdx5GYrPTlmHRnXMocxAzQ02TTD7ZEk489HDTD7o2HT9BBaxjV42qmkv2a6DWtdhVO1hTt2UONHM/s200/Puma-Hover.png) no-repeat
}

#tutorialSpryte div.reebok a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi06dWgXP2yttkm2PUMLPHR5LHSkUaCYuwgPQCs7_rsfl3kwoaWDyzYyTjhE0rARTcIZqLcnRjLKmqZl6QrGvpzdEhDYyZ9ScYwygcg-tE4eBpFZ778-766jYqT5PpxDyEQG7__JKKB61c/s200/Rebook.png) no-repeat;
width:157px
}

#tutorialSpryte div.reebok a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC9yG441Mvi1-V5M2bWhzwKFic_iDZ1w0z_9gFKPp3pmau8CEJ3lDUZj8WEIM9o10EEYqSMBbAwzGzCPTAYqiwbaTJwB0BXCyeHxaSuTWb3FbUYTGHcQwRtuGbeASu51Dg3nM7_oUOET8/s200/Rebook-Hover.png) no-repeat
}

Code HTML:



<div id="tutorialSpryte">
<div class="adidas">
<a href="#" title="Keyword Title Adidas">Keyword Adidas</a>
</div>
<div class="kappa">
<a href="#" title="Keyword Title Kappa">Keyword Kappa</a>
</div>
<div class="nike">
<a href="#" title="Keyword Title Nike">Keyword Nike</a>
</div>
<div class="puma">
<a href="#" title="Keyword Title Puma">Keyword Puma</a>
</div>
<div class="reebok">
<a href="#" title="Keyword Title Reebok">Keyword Reebok</a>
</div>
</div>


Hasilnya outputnya seperti ini:
Nah, sekarang mari coba terapkan tekhnik CSS Sprites untuk optimalkan (mengurangi) HTTP Request, Download Time loading halaman web & penurunan file size CSS. Jika mampu atur/olah gambar sediri, silahkan lakukan. Namun untuk memudahkan & mempersingkat penulisan pada artikel ini, CSS Sprites akan dibuat menggunakan tool online. Persiapkan dahulu beberapa gambar yang ingin dibuat Sprites, kemudian kunjungi situs ini.

Hitung berapa jumlah file gambar yang ingin dibuat sprite → klik tombol NEED MORE? untuk menambah text field upload sampai mencukupi jumlah file gambar (10 file gambar pada artikel ini).
  1. Upload berurutan antara file gambar normal & hover.
  2. Padding between elements: = isikan 0
  3. Border around the whole image: = isikan 0
  4. Align elements: pilih top → menghilangkan white space width (lebar) karena tinggi masing-masing gambar sama (75px). Jika pilih left, file size gambar akan membengkak.
  5. Background color: pilih transparent
  6. Klik tombol GENERATE!

Upload Gambar

Upload Gambar

Download file CSS Sprites dengan klik pada tombol DOWNLOAD SPRITE PNG Copy paste Property & Value CSS untuk disisipkan pada dokumen file CSS nantinya.
CSS Sprites Results

CSS Sprites Results

CSS Sprites File

CSS Sprites File

Code CSS baru (CSS Sprites)



#cssSpryte {
width: auto;
height:75px;
margin:15px 0 15px 20px
}

#cssSpryte div a {
height:75px;
display:block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-mvx2xz0e82yE7GTvLAIRACLSIofWIF7u0BdpzME9qzWBsRZKG9e03ePt0GRfZvqeEdqdCLYTBH8bM95iQuO5vDg6JF1JIYG5QYzIi1_SFTcB1gYvyG0YxnMvH0UXz2hnYRQfxSaTAyM/s1600/CSS-Sprites.png)
}

#cssSpryte div.adidas a, #cssSpryte div.kappa a, #cssSpryte div.nike a, #cssSpryte div.puma a, #cssSpryte div.reebok a {
text-decoration: none;
border-bottom:none;
overflow: hidden;
text-indent: -9000px;
float:left
}

#cssSpryte div.adidas a {
background-position: 0px 0px;
width:115px
}

#cssSpryte div.adidas a:hover {
background-position: -115px 0px
}

#cssSpryte div.kappa a {
background-position: -230px 0px;
width:96px
}

#cssSpryte div.kappa a:hover {
background-position: -326px 0px
}

#cssSpryte div.nike a {
background-position: -422px 0px;
width:144px
}

#cssSpryte div.nike a:hover {
background-position: -566px 0px
}

#cssSpryte div.puma a {
background-position: -710px 0px;
width:150px
}

#cssSpryte div.puma a:hover {
background-position: -860px 0px
}

#cssSpryte div.reebok a {
background-position: -1010px 0px;
width:157px
}

#cssSpryte div.reebok a:hover {
background-position: -1167px 0px
}

Code HTML:



<div id="cssSpryte">
<div class="adidas">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD2rn3_pzJv-5mjFOrk6Vwcng_JGE-k5EZX5ci7XhJMNb9ra5GwBiOWdqe2HGfH1t-dTScvIjrscsHXKiR_VbRhfr4sykZrWWMCDML8EY4LJHuI4A9MymC3p7cY9AINHasBv0AjE3CBRQ/s1600/Adidas-Custom-Logo.png">Adidas Logo</a>
</div>
<div class="kappa">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelOU3veJvtwBZehNcIEDdufpN2xcge_mTYY51j-ZTWguMyOIbJqBXVvJPwQYLwgkYDS6VXIfNc4pi6Y_L2uEyY2FHtKv08118f8Ey0KD4TfZB3e0TgAQdNlsZ7RYvmOJAJX4_e8pHAnk/s1600/Kappa-Custom-Logo.png" title="Kappa Custom Logo">Kappa Logo</a>
</div>
<div class="nike">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfVRtBmhv_aYJWdgf-Cv7nlDcOVpiqAisNvQsRnH_1L-nEdQSBc25kzu7PifoQluZfa2QSbtrtlzu8fW9R1kVLAICMbIG44ry2x7Ub9Dd2b2bDI-wOP-jqcAYhCyw_TdD6CbSSd_Zj1XQ/s1600/Nike-Logo.png" title="Nike Custom Logo">Nike Logo</a>
</div>
<div class="puma">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEyDlxoXNCEnOFrWI-VbsjN0t920wwR6JCxXXWV73Cjintc_3GX8g00vmFrJCdrSmkYmRCZNEVMCjkO_iwWGy75ZrVjmt_GQXv-5DaDLPFDSJ-QuOOkuNgXjBqmWA_CrjVmE9ronV5Jhk/s1600/Puma-Custom-Logo.png" title="Puma Custom Logo">Puma Logo</a>
</div>
<div class="reebok">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZNiByy58WRhA1_G6yEnW0cRabwLfodHuiOmZ4y9ix466zUiZu1uwXT1AXgVxbFa6FX2MfAZmkZYq6TeEX5qhsVXsiRpXZjmpJuK0AYIIKiImyuRWVMkfwPABnXvs6ssZIDu0x1kDLV1I/s1600/Reebok-Custom-Logo.png" title="Reebok Custom Logo">Reebok Logo</a>
</div>
</div>


HTML Output:
Voila!!! Terlihat sama persis kan output html nya? Tapi tunggu dulu, berikut perbandingan kecepatan loading web sebelum dan sesudah CSS Sprites dibuat.

Cek dokumen sebelum CSS Sprites di sini       Cek dokumen setelah CSS Sprites di sini       Bandingkan di sini
CSS Sprites: Global Statistics (Nilai kecil semakin baik)
  Sebelum Sesudah
Total HTTP Requests: 12 3
Total Size: 96188 bytes 93785 bytes

CSS Sprites - Global Statistik

CSS Sprites - Global Statistik

CSS Sprites: Object Size Totals (Nilai kecil semakin baik)
Object type Size (bytes) Download @ 56K (seconds) Download @ T1 (seconds)
  Sebelum Sesudah Sebelum Sesudah Sebelum Sesudah
HTML: 1051 1045 0.41 0.41 0.21 0.21
HTML Images: 0 0 0.00 0.00 0.00 0.00
CSS Images: 93214 91639 20.58 18.46 2.49 0.69
Total Images: 93214 91639 20.58 18.46 2.49 0.69
Javascript: 0 0 0.00 0.00 0.00 0.00
CSS: 1923 1101 0.58 0.42 0.21 0.21
Multimedia: 0 0 0.00 0.00 0.00 0.00
Other: 0 0 0.00 0.00 0.00 0.00

CSS Sprites - Object Size Totals

CSS Sprites - Object Size Totals

CSS Sprites: Download Times (Nilai kecil semakin baik)
Connection Rate Sebelum Sesudah
14.4K 76.95 seconds 73.29 seconds
28.8K 39.68 seconds 36.94 seconds
33.6K 34.35 seconds 31.75 seconds
56K 21.57 seconds 19.29 seconds
ISDN 128K 8.27 seconds 6.32 seconds
T1 1.44Mbps 2.91 seconds 1.10 seconds

CSS Sprites - Download Times

CSS Sprites - Download Times

Dari hasil perbandingan terlihat jelas, menggunakan CSS Sprites terbukti dapat mempercepat akses loading web dengan mengurangi waktu delay download resource file-file gambar, HTTP Requests & menurunkan ukuran file (file size) CSS.
:)
Diposting oleh di
Label: , , , , , ,

1 komentar:

  1. Tingkatkan PageSpeed Google Pada CMS WordPressJumat, 15 Juni, 2012

    [...] gambar berdimensi kecil menjadi satu file gambar (menggunakan CSS Sprite) jika memungkinkan untuk mengurangi delay [...]

    BalasHapus

Langganan: Posting Komentar (Atom)

Copyright © 2013 Linggih Note - Several Rights Reserved. Template Designed by Linggih

Loncat ke Atas ↑