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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvFz51BSxTqSys41h9BZjmVvZ7B_ojtBv4SO5fuy3y2htavEjX9U_FRF-O9vkcLVTwXrszK9SyWC66y6QE7hb7sC1zMKYbj7m5YMhsyoJQyM5_UTB7KUgO3tZOJNK2s3gKhh1dZtFEsQJ4/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.
Related Posts:
