CSS Image Sprite – Mengurangi http Request

Image sprite adalah koleksi gambar yang digabungkan ke dalam satu gambar. Sebuah halaman web dengan banyak gambar dapat memakan waktu lama untuk memuat dan menghasilkan permintaan beberapa server. Menggunakan gambar sprite akan mengurangi jumlah permintaan server dan menghemat bandwidth. Tips ini merupakan rangkaian dari tips mempercepat loading blog melalui Compress HTML yang telah dibahasa sebelumnya.

Dari sekian banyak cara mengoptimalkan loading website/blog, Salah satunya adalah dengan mengurangi banyaknya http request. http request adalah proses permintaan suatu file dari browser ke server (webhosting) untuk kemudian didownload dan ditampilkan pada browser. Dan satu file (sekecil apapun) yang diunduh/download akan terhitung satu http request. Sehingga ketika membuka satu halaman situs, artinya kita meminta sekian banyak proses http requests mulai dari file stylesheet, gambar, javascript dan lain-lain sampai halaman terbuka sepenuhnya. Semakin banyak http request maka akan memperlambat loading suatu halaman.

Pertanyaannya adalah bagaimana mengoptimaslisasi dan mempercepat loading suatu website atau blog melalui CSS Image Sprite? Pada kesempatan ini saya akan mencoba memberikan tips tentang blog yaitu mengurangi request http dengan CSS Image sprite.

Langkah pertama adalah mengetahui seberapa banyak http request pada suatu website atau blog. Untuk itu silahkan cek di GTmetrix, masukkan url blog Anda dan lihat hasilnya:

Pada hasil test diatas menunjukkan bahwa jumlah requests http yaitu 52 yang diunduh untuk menampilkan halaman. Salah satu cara mengurangi jumlah requests http nya adalah dengan menggabungkan gambar gambar yang ada pada blog atau website kita dengan cara Image Sprite.

Langkah kedua, silahkan kelompokkan gambar yang ada pada website atau blog dengan memilih gambar yang formatnya: no-repeat.
Contoh pada blog Tokotua Forex ini menggunakan Image Sprite, sebagai berikut:

Langkah ketiga, gunakan salah satu tools CSS Image Sprite Generator yaitu cssportal.com untuk menggabungkan gambar gambar tersebut. Silahkan upload gambar yang sudah disiapkan, perhatikan gambar

Pada menu Options, edit sesuai dengan keinginan agar posisi gambar tidak bertumpuk.

• Offset: ini merupakan jarak antara gambar satu dengan yang lainnya.
• Direction: Pilih format Vertikal.
• File Type: Pilih format png.

Pada menu Sprite, merupakan hasil dari gabungan gambar yang telah di upload, klik Open image in a new window untuk mengunduh/download gambar hasil dari Sprite.

Langkah keempat, perhatikan menu Usage (CSS Code) ini  merupakan CSS property yang akan kita tempatkan pada template agar posisi gambar hasil sprite tadi bisa sesuai penempatannya pada website atau blog kita.

Contoh:

.post-author,
.post-labels,
.post-timestamp,
.post-comment-link a.comment-link,
.Label ul li a {
background: url(http://3.bp.blogspot.com/-R3j4whxT3ko/URx1kdEJ7yI/AAAAAAAACYw/TKlB0z7RVW4/s1600/aa.png) no-repeat;
}

.post-author {
background-position: 0px0px;
padding-left: 22px
}

.post-timestamp {
background-position: 0px-36px;
padding-left: 22px
}

.post-labels {
background-position: 0px-71px;
padding-left: 22px
}

.post-comment-link a.comment-link {
background-position: 0px-107px;
padding-left: 22px
}

.Label ul li a {
background-position: 0px-175px;
color: #333;
margin-left: -15px;
padding-left: 15px
}

Catatan:

• Sesuaikan kode property CSS yang ada pada blog Anda agar tidak terjadi kesalahan, karena kode CSS yang digunakan pada contoh diatas adalah kode CSS blog Tokotua Forex.
• Untuk background-position yang berwana biru menandakan X (Posisi Horizontal) dan warna merah Y (Posisi Vertikal). Silahkan diubah jika posisi gambar belum sesuai.

Setelah semua selesai, sebelum di save pratinjau terlebih dahulu dan sesuaikan posisi gambarnya agar lebih sempurna. Selamat mencoba jika ada yang kurang dimengerti silahkan bertanya melalui kotak komentar dibawah ini.

• Tweet
• Share
• Share
• Share
• Share