Belajar membuat css image sprite sederhana

belajar css

Apa itu css sprite ?

Pada dasarnya CSS image sprite menggabungkan dari beberapa gambar yang berbeda menjadi satu gambar. Menggunakan sprite gambar akan mengurangi jumlah permintaan server dan menghemat bandwidth. Sebuah halaman web dengan banyak gambar dapat mengambil waktu pemuatan menjadi lebih lama. Untuk menampilan satu gambar dari gabungan beberapa gambar, Anda bisa menggunakan property background-position.

Keuntungan menggunakan css sprite

Sebuah halaman web jika terlalu banyak gambar bisa memakan waktu pemuatan menjadi lebih lama, itu semua karena secara otomatis jumlah permintaan server akan bertambah, dan juga akan lebih boros penggunaan bandwidth. Solusinya, Anda bisa menggunakan teknik sprite gambar, Berikut keuntungan menggunakan teknik sprite gambar:

  • Mengurangi jumlah permintaan HTTP yang dimuat browser ke server
  • Meningkatkan waktu pemuatan halaman web
  • Menghemat bandwidth

Sebagai ilustrasinya Anda bisa melihat gambar dibawah ini:

expresi satu expresi dua expresi tiga expresi empat
hasil tanpa sprite

Perhatikan gambar diatas. Jika tidak menggunakan teknik image sprite, permintaan HTTP yang dimuat browser ke server membutuhkan 4 request dan total ukuran dari 4 gambar berbeda tersebut menjadi 46.5kb.

image yang digabungkan
hasil dengan image sprite

Perhatikan gambar diatas. Jika menggunakan teknik image sprite, permintaan HTTP yang dimuat browser ke server membutuhkan 1 request dan total ukuran gambar yang digabungkan menjadi 21.7kb.

Membuat css image sprite

Untuk membuat image sprite, Pertama-tama Anda harus menggabungkan beberapa gambar berbeda menjadi satu gambar yang tunggal. Anda dapat membuat sprite sendiri menggunakan alat pengeditan gambar yang Anda suka. Agar lebih mudah menghitung letak posisi, sangat disarankan menggunakan gambar dengan ukuran yang sama, dan menempatkan gambar dengan memperhitungkaan offset agar lebih mudah dalam menghitung letak kordinat.

menggabungkan gambar untuk css image sprite

Agar tidak bingung mari kita praktekan langsung:

Contoh:

Editor Online
  1. div {
  2. background: url(“https://hendky.com/editor/gambar/sprite.png”);
  3. background-repeat: no-repeat;
  4. background-color: yellow;
  5. width: 150px;
  6. height: 150px;
  7. margin-bottom: 2%;
  8. }
  9. #satu {
  10. background-position: 0 0;
  11. }
  12. #dua {
  13. background-position: -150px 0;
  14. }
  15. #tiga {
  16. background-position: 0 -150px;
  17. }
  18. #empat {
  19. background-position: -150px -150px;
  20. }

Leave a Reply

Your email address will not be published. Required fields are marked *