Konsep sprite sudah lama wujud. Ini adalah salah satu teknik yang paling sering digunakan dalam industri permainan untuk mempercepat proses memaparkan animasi di layar. Dalam artikel ini, kita akan melihat bagaimana teknik ini dapat membantu kita meningkatkan pengalaman pengguna di laman web dengan bantuan CSS Sprites dalam urutan berikut:
- Apa itu Sprite?
- Apa itu CSS Sprite - gambaran keseluruhan ringkas?
- Contoh bagaimana ia membantu dalam Pembangunan Web?
- Kelebihan Menggunakan Sprite CSS
- Apa yang harus dilakukan oleh pembangun semasa bekerja dengan CSS Sprites?
- Bagaimana membuat Lembaran Sprite CSS?
- Bagaimana cara bekerja dengan CSS Sprites?
- Syarikat yang menggunakan CSS Sprites
Apa itu Sprite?
Sprite adalah gambar tunggal yang merupakan bahagian dari pemandangan yang lebih besar dalam permainan. Pelbagai sprite kemudian digabungkan menjadi gambar besar yang disebut kepingan sprite. Setelah lembaran sprite dimasukkan ke dalam memori, sprite yang berlainan diberikan secara berturut-turut untuk memberi ilusi animasi. Ini dilakukan secara serentak untuk puluhan hingga ratusan sprite yang berbeza untuk menghasilkan pemandangan dalam permainan.
Idea asasnya adalah bahawa lebih cepat memuat gambar dan memaparkan sebahagian daripadanya di mana sahaja diperlukan berbanding memuatkan banyak gambar dan memaparkannya.
Apa itu CSS Sprite: Gambaran keseluruhan pantas?
CSS sprite adalah teknik yang sering digunakan oleh pembangun web untuk mengoptimumkan prestasi laman web. Dalam teknik ini, beberapa gambar yang lebih kecil biasanya dimensi yang sama digabungkan menjadi satu gambar besar yang disebut a kepingan sprite atau set jubin . Lembaran sprite ini kemudian digunakan untuk memaparkan elemen individu di mana sahaja kita memerlukannya.
Biasanya, elemen seperti logo, anak panah navigasi, butang dimasukkan ke dalam helaian sprite kerana ukurannya hampir sama dan sering digunakan di laman web.
Contoh bagaimana ia membantu dalam Pembangunan Web?
Secara amnya, semasa merancang laman web gambar disimpan dan digunakan sebagai fail individu. Oleh itu, apabila pengguna membuka laman web, penyemak imbas harus membuat permintaan HTTP untuk setiap fail ini, memuat turunnya secara berasingan dan memaparkannya. Ini membawa kepada masa muat halaman yang lebih tinggi kerana laman web tertentu boleh mempunyai sebilangan besar gambar yang lebih kecil seperti butang, ikon, logo.
Sprite CSS membantu pemaju untuk menggabungkan gambar kecil yang sering digunakan ini menjadi satu gambar besar. Penyemak imbas kemudian harus memuat turun hanya satu fail yang kemudian digunakanpaparkan bahagian yang diperlukan dengan mengimbangi gambar.
Kelebihan Menggunakan Sprite CSS
Terdapat dua kelebihan utama menggunakan sprite CSS berbanding gambar biasa:
Pemuatan halaman lebih pantas: Meningkatkan masa pemuatan halaman ketika gambar yang digunakan di laman web muncul sebaik sahaja helaian dimuat.
Hasil yang lebih besar dan penggunaan sumber yang lebih rendah: Bukan hanya teknik ini yang meningkatkan pengalaman pengguna akhir dengan membuat halaman dimuat lebih cepat,tetapi juga dapat mengurangkan kesesakan rangkaian kerana permintaan HTTP yang lebih rendah dibuat.
Apa yang harus dilakukan oleh Pembangun semasa bekerja dengan CSS Sprites?
Semasa bekerja dengan gambar individu, pembangun hanya boleh menggunakan tag HTML dan gaya dalam CSS jika diperlukan. Tetapi ketika bekerja dengan CSS Sprites, pembangun perlu melakukan dua perkara khusus:
- Penciptaan Lembaran Sprite
Semasa mengembangkan laman web jika pemaju memutuskan untuk menggunakan sprite CSS, dia harus membuat helaian sprite terlebih dahulu dengan menggabungkan semua elemen yang diinginkan seperti butang, logo, dan lain-lain dalam corak seperti grid. Ini dapat dilakukan dengan menggunakan program penyuntingan gambar seperti Photoshop atau Gimp. Terdapat juga banyak alat dalam talian yang dapat membantu anda membuat helaian sprite. Alat-alat ini dibincangkan kemudian dalam artikel ini.
- Akses elemen sprite tertentu menggunakan Latar belakang-kedudukan CSS harta benda
Setelah helaian sprite siap, pemaju kemudian harus menggunakan atribut CSS untuk mengakses bahagian lembaran yang berlainan.
- lebar: Lebar sprite
- tinggi: Ketinggian sprite
- latar belakang: Rujukan ke lembaran sprite
- Latar belakang-kedudukan: Nilai mengimbangi (dalam piksel) untuk mengakses hanya bahagian helaian sprite yang diperlukan
Bagaimana membuat Lembaran Sprite CSS?
Anda boleh menggunakan mana-mana perisian penyuntingan gambar untuk mengatur gambar anda yang lebih kecil ke dalam grid tetapi dua kaedah yang lebih mudah dibincangkan di bawah:
1. Alat Pembuatan Lembaran Sprite Dalam Talian
Pautan: toptal.com/developers/css/sprite-generator/
Alat ini tidak hanya digunakan secara percuma tetapi juga memberi anda kod CSS yang diperlukan yang dapat digunakan sambil merujuk pada sprite sheet. Anda juga boleh bermain-main dengan sifat yang berbeza seperti meletakkan antara elemen dan mengubah jajarannya.
2. Menghasilkan Lembaran Sprite dengan Sprity
Sekiranya anda menggunakan Grunt, Node atau Gulp, anda boleh memasang pakej yang dipanggil Sprity yang akan membantu anda membuat helaian sprite dalam pelbagai format seperti PNG, JPG, dll.
cara keluar dari program di java
Pertama, anda perlu memasang Sprity menggunakan:
npm pasang sprity -g
Kemudian, untuk menghasilkan sprite sheet, gunakan arahan berikut:
sprity ./output-directory/ ./input-directory/*.png
Bagaimana cara bekerja dengan CSS Sprites?
Dalam contoh ini, kami akan menggunakan helaian sprite berikut:
Seperti yang anda lihat pada gambar di atas, enam ikon (Instagram, Twitter, dan Facebook) telah disusun dalam corak seperti grid. Pada baris pertama, kita mempunyai keadaan normal dan di baris kedua, kita mempunyai keadaan hover mereka (gambar yang muncul setelah kita mengarahkan kursor tetikus ke atasnya).
Sekiranya anda membuat helaian sprite menggunakan alat yang kami bincangkan di atas maka anda sudah mengetahui ofset yang diperlukan dalam CSS tetapi jika anda menggunakan alat lain atau anda hanya diberi beberapa helaian sprite maka jangan risau, kami akan membincangkan kaedah akan membantu anda mendapatkan ofset untuk elemen yang diperlukan.
Mari kita lihat cara yang sangat mudah untuk mendapatkan offset yang diperlukan untuk setiap enam ikon dengan menggunakan MS Paint. Ini mungkin bukan penyelesaian yang ideal untuk bekerja dengan sprite tetapi kerana ia mempunyai ciri yang memberikan koordinat kursor tetikus, ia dapat digunakan untuk mendapatkan koordinat X dan Y yang diperlukan.
Pertama, buka gambar lembaran sprite anda (grid yang mengandungi semua gambar yang lebih kecil) dan bawa kursor tetikus anda di sudut kiri atas sprite yang ingin anda ambil.
Sebaik sahaja anda mempunyai koordinat titik kiri atas sprite anda (gambar Instagram kiri atas), anda boleh memaparkan sprite spesifik ini di mana sahaja diperlukan menggunakan kod CSS:
latar belakang: url ('img_sprites.png')
latar-kedudukan: 0 0
lebar: 125 piksel
tinggi: 125 piksel
Kami menggunakan lebar dan tinggi 125 piksel kerana ikon kami adalah dimensi itu. Untuk mengambil gambar seterusnya (Twitter) dalam baris yang sama, kami menggunakan kod berikut:
latar belakang: url ('img_sprites.png')
latar-kedudukan: -128px 0px
lebar: 125 piksel
tinggi: 125 piksel
Perhatikan atribut latar belakang-kedudukan dalam coretan di atas. (-128 piksel, 0) bermaksud kita mengimbangi lembaran sprite kita ke kiri sebanyak 128 piksel (dengan mengambil padding antara elemen) dan 0 piksel pada Paksi-Y. Sekiranya kita mengakses ikon hover twitter maka atribut latar belakang-kedudukan kita adalah:
latar belakang-kedudukan: -128px -128px
Dengan cara ini, kita sekarang dapat mengakses setiap komponen lembaran sprite kita menggunakan CSS. Mari lihat kod HTML dan CSS lengkap mengenai cara melakukannya.
Langkah 1: Menulis Kod HTML yang diperlukan
Dalam kod di bawah, kami hanya menambah tiga pautan. Juga, kami akan menghubungkan HTML kami dengan helaian gaya (screen.css).
Langkah 2: Menulis CSS yang diperlukan. Pertama, kami akan menggayakan kelas ikon kongsi kami. Di sini, anda dapat melihat bahawa kami merujuk kepada sprite sheet yang kami buat.
/ * Ikon dikongsi Kelas * /
span.icon a: pautan,
span.icon a: dilawati{
paparan:sekatan
teks-inden:-9999px
gambar latar belakang: url (./ img_sprites.png)
latar belakang-ulangan:tidak berulang
}
Langkah 3: Mendapatkan ikon individu dari helaian sprite menggunakan offset.
/ * Ikon Instagram * /
span.instagram a: pautan,
span.instagram a: dilawati{
lebar:125 piksel
ketinggian:125 piksel
latar belakang-kedudukan:0 0
}
/ * Ikon Twitter * /
span.twitter a: pautan,
span.twitter a: dilawati{
lebar:125 piksel
ketinggian:125 piksel
latar belakang-kedudukan:-128 piksel 0
}
/ * Ikon Facebook * /
span.facebook a: pautan,
span.facebook a: dilawati{
lebar:125 piksel
ketinggian:125 piksel
latar belakang-kedudukan:-257 piksel 0
tag html untuk pemecahan baris
}
Langkah 4: Mendapatkan ikon hover dari helaian sprite menggunakan offset.
span.instagram a: berlegar{latar belakang-kedudukan:0 -128 piksel}
span.twitter a: berlegar{latar belakang-kedudukan:-128 piksel -128 piksel}
span.facebook a: berlegar{latar belakang-kedudukan:-255px -128 piksel}
Syarikat yang menggunakan CSS Sprites
Banyak nama besar dalam industri menggunakan CSS Sprites untuk meningkatkan daya tindak balas laman web mereka. Syarikat seperti Google, Facebook, Amazon secara meluas menggunakan kaedah ini kerana ini membantu mereka mengurangkan jumlah permintaan HTTP setiap sesi untuk pengguna tertentu. Ini adalah keuntungan besar apabila kita mengambil kira bahawa syarikat-syarikat ini melayani berjuta-juta pelanggan pada satu ketika.
Sekarang setelah anda memahami apa itu sprite CSS dan bagaimana bekerjasama dengan mereka, anda selangkah lagi dalam perjalanan anda untuk belajar CSS. Konsep seperti sprite adalah penukar permainan pada zaman sekarang kerana menjadi sangat penting bagi pembangun untuk mengekstrak setiap prestasi dari laman web.
Lihat kami yang dilengkapi dengan latihan langsung yang dipimpin oleh instruktur dan pengalaman projek kehidupan sebenar. Latihan ini menjadikan anda mahir dalam kemahiran bekerja dengan teknologi web back-end dan front-end. Ia merangkumi latihan mengenai Pembangunan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada soalan untuk kami? Sila sebutkan di bahagian komen blog 'Gambar HTML' dan kami akan menghubungi anda.