CSS Sprites - menggabungkan beberapa file gambar menjadi satu gambar
CSS Sprites!! Pernahkah dengar nggak??? Sprite... Hmm... sejenis minuman temannya Coca-Cola mungkin!!! ha.. ha... :DCSS 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);
- Adidas.png → Dimensi (px) 115 x 75
- Adidas-Hover.png → Dimensi (px) 115 x 75
- Kappa.png → Dimensi (px) 96 x 75
- Kappa-Hover.png → Dimensi (px) 96 x 75
- Nike.png → Dimensi (px) 144 x 75
- Nike-Hover.png → Dimensi (px) 144 x 75
- Puma.png → Dimensi (px) 150 x 75
- Puma-Hover.png → Dimensi (px) 150 x 75
- Rebook.png → Dimensi (px) 157 x 75
- Rebook-Hover.png → Dimensi (px) 157 x 75
Logo Adidas
Logo Adidas Hover
Logo Kappa
Logo Kappa Hover
Logo Nike
Logo Nike Hover
Logo Puma
Logo Puma Hover
Logo Reebok
Logo Rebook Hover
#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).
- Upload berurutan antara file gambar normal & hover.
- Padding between elements: = isikan 0
- Border around the whole image: = isikan 0
- Align elements: pilih top → menghilangkan white space width (lebar) karena tinggi masing-masing gambar sama (75px). Jika pilih left, file size gambar akan membengkak.
- Background color: pilih transparent
- Klik tombol GENERATE!
Upload Gambar
CSS Sprites Results
CSS Sprites File
#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
| Sebelum | Sesudah | |
|---|---|---|
| Total HTTP Requests: | 12 | 3 |
| Total Size: | 96188 bytes | 93785 bytes |
CSS Sprites - Global Statistik
| 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
| 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
:)
