Konsep sprite sudah ada sejak lama. Ini adalah salah satu teknik yang paling umum digunakan dalam industri game untuk mempercepat proses menampilkan animasi di layar. Pada artikel ini, kami secara khusus akan melihat bagaimana teknik ini dapat membantu kami meningkatkan pengalaman pengguna di halaman web dengan bantuan CSS Sprite dalam urutan berikut:
- Apa itu Sprite?
- Apa itu CSS Sprite - gambaran singkatnya?
- Contoh bagaimana ini membantu dalam Pengembangan Web?
- Keuntungan Menggunakan CSS Sprite
- Apa yang harus dilakukan pengembang saat bekerja dengan CSS Sprite?
- Bagaimana cara membuat Lembar Sprite CSS?
- Bagaimana cara bekerja dengan CSS Sprite?
- Perusahaan yang menggunakan CSS Sprite
Apa itu Sprite?
Sprite adalah gambar tunggal yang merupakan bagian dari adegan yang lebih besar dalam sebuah game. Beberapa sprite kemudian digabungkan menjadi gambar besar yang disebut sprite sheet. Setelah lembar sprite dimuat ke dalam memori, berbagai sprite dirender secara berurutan untuk memberikan ilusi animasi. Ini dilakukan secara bersamaan untuk puluhan hingga ratusan sprite yang berbeda untuk menghasilkan sebuah adegan dalam game.
Ide dasarnya adalah bahwa jauh lebih cepat memuat gambar dan menampilkan sebagian darinya di mana pun diperlukan dibandingkan dengan memuat banyak gambar dan menampilkannya.
Apa itu CSS Sprite: Gambaran singkat?
Sebuah sprite CSS adalah teknik yang sering digunakan oleh pengembang web untuk mengoptimalkan kinerja halaman web. Dalam teknik ini, beberapa gambar yang lebih kecil biasanya dengan dimensi yang sama digabungkan menjadi satu gambar besar yang disebut a sprei sprite atau set ubin . Sprite sheet ini kemudian digunakan untuk menampilkan elemen individu dimanapun kita membutuhkannya.
Biasanya, elemen seperti logo, panah navigasi, tombol disertakan dalam sprite sheet karena ukurannya hampir sama dan sering digunakan di halaman web.
Contoh bagaimana ini membantu dalam Pengembangan Web?
Umumnya, saat mendesain gambar halaman web disimpan dan digunakan sebagai file individual. Jadi, saat pengguna membuka halaman web, browser harus membuat permintaan HTTP untuk setiap file ini, mendownloadnya secara terpisah, dan menampilkannya. Ini mengarah ke waktu muat halaman yang lebih tinggi karena halaman web tertentu dapat memiliki banyak gambar yang lebih kecil seperti tombol, ikon, logo.
Sprite CSS membantu pengembang untuk menggabungkan gambar kecil yang sering digunakan ini menjadi satu gambar besar. Browser kemudian harus mengunduh hanya satu file yang kemudian digunakan untukmenampilkan bagian yang diperlukan dengan mengimbangi gambar.
Keuntungan Menggunakan CSS Sprite
Ada dua keuntungan utama menggunakan sprite CSS dibandingkan gambar normal:
Pemuatan halaman lebih cepat: Meningkatkan waktu pemuatan halaman karena gambar yang digunakan di halaman web muncul segera setelah lembar diunduh.
Throughput yang lebih besar dan penggunaan sumber daya yang lebih rendah: Tidak hanya teknik ini yang meningkatkan pengalaman pengguna akhir dengan mempercepat pemuatan halaman,tetapi juga mengurangi kemacetan jaringan karena jumlah permintaan HTTP yang lebih rendah dibuat.
Apa yang harus dilakukan Pengembang saat bekerja dengan CSS Sprite?
Saat bekerja dengan gambar individual, pengembang cukup bekerja dengan tag HTML dan menatanya dalam CSS jika diperlukan. Namun saat bekerja dengan CSS Sprite, pengembang perlu melakukan dua hal spesifik:
- Pembuatan Sprite Sheet
Saat mengembangkan halaman web jika pengembang memutuskan untuk menggunakan sprite CSS, dia harus membuat sprite sheet terlebih dahulu dengan menggabungkan semua elemen yang diinginkan seperti tombol, logo, dll. Dalam pola seperti kisi. Ini dapat dilakukan dengan menggunakan program pengeditan gambar seperti Photoshop atau Gimp. Ada juga banyak alat online yang tersedia yang membantu Anda membuat sprite sheet. Alat-alat ini dibahas nanti di artikel ini.
- Akses elemen tertentu dari sprite menggunakan Posisi latar belakang CSS Properti
Setelah sprite sheet siap, pengembang kemudian harus menggunakan atribut CSS untuk mengakses berbagai bagian sheet.
mergesort di c ++
- lebar: Lebar sprite
- tinggi: Ketinggian sprite
- Latar Belakang: Referensi ke sprite sheet
- Posisi latar belakang: Nilai offset (dalam piksel) untuk mengakses hanya bagian yang diperlukan dari lembar sprite
Bagaimana cara membuat Lembar Sprite CSS?
Anda dapat menggunakan perangkat lunak pengedit gambar apa pun untuk mengatur gambar yang lebih kecil ke dalam kotak tetapi dua metode yang lebih mudah dibahas di bawah ini:
1. Alat Pembuatan Sprite Sheet Online
TAUTAN: toptal.com/developers/css/sprite-generator/
Alat ini tidak hanya gratis untuk digunakan tetapi juga memberi Anda kode CSS yang diperlukan yang dapat digunakan saat mereferensikan sprite sheet. Juga, Anda dapat mengutak-atik properti yang berbeda seperti bantalan antara elemen dan mengubah perataannya.
2. Menghasilkan Sprite Sheet dengan Sprity
Jika Anda menggunakan Grunt, Node atau Gulp, Anda dapat menginstal paket bernama Sprity yang akan membantu Anda membuat sprite sheet dalam berbagai format seperti PNG, JPG, dll.
Pertama, Anda perlu menginstal Sprity menggunakan:
npm instal sprity -g
Kemudian, untuk menghasilkan sprite sheet, gunakan perintah berikut:
sprity ./output-directory/ ./input-directory/*.png
Bagaimana cara bekerja dengan CSS Sprite?
Dalam contoh ini, kami akan menggunakan sprite sheet berikut:
Seperti yang Anda lihat pada gambar di atas, enam ikon (Instagram, Twitter, dan Facebook) telah diatur dalam pola grid-like. Di baris pertama, kami memiliki status normal dan di baris kedua, kami memiliki status hover (gambar yang muncul setelah kami mengarahkan kursor mouse ke sana).
Jika Anda membuat sprite sheet menggunakan alat yang telah kita bahas di atas maka Anda sudah mengetahui offset yang dibutuhkan di CSS tetapi jika Anda menggunakan alat lain atau Anda hanya diberi beberapa sprite sheet maka jangan khawatir, kita akan membahas metode yang akan membantu Anda mendapatkan offset untuk elemen yang dibutuhkan.
Sekarang mari kita lihat cara yang sangat sederhana untuk mendapatkan offset yang diperlukan untuk masing-masing dari enam ikon dengan menggunakan MS Paint. Ini mungkin bukan solusi ideal untuk bekerja dengan sprite tetapi karena ia memiliki fitur yang menyediakan koordinat kursor mouse, ini dapat digunakan untuk mendapatkan koordinat X dan Y yang diperlukan.
Pertama, buka gambar sprite sheet Anda (grid berisi semua gambar yang lebih kecil) dan arahkan kursor mouse Anda ke pojok kiri atas sprite yang ingin Anda ambil.
Setelah Anda memiliki koordinat titik kiri atas sprite Anda (gambar Instagram kiri atas), Anda dapat menampilkan sprite spesifik ini dimanapun diperlukan menggunakan kode CSS:
background: url ('img_sprites.png')
background-position: 0 0
lebar: 125 piksel
tinggi: 125px
Kami menggunakan lebar dan tinggi sebagai 125 piksel karena ikon kami berukuran itu. Untuk mengambil gambar berikutnya (Twitter) di baris yang sama, kami menggunakan kode berikut:
background: url ('img_sprites.png')
background-position: -128px 0px
lebar: 125 piksel
tinggi: 125px
Perhatikan atribut background-position pada cuplikan di atas. (-128px, 0) berarti kita mengimbangi sprite sheet ke kiri sebesar 128 piksel (dengan memperhitungkan padding antar elemen) dan 0 piksel pada Y-Axis. Jika kita mengakses ikon hover twitter maka atribut background-position kita akan menjadi:
background-position: -128px -128px
Dengan cara ini, sekarang kita dapat mengakses setiap komponen sprite sheet menggunakan CSS. Mari kita bahas kode HTML dan CSS lengkap tentang cara melakukannya.
Langkah 1: Menulis Kode HTML yang diperlukan
Pada kode di bawah ini, kami hanya menambahkan tiga tautan. Juga, kita akan menghubungkan HTML kita dengan stylesheet (screen.css).
Langkah 2: Menulis CSS yang diperlukan. Pertama, kita akan menata kelas ikon bersama kita. Di sini, Anda bisa melihat kami merujuk ke sprite sheet yang kami buat.
/ * Ikon bersama Kelas * /
span.icon sebuah link,
span.icon a: dikunjungi{
layar:blok
teks-indentasi:-9999px
gambar latar belakang: url (./ img_sprites.png)
ulangi latar belakang:no-repeat
}
Langkah 3: Mendapatkan ikon individu dari sprite sheet menggunakan offset.
/ * Ikon Instagram * /
span.instagram sebuah link,
span.instagram a: dikunjungi{
lebar:125px
tinggi:125px
background-position:0 0
}
/ * Ikon Twitter * /
span.twitter sebuah link,
span.twitter a: dikunjungi{
lebar:125px
tinggi:125px
background-position:-128px 0
}
/ * Ikon Facebook * /
span.facebook sebuah link,
span.facebook a: dikunjungi{
lebar:125px
tinggi:125px
background-position:-257px 0
html untuk jeda baris
}
Langkah 4: Mendapatkan ikon hover dari sprite sheet menggunakan offset.
span.instagram a: hover{background-position:0 -128px}
span.twitter a: hover{background-position:-128px -128px}
span.facebook a: hover{background-position:-255px -128px}
Perusahaan yang menggunakan CSS Sprite
Banyak nama besar di industri menggunakan CSS Sprite untuk meningkatkan daya tanggap situs web mereka. Perusahaan seperti Google, Facebook, Amazon secara ekstensif menggunakan metode ini karena ini membantu mereka mengurangi jumlah permintaan HTTP per sesi untuk pengguna tertentu. Ini adalah keuntungan besar jika kami memperhitungkan bahwa perusahaan-perusahaan ini melayani jutaan pelanggan setiap saat.
Sekarang setelah Anda memahami apa itu CSS sprite dan bagaimana bekerja dengannya, Anda selangkah lebih dekat dalam perjalanan Anda untuk mempelajari CSS. Konsep seperti sprite adalah pengubah permainan di zaman sekarang karena telah menjadi sangat penting bagi pengembang untuk mengekstrak setiap kinerja dari laman web.
Lihat kami yang dilengkapi dengan pelatihan langsung yang dipimpin instruktur dan pengalaman proyek kehidupan nyata. Pelatihan ini membuat Anda mahir dalam keterampilan untuk bekerja dengan teknologi web back-end dan front-end. Ini termasuk pelatihan tentang Pengembangan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar blog 'Gambar HTML' dan kami akan menghubungi Anda kembali.