Bisa dilihat pada layar, saya sudah membuatkan halaman sederhana yang memperlihatkan 6 gambar bendera negara. Apabila kita melihat pada source code HTML-nya, masing-masing gambar ini menggunakan elemen image yang merujuk ke nama file gambar yang berbeda. Akibatnya browser harus melakukan request ke server sebanyak 6 kali, untuk mengambil 6 buah file yang berbeda.

Nah, jumlah request ini bisa kita hemat dengan cara menggunakan image sprite. Apakah image sprite itu? Image sprite adalah satu gambar besar yang merupakan gabungan dari beberapa gambar kecil. Nantinya keenam gambar bendara ini akan kita gabung menjadi satu buah gambar seperti ini. Jadi browser cukup melakukan 1 request saja ke server untuk mengambil satu gambar ini, dan kemudian browser bisa menampilkan gambar dari masing-masing bendera negara sama persis seperti halaman ini.

Oke, pertama kita perlu menghasilkan satu buah gambar sprite dari semua gambar bendera kita. Kita bisa buka Google dan melakukan pencarian dengan kata kunci sprite generator. Kita buka hasil pencarian dari Toptal.com.

Nah pada bagian kiri layar ada tombol untuk memilih file-file gambar kita. Kita tekan tombol tersebut. Dan kita tambahkan keenam bendera kita. Tekan tombol Open. Dan situs Toptal akan membuatkan satu buah gambar sprite yang bisa kita lihat di sebelah kanan.

Perhatikan ada padding diantara gambar bendera ya. Kita hapus dahulu paddingnya menjadi 0 pixel. Dan sekarang gambar yang kita dapatkan sudah tidak memiliki padding.

Bagaimana cara menggunakan sprite ini? Pertama kita tekan dahulu tombol Download dan kita copy file sprite ini di folder yang sama dengan source code HTML kita. Dan kemudian untuk menampilkan benderanya, yang tadinya kita menggunakan tag image merujuk ke file gambar bendera masing-masing, diganti menjadi menggunakan tag div dengan kelas yang sudah dibuatkan pada sebelah kiri gambar sprite ini. Jadi kita tinggal copy paste source code disini ke dalam CSS kita.

Kita perhatikan source code yang dihasilkan oleh situs ini. Perhatikan dulu ke kelas bg-canada. Jadi semua file bendera kita memiliki ukuran lebar 250 pixel dan tinggi 160 pixel. Disini kita sudah melihat ada pengaturan properti width 250 pixel dan height 160 pixel. Dan kemudian untuk mengakses gambar sprite, kita menggunakan properti background dengan url menuju ke file css_sprites.png. Dan perhatikan di sebelah kanan nama file ada koordinat x dan y dari gambar bendera yang akan kita gunakan.

Perhatikan pada gambar sprite di sebelah kanan. Gambar bendera Kanada berada di paling kiri atas. Jadi kita bisa mengakses bendera tersebut dengan menggunakan koordinat 0 0. Atau pada source code yang dihasilkan disini adalah -0 -0.

Kemudian untuk bendera Indonesia, berada di sebelah kanan dari bendera Kanada. Jadi untuk mengakses bendera Indonesia, kita mesti menggeser koordinat x sebanyak 250 pixel ke sebelah kanan. Sedangkan koordinat y tetap 0. Bisa kita lihat pada source code kelas .bg-indonesia, koordinat dari bendera Indonesia adalah -250px -0px.

Selanjutnya kita lihat ke bendera Jepang yang berada di bagian bawah dari bendera Kanada. Untuk mengakses bendera jepang, koordinat x harus tetap posisi 0, sedangkan koordinat y harus turun sebanyak 160 pixel. Kita lihat pada source code kelas .bg-japan, koordinat yang secara otomatis dihasilkan adalah -0 -160px.

Lalu untuk mengakses bendera Korea Selatan yang berada di samping kanan dari bendera Jepang, artinya koordinat x harus digeser ke kanan sebanyak 250 pixel, dan koordinat y harus digeser kebawah sebanyak 160 pixel. Kita lihat pada source code kelas .bg-korea, koordinat yang secara otomatis dihasilkan adalah -250px -160px.

Jadi dari contoh yang saya bahas tadi, teman-teman dapat mengerti ya apakah arti dari kedua nilai di sebelah kanan url. Ini adalah koordinat dari gambar yang hendak kita akses. Dan untuk nilai yang digunakan pada kode CSS adalah nilai minus.

Nah, untuk alignment dari gambar-gambar bendera ini, bisa kita atur lagi di bagian option. Sebagai contoh disini, alignmentnya saya ganti menjadi diagonal. Bisa dilihat pada gambar spritenya, bahwa gambar bendera-bendera akan disusun secara diagonal. Sebagai akibatnya, kita bisa melihat pada source code, bahwa setiap koordinat X akan menjadi kelipatan 250 pixel. Sedangkan setiap koordinat Y akan menjadi kelipatan 160pixel.

Kalau saya ganti alignment gambar menjadi bersusun ke bawah. Maka kode kelas untuk mengaksesnya akan selalu menggunakan koordinat 0 untuk sumbu x dan kelipatan 160 pixel untuk sumbu y.

Dan untuk pilihan terakhir, kita bisa menyusun ke samping. Maka kode kelas untuk mengakses gambar bendera akan selalu menggunakan kelipatan 250 pixel untuk sumbu x, dan nilai 0 untuk sumbu y.

Kita akan menggunakan gambar bendera yang bersusun ke samping. Pertama kita copy source code CSS yang telah diberikan pada bagian kiri situs. Sayangnya disini kita hanya bisa mengcopy satu per satu dari keenam bendera yang ada. Selanjutnya kita bisa menekan tombol download pada gambar sprite, dan menyimpan gambarnya pada folder yang sama dengan source code HTML kita.

Untuk menggunakan gambar sprite, kita tinggal mengganti tag image dengan tag div kosong, yang menggunakan kelas yang diberikan oleh situs Toptal.Com tadi.

Oke, sekarang semua gambar bendera sudah saya ganti menggunakan sprite. Kita simpan dan refresh browser. Dari sisi tampilan hasilnya sama persis dengan source code sebelumnya ya. Perbedaannya sekarang adalah keenam gambar bendera ini merujuk ke satu gambar besar yang berisi keenam gambar, sehingga browser cukup melakukan satu kali request ke server. Ini adalah salah satu satu teknik optimasi agar kita bisa menghemat resource dari server kita.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.