CSS Tips CSS Sprites

CSS Tips CSS Sprites

CSS Sprites menggabungkan beberapa file gambar menjadi satu gambar

CSS Sprites!! Pernahkah dengar nggak??? Sprite Hmm sejenis minuman temannya Coca-Cola mungkin!!! ha.. ha 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

http://www.linggih.com | CSS Tips CSS Sprites

CSS Tips CSS Sprites

Adidas Normal

Kappa Normal

Nike Normal

Puma Normal

Reebok Normal

Adidas Hover

Kappa Hover

Nike Hover

Puma Hover

Reebok 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(http://3.bp.blogspot.com/-bVR7CLmr8OU/T9orzQLFssI/AAAAAAAAAPM/VoVvjpD1eE/s200/Adidas.png) no-repeat; width:115px } #tutorialSpryte div.adidas a:hover { background:url(http://2.bp.blogspot.com/-Zjzhm-CoCg8/T9orzRbEHI/AAAAAAAAAPY/lY8Pi08Hq_A/s200/Adidas-Hover.png) no-repeat } #tutorialSpryte div.kappa a { background:url(http://1.bp.blogspot.com/UW3OBsil2nU/T9orzrpq6KI/AAAAAAAAAPk/b4EP9V0jumg/s200/Kappa.png) no-repeat; width:96px } #tutorialSpryte div.kappa a:hover {

http://www.linggih.com | CSS Tips CSS Sprites

CSS Tips CSS Sprites

background:url(http://4.bp.blogspot.com/-otjgmhY0Nv4/T9orzlEuLI/AAAAAAAAAPw/sbd94roRUBg/s200/Kappa-Hover.png) no-repeat } #tutorialSpryte div.nike a { background:url(http://2.bp.blogspot.com/5DDciqhxU9w/T9osZSakfJI/AAAAAAAAAP8/tG0c5VrsqaM/s200/Nike.png) no-repeat; width:144px } #tutorialSpryte div.nike a:hover { background:url(http://2.bp.blogspot.com/cEPMz1rMyik/T9osZtW_v4I/AAAAAAAAAQI/B83L5TnfhaM/s200/Nike-Hover.png) no-repeat } #tutorialSpryte div.puma a { background:url(http://2.bp.blogspot.com/-kdXhogHhJk/T9osZ18i65I/AAAAAAAAAQU/C5JwpgJQh4Q/s200/Puma.png) no-repeat; width:150px } #tutorialSpryte div.puma a:hover { background:url(http://2.bp.blogspot.com/-ZAtiujjeNuw/T9osaGnRN2I/AAAAAAAAAQg/3cG3fJ5eGA/s200/Puma-Hover.png) no-repeat } #tutorialSpryte div.reebok a { background:url(http://4.bp.blogspot.com/55k6isp5gsw/T9oslOeT5pI/AAAAAAAAAQs/44yIrrhNeAk/s200/Rebook.png) no-repeat; width:157px } #tutorialSpryte div.reebok a:hover { background:url(http://1.bp.blogspot.com/-0s_GibnhdU/T9oyS0rBsEI/AAAAAAAAARI/GSNbVdoKb98/s200/Rebook-Hover.png) no-repeat }

Code HTML:
<div id="tutorialSpryte"> <div class="adidas"> <a href="#" title="Keyword </div> <div class="kappa"> <a href="#" title="Keyword </div> <div class="nike"> <a href="#" title="Keyword </div> <div class="puma"> <a href="#" title="Keyword </div> <div class="reebok"> <a href="#" title="Keyword </div> </div>

Title Adidas">Keyword Adidas</a> Title Kappa">Keyword Kappa</a> Title Nike">Keyword Nike</a>

Title Puma">Keyword Puma</a> Title Reebok">Keyword Reebok</a>

http://www.linggih.com | CSS Tips CSS Sprites

CSS Tips CSS Sprites

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!

http://www.linggih.com | CSS Tips CSS Sprites

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

Hasil Sprite PNG File:

Code CSS baru (CSS Sprites)

#cssSpryte { width: auto;

http://www.linggih.com | CSS Tips CSS Sprites

CSS Tips CSS Sprites

height:75px; margin:15px 0 15px 20px } #cssSpryte div a { height:75px; display:block; background: url(http://4.bp.blogspot.com/-UeVA48MLOlA/T9qFai9RrMI/AAAAAAAAATg/JSBL9Qg15g/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;

http://www.linggih.com | CSS Tips CSS Sprites

CSS Tips CSS Sprites

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

Code HTML:
<div id="cssSpryte"> <div class="adidas"> <a href="http://4.bp.blogspot.com/PmDyVPca5KQ/T9pP2inxHuI/AAAAAAAAASc/zgimJH3rstg/s1600/Adidas-Custom-Logo.png">Adidas Logo</a> </div> <div class="kappa"> <a href="http://1.bp.blogspot.com/37fsSoVCeqo/T9pMaDAU3OI/AAAAAAAAASE/RGRKknWePsg/s1600/Kappa-Custom-Logo.png" title="Kappa Custom Logo">Kappa Logo</a> </div> <div class="nike"> <a href="http://2.bp.blogspot.com/-FegvdUksAc/T9pCZ1JycaI/AAAAAAAAARY/_5bSgBtAoZw/s1600/Nike-Logo.png" title="Nike Custom Logo">Nike Logo</a> </div> <div class="puma"> <a href="http://3.bp.blogspot.com/PalsNGhp7gI/T9pP29lPWFI/AAAAAAAAASo/BSU_nsGmG28/s1600/Puma-Custom-Logo.png" title="Puma Custom Logo">Puma Logo</a> </div> <div class="reebok"> <a href="http://3.bp.blogspot.com/4eWgmhUc73U/T9pOwzV3qWI/AAAAAAAAASQ/7SwJRSUxEDU/s1600/Reebok-Custom-Logo.png" title="Reebok Custom Logo">Reebok Logo</a> </div> </div>

HTML Output Lihat di sini

http://www.linggih.com | CSS Tips CSS Sprites

CSS Tips CSS Sprites 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 Total HTTP Requests: 12 Total Size: 3 Sesudah

96188 bytes 93785 bytes

CSS Sprites: Object Size Totals (Nilai kecil semakin baik) Object type Size (bytes) Download @ 56K (seconds) Download @ T1 (seconds) Sesudah 0.41 0.00 18.46 18.46 0.00 0.42 0.00 0.00 Sebelum 0.21 0.00 2.49 2.49 0.00 0.21 0.00 0.00 Sesudah 0.21 0.00 0.69 0.69 0.00 0.21 0.00 0.00

Sebelum Sesudah Sebelum HTML: 1051 1045 0 91639 91639 0 1101 0 0 0.41 0.00 20.58 20.58 0.00 0.58 0.00 0.00

HTML Images: 0 CSS Images: 93214 Total Images: 93214 Javascript: 0 CSS: 1923

Multimedia: 0 Other: 0

http://www.linggih.com | CSS Tips CSS Sprites

CSS Tips CSS Sprites

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

http://www.linggih.com | CSS Tips CSS Sprites

CSS Tips CSS Sprites

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.

Article Source (kualitas Screenshot gambar lebih baik / jika ada):

http://linggih.com/css -tips-css-sprites/

http://www.linggih.com | CSS Tips CSS Sprites

10