Prak 07 – Membuat CSS Spritesheet

1. Tujuan
Mengenal dan membuat CSS Spritesheet dari kumpulan gambar.

2. Alat
Adobe Photoshop CS6

3. Bahan

4. 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.

5. Hasil Praktikum


REFERENSI
http://www.mohhasbias.com/category/mata-kuliah/programming-multimedia-2016/

Komentar

Postingan populer dari blog ini

Praktikum 5 - Head Turn with Anticipation

Animasi Karakter & Motion Graphics

Tugas Jurnalistik Galeri Foto