CSS TutorialLesson 37Preview gratis
CSS Image Sprites
Lesson ini bagian dari CSS · Semua level
Ringkasan
Sprite adalah satu berkas gambar yang berisi banyak ikon kecil berdampingan. Dengan memanfaatkan background-position dan ukuran kotak yang tepat, kita menampilkan hanya satu bagian ikon per elemen sehingga jumlah permintaan gambar berkurang dan halaman lebih cepat dimuat. Teknik ini lazim dipakai untuk ikon navigasi, tombol, dan elemen dekoratif kecil.
Poin kunci
- Satu gambar sprite memuat banyak ikon yang dilihat lewat background-image pada elemen.
- background-position dipakai menggeser sprite agar bagian ikon yang diinginkan tampil.
- Ukuran kotak elemen disamakan dengan ukuran ikon agar potongannya pas.
- Keuntungan utama: mengurangi jumlah permintaan HTTP dan konsumsi memori peramban.
- Perawatan sprite lebih rumit; untuk proyek besar, SVG atau ikon font sering lebih praktis.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.