earth

Guestbook

/* Iklan google ads */
Bagi template blog yang mamakai banyak gambar, CSS Sprite merupakan suatu keharusan. Bayangkan, jika template blog sobat memakai 10 gambar, maka ketika loading page akan memanggil 10 gambar tersebut satu persatu. Tentu proses ini akan memperlambat loading, apalagi jika gambar tersebut lebih dari 10 buah.

SC Community's Blog misalnya, memiliki puluhan gambar pada template-nya. Untuk social icon saja ada 27, belum lagi untuk header, search, navigation, dll. Tentu hal ini sangat memberatkan.

Dengan CSS Sprite, gambar-gambar social icon tersebut digabungkan menjadi satu gambar (lihat gambar di bawah) sehingga ketika loading page tidak memanggil (membaca) 27 gambar melainkan hanya 1. Jadi cukup ringan kan? Untuk membuat CSS Sprite, yang harus diperhatikan adalah posisi gambar (background-position), ukuran gambar (width dan hight), dan pengulangan gambar (background-repeat). Posisi dan ukuran gambar akan menentukan peletakan gambar nantinya, sedangkan pengulangan gambar akan berpengaruh terhadap tampilan gambar yang dihasilkan. Untuk itu gunakan CSS Sprite ini pada gambar-gambar yang tidak diulang (no-repeat).
Syntax CSS Sprite
Pada dasarnya gambar yang ditampilkan terletak pada koordinat (x, y), dengan x = 0px dan y = 0px. Dengan adanya penggabungan beberapa gambar maka koordinat gambar tertentu yang akan ditampilkan harus dipundurkan sebanyak q kali lebar gambar sebelumnya (jika berada pada absis atau dibuat horizontal), atau dinaikkan sebanyak q kali tinggi gambar sebelumnya (jika berada pada ordinat atau dibuat vertikal) agar gambar tersebut menjadi berada pada koordinat (0, 0).

Secara umum syntax CSS Sprite adalah sebagai berikut:
background: url(URL Gambar Sprite) xpx ypx;
atau bisa juga ditulis seperti ini:
background: url(URL Gambar Sprite);
background-position: xpx ypx;

Misalnya menggabungkan gambar ukuran 24 x 24 (Gbr. 1, 2, dan 3) dan ukuran 36 x 36 (Gbr. 4 dan 5) dengan tanpa jarak (padding), seperti berikut:
maka CSS untuk gambar baris pertama (ukuran 24 x 24) adalah:
CSS Gambar 1 (koordinat (0, 0)) :
background: url(URL Gambar Sprite) 0px 0px;
width: 24px; hight: 24px;

CSS Gambar 2 (mundur 1 x 24px) :
background: url(URL Gambar Sprite) -24px 0px;
width: 24px; hight: 24px;

CSS Gambar 3 (mundur 2 x 24px) :
background: url(URL Gambar Sprite) -48px 0px;
width: 24px; hight: 24px;
Demikian seterusnya jika gambar tersebut diletakkan secara horizontal.

Sedangkan CSS untuk gambar baris kedua (ukuran 36 x 36), karena berada pada ordinat (sumbu y) tidak sama dengan 0 maka:
CSS Gambar 4 (naik 1 x 24px):
background: url(URL Gambar Sprite) 0px -24px;
width: 36px; hight: 36px;

CSS Gambar 5 (mundur 1 x 36px dan naik 1 x 24px) :
background: url(URL Gambar Sprite) -36px -24px;
width: 36px; hight: 36px;

Jika ada gambar pada baris ketiga maka ordinatnya adalah -60px (tinggi gambar baris pertama ditambah tinggi gambar baris kedua). Demikian seterusnya.
Cara menggabungkan gambar
Untuk menggabungkan gambar bisa menggunakan Adobe Photoshop dan disimpan dalam format file png, atau jika ingin mudah, sekarang sudah banyak situs penyedia layanan CSS Sprite Generator, seperti: situs csssprites.com, spritegen.website-performance.org, www.spritecow.com, dll, yang bisa kita manfaatkan.
Contoh gambar sprite template SC Community's Blog
Ok, segitu aja sob. Semoga bermanfaat .....
  • Artikel Terkait Dengan CSS dan Javascript

    Terimakasih sudah membaca artikel SC Community's Blog

    8 komentar

    Artikel yang sangat menarik, perlu dipelajari lebih lanjut.
    Good post...

    24 September 2012 19.54  

    cari ide posting css sprite... ada di sini, terimakasih Bro.

    14 November 2012 23.44  

    masih bingung....bagaimana caranya gabungkan 2 ccs yah?
    Tokoh Bima

    20 April 2013 17.31  

    makasih kang tipsnya sangat bermanfaat nih

    3 Juli 2013 22.26  

    Masih kurang paham saya, soalnya masih newbie gan: kunjungannya gan disini:
    http://asoftware-community.blogspot.com/

    13 Oktober 2014 11.55  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler