Praktikum 7 - CSS Spritesheet

Tujuan

Mengenal dan membuat CSS Spritesheet dari kumpulan gambar.

Alat

JSFiddle

Bahan

royalti free image

Dasar Teori

CSS Sprite

Teknik css sprite adalah teknik untuk menggabungkan beberapa images menjadi satu supaya dalam pemanggilan images hanya satu yang dipanggil meski yang digunakan adalah images yang berbeda sekaligus mengurangi permintaan http://.

Untuk membuat CSS Sprite, yang harus diperhatikan adalah posisi gambar (background-position), ukuran gambar (width - height), dan pengulangan gambar (background-repeat). Posisi dan ukuran gambar nantinya akan menentukan peletakan gambar, sedangkan pengulangan gambar akan berpengaruh terhadap tampilan gambar yang dihasilkan. Untuk itu gunakan CSS Sprite ini pada gambar - gambar yang tidak diulang (no-repeat)

Kelebihan CSS Sprite

Menggunakan css sprite bisa  mempercepat  dalam loading gambar karena dengan meletakkan beberapa gambar dalam 1 file gambar, dapat menghemat proses request gambar ke server. Keuntungan yang lainnya, dan merupakan keuntungan utama dari penggunaan CSS sprite adalah penggunaan bandwidth akan menjadi semakin hemat.

Hasil Praktikum

 

 

Kesimpulan 

Pada praktikum ini kita dapat mengetahui ukuran dan posisi dari foto yang telah dipilih pada spritesheet dengan hanya memanggil atau menaruh kursor di atas foto/gambar yang diinginkan. Ukuran dan posisi gambar ini sangat mempengaruhi hasil gambar yang ingin kita tampilkan.