Gambar sprite telah wujud di sini sejak tahun 1970-an. Mereka digunakan untuk animasi komputer pertama di Atari dan konsol lain. Seiring berjalannya waktu mereka semakin kurang digunakan oleh pemaju front-end yang mahukan grafik yang lebih maju (baca: realistik) untuk 3D dan realiti maya.
Namun, dalam beberapa tahun kebelakangan ini, mereka telah kembali.
Sprite adalah istilah grafik komputer untuk bitmap dua dimensi yang disatukan ke pemandangan yang lebih besar.
Dalam beberapa tahun kebelakangan ini, Facebook, Twitter, Instagram, dan banyak platform media sosial lain menjadi seperti orang gila. Dengan pertumbuhan, keperluan mereka untuk mengoptimumkan sedapat mungkin dan mengecilkan ukuran permintaan pelayan. Ketika itulah gambar sprite CSS kembali ke arus perdana.
Untuk platform seperti Facebook - yang mempunyai lebih dari 1 bilion pengguna - menunjukkan ikon, gambar, dan kandungan serupa memerlukan banyak permintaan pelayan. Permintaan itu tidak perlu membebani lalu lintas.
Jadi apa yang anda lakukan untuk mengurangkan permintaan pelayan dan lebar jalur? Beralih ke sprite gambar CSS.
Daripada membuat permintaan untuk gambar profil anda, gambar profil rakan anda, gambar kecil album anda, dan lain-lain, sprite membolehkan anda menggunakan satu gambar, yang bermaksud hanya satu permintaan. Anda boleh memanipulasi gambar tersebut untuk menunjukkan gambar tersebut sebagai bahagian dari satu gambar yang lebih besar.
Mari lihat contoh yang melibatkan bendera:
Sekarang mari kita lihat bagaimana ia berfungsi:
Seperti yang anda lihat dalam kod di atas, kami telah menyiapkan pangkalan yang terdiri dari tiga div, di mana setiap div akan menjadi pembawa sprite.
Mula-mula kami memilih div dengan ID pertama. Div kami akan mempunyai ukuran tinggi dan lebar yang akan ditunjukkan di halaman kami. Sebagai latar belakang, kami akan memuatkan gambar dengan URL (“//i.postimg.cc/R0N7nkH9/flags.png") .
Perkara seterusnya adalah memperkecil / menaikkan gambar latar dengan ukuran latar: 1400 piksel. (Kita dapat menggunakan ukuran, persentase, em, atau ukuran piksel sebenarnya.) Parameter ini akan memungkinkan kita untuk "memperbesar" gambar hingga titik di mana hanya bahagian tertentu dari gambar yang akan ditampilkan.
Terakhir, dua param yang muncul setelah latar belakang
URL (“// i.postimg.cc/R0N7nkH9/flags.png"), akan memindahkan bahagian gambar utama, yang akan kelihatan di sepanjang paksi X dan Y. Ini bermaksud bahawa dalam kes ini latar belakang:
URL (“// i.postimg.cc/R0N7nkH9/flags.png") -86px -87px; kami akan menunjukkan bahagian yang diimbangi dari bahagian atas gambar dengan 87 piksel dari atas dan 86 piksel dari kiri .
Nombor pertama ( -86px ) bermaksud paksi-X di mana negatif bermaksud bergerak dari kiri ke kanan dan positif bermaksud pergi dari kanan ke kiri. Nombor kedua (-87px) digunakan untuk mengimbangi dari atas ke bawah, di mana peraturan terbalik berlaku, nombor positif bermaksud pergi dari bawah ke atas, dan negatif tentu saja dari atas ke bawah.
Seperti yang anda lihat pada gambar asal, bendera yang kami peroleh (Bosnia) memang kedua dari atas dan kedua dari kiri.
Cukup bagus? OK mari kita teruskan.
Sekarang mari kita isi div dengan ID kedua. Peraturan yang sama untuk penyediaan akan berlaku dan satu-satunya perubahan adalah bahawa dalam hal ini, kita akan tetap berada pada paksi X yang asli (0px), dan arah Y akan pergi dari bahagian bawah menuju ke atas (89px). Sekali lagi jika anda memeriksa gambar asal, anda mungkin melihat bahawa (Uzbekistan) pertama dari bawah, dan pertama dari kiri.
Dan terakhir, tetapi tidak kurang pentingnya ...
Ya, terakhir kami mengisi div terakhir dengan ID ketiga. Peraturannya sama, dan jika anda meneka bahawa kami bergerak dari bawah ke atas, betul itu benar.
Sekarang saat kebenaran….
Dalam kes di atas, kami bergerak di sepanjang paksi X dan Y untuk menunjukkan bahagian gambar tertentu dengan bendera. Ke kanan ke kiri dan ke bawah kami mendapat Bosnia (paksi-X), dari bawah dan kiri (paksi-Y) kami mendapat Thailand dan Uzbekistan. Seperti yang anda lihat, kami hanya menggunakan satu gambar, dan itu hanya bermaksud satu permintaan untuk gambar.
Penting untuk diketahui bahawa semasa anda membina sprite, gambar asas itu harus mempunyai bahagian gambar yang sama di dalamnya, untuk kemudahan anda sendiri. Seperti dalam kes ini di mana kita bergerak ke kiri dan kanan, atas dan bawah, dengan ukuran bahagian ditambah dengan ruang putih. Uzbekistan (89px) dan Thailand (178px) mempunyai perbezaan 89px yang merupakan ukuran sebenarnya (87px) ditambah ruang putih (1px + 1px).
Ya, anda juga boleh membuat animasi.
Untuk membuat gaya animasi sekolah lama yang manis dan sejuk ini, kami hanya memerlukan sifat animasi CSS. Dalam kes ini, kami memindahkan gambar asal di sepanjang paksi-X, dan kami mendapat animasi gaya lama ini. Percayalah dengan sprite, tidak ada batasan.
Semudah itu :)
Saya harap anda seronok membaca artikel ini.
Nantikan lebih banyak lagi…
