Η ιδέα των sprite υπάρχει εδώ και λίγο καιρό. Είναι μια από τις πιο συχνά χρησιμοποιούμενες τεχνικές στη βιομηχανία παιχνιδιών για την επιτάχυνση της διαδικασίας προβολής κινούμενων σχεδίων σε μια οθόνη. Σε αυτό το άρθρο, θα εξετάσουμε ιδιαίτερα πώς αυτή η τεχνική μπορεί να μας βοηθήσει να βελτιώσουμε την εμπειρία χρήστη σε ιστοσελίδες με τη βοήθεια των CSS Sprites με την ακόλουθη σειρά:
- Τι είναι το Sprite;
- Τι είναι το CSS Sprite - μια γρήγορη επισκόπηση;
- Παράδειγμα πώς βοηθάει στην ανάπτυξη Ιστού;
- Πλεονεκτήματα της χρήσης CSS Sprites
- Τι πρέπει να κάνει ένας προγραμματιστής όταν συνεργάζεται με το CSS Sprites;
- Πώς να δημιουργήσετε ένα φύλλο CSS Sprite;
- Πώς να συνεργαστείτε με το CSS Sprites;
- Εταιρείες που χρησιμοποιούν CSS Sprites
Τι είναι το Sprite;
Το sprite είναι μια μοναδική εικόνα που αποτελεί μέρος μιας μεγαλύτερης σκηνής ενός παιχνιδιού. Στη συνέχεια, πολλαπλά sprites συνδυάζονται σε μια μεγάλη εικόνα που ονομάζεται sprite sheet. Μόλις φορτωθεί ένα φύλλο sprite στη μνήμη, διαφορετικά sprites αποδίδονται με γρήγορη διαδοχή για να δώσουν την ψευδαίσθηση του animation. Αυτό γίνεται ταυτόχρονα για δεκάδες έως εκατοντάδες διαφορετικά sprites για να δημιουργήσει μια σκηνή στο παιχνίδι.
Η βασική ιδέα είναι ότι είναι πολύ πιο γρήγορο να φορτώνετε μια εικόνα και να εμφανίζεται ένα μέρος της όπου απαιτείται, σε σύγκριση με τη φόρτωση πολλών εικόνων και την προβολή τους.
Τι είναι το CSS Sprite: Μια γρήγορη επισκόπηση;
Το CSS sprite είναι μια τεχνική που χρησιμοποιείται συχνά από προγραμματιστές ιστού για τη βελτιστοποίηση της απόδοσης των ιστοσελίδων. Σε αυτήν την τεχνική, πολλές μικρότερες εικόνες συνήθως ίδιων διαστάσεων συνδυάζονται σε μια ενιαία μεγάλη εικόνα που ονομάζεται a φύλλο sprite ή σετ πλακιδίων . Αυτό το φύλλο sprite χρησιμοποιείται στη συνέχεια για την εμφάνιση μεμονωμένων στοιχείων όπου τα χρειαζόμαστε.
Συνήθως, στοιχεία όπως λογότυπα, βέλη πλοήγησης, κουμπιά περιλαμβάνονται στο sprite φύλλο καθώς έχουν σχεδόν τις ίδιες διαστάσεις και χρησιμοποιούνται συχνά σε μια ιστοσελίδα.
Παράδειγμα πώς βοηθάει στην ανάπτυξη Ιστού;
Γενικά, κατά το σχεδιασμό ιστοσελίδων, οι εικόνες αποθηκεύονται και χρησιμοποιούνται ως μεμονωμένα αρχεία. Έτσι, όταν ένας χρήστης ανοίγει μια ιστοσελίδα, το πρόγραμμα περιήγησης πρέπει να υποβάλει αίτημα HTTP για καθένα από αυτά τα αρχεία, να τα κατεβάσει ξεχωριστά και να τα εμφανίσει. Αυτό οδηγεί σε υψηλότερους χρόνους φόρτωσης σελίδας καθώς μια συγκεκριμένη ιστοσελίδα μπορεί να έχει μεγάλο αριθμό μικρότερων εικόνων, όπως κουμπιά, εικονίδια, λογότυπα.
Τα CSS sprites βοηθούν τους προγραμματιστές να συνδυάσουν αυτές τις μικρές εικόνες που χρησιμοποιούνται συχνά σε μία μεγάλη εικόνα. Στη συνέχεια, το πρόγραμμα περιήγησης πρέπει να κατεβάσει μόνο ένα αρχείο το οποίο στη συνέχεια χρησιμοποιείταιεμφανίστε την απαιτούμενη ενότητα αντισταθμίζοντας την εικόνα.
Πλεονεκτήματα της χρήσης CSS Sprites
Υπάρχουν δύο βασικά πλεονεκτήματα της χρήσης sprite CSS σε σχέση με τις κανονικές εικόνες:
Ταχύτερη φόρτωση σελίδας: Βελτιώνει το χρόνο φόρτωσης της σελίδας καθώς οι εικόνες που χρησιμοποιούνται στην ιστοσελίδα εμφανίζονται αμέσως μετά τη λήψη του φύλλου.
Μεγαλύτερη απόδοση και χαμηλότερη χρήση πόρων: Όχι μόνο αυτή η τεχνική βελτιώνει την εμπειρία του τελικού χρήστη κάνοντας τη φόρτωση της σελίδας πιο γρήγορη,αλλά μειώνει επίσης τη συμφόρηση του δικτύου καθώς υποβάλλονται μικρότερος αριθμός αιτημάτων HTTP.
Τι πρέπει να κάνει ένας προγραμματιστής όταν εργάζεται με CSS Sprites;
Όταν εργάζεστε με μεμονωμένες εικόνες, ο προγραμματιστής μπορεί απλώς να εργαστεί με ετικέτα HTML και στυλ σε CSS, εάν απαιτείται. Αλλά όταν εργάζεται με το CSS Sprites, ένας προγραμματιστής πρέπει να κάνει δύο συγκεκριμένα πράγματα:
- Δημιουργία φύλλου Sprite
Κατά την ανάπτυξη μιας ιστοσελίδας εάν ο προγραμματιστής αποφασίσει να χρησιμοποιήσει CSS sprites, πρέπει πρώτα να δημιουργήσει το φύλλο sprite συγχωνεύοντας όλα τα επιθυμητά στοιχεία όπως κουμπιά, λογότυπα κ.λπ. σε μοτίβο πλέγματος. Αυτό μπορεί να γίνει χρησιμοποιώντας οποιοδήποτε πρόγραμμα επεξεργασίας εικόνων όπως το Photoshop ή το Gimp. Υπάρχουν επίσης πολλά διαδικτυακά εργαλεία που σας βοηθούν να φτιάξετε το φύλλο sprite. Αυτά τα εργαλεία συζητούνται αργότερα σε αυτό το άρθρο.
- Αποκτήστε πρόσβαση σε ένα συγκεκριμένο στοιχείο του sprite χρησιμοποιώντας το CSS φόντο-θέση ιδιοκτησία
Όταν το φύλλο sprite είναι έτοιμο, ο προγραμματιστής πρέπει στη συνέχεια να χρησιμοποιήσει χαρακτηριστικά CSS για πρόσβαση σε διαφορετικά μέρη του φύλλου.
- πλάτος: Πλάτος του sprite
- ύψος: Ύψος του sprite
- Ιστορικό: Αναφορά στο φύλλο sprite
- Ιστορικό-θέση: Τιμές μετατόπισης (σε pixel) για πρόσβαση μόνο στο απαιτούμενο τμήμα του φύλλου sprite
Πώς να δημιουργήσετε ένα φύλλο CSS Sprite;
Μπορείτε να χρησιμοποιήσετε οποιοδήποτε λογισμικό επεξεργασίας εικόνων για να τακτοποιήσετε τις μικρότερες εικόνες σας σε ένα πλέγμα, αλλά δύο πιο εύκολες μέθοδοι συζητούνται παρακάτω:
1. Ηλεκτρονικό εργαλείο δημιουργίας φύλλων Sprite
ΣΥΝΔΕΣΜΟΣ: toptal.com/developers/css/sprite-generator/
Αυτό το εργαλείο δεν είναι μόνο δωρεάν για χρήση αλλά και σας παρέχει τον απαιτούμενο κώδικα CSS που μπορεί να χρησιμοποιηθεί κατά την αναφορά του sprite. Επίσης, μπορείτε να διασκεδάσετε με διαφορετικές ιδιότητες όπως η επένδυση μεταξύ των στοιχείων και η αλλαγή της ευθυγράμμισής τους.
2. Δημιουργία φύλλου Sprite με Sprity
Εάν χρησιμοποιείτε Grunt, Node ή Gulp, μπορείτε να εγκαταστήσετε ένα πακέτο που ονομάζεται Sprity, το οποίο θα σας βοηθήσει να δημιουργήσετε ένα φύλλο sprite σε διάφορες μορφές όπως PNG, JPG κ.λπ.
Πρώτον, θα πρέπει να εγκαταστήσετε το Sprity χρησιμοποιώντας:
npm εγκατάσταση sprity -g
Στη συνέχεια, για να δημιουργήσετε φύλλο sprite, χρησιμοποιήστε την ακόλουθη εντολή:
sprity ./output-directory/ ./input-directory/*.png
Πώς να συνεργαστείτε με το CSS Sprites;
Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε το ακόλουθο φύλλο sprite:
Όπως μπορείτε να δείτε στην παραπάνω εικόνα, έξι εικονίδια (Instagram, Twitter και Facebook) έχουν τοποθετηθεί σε μοτίβο πλέγματος. Στην πρώτη σειρά, έχουμε μια κανονική κατάσταση και στη δεύτερη σειρά, έχουμε την κατάσταση αιωρημάτων τους (η εικόνα που εμφανίζεται μόλις τοποθετήσουμε τον κέρσορα του ποντικιού πάνω τους).
τι είναι __init__ στο python
Εάν φτιάξατε το φύλλο sprite χρησιμοποιώντας τα εργαλεία που συζητήσαμε παραπάνω, τότε γνωρίζετε ήδη τα όφσετ που απαιτούνται στο CSS, αλλά εάν χρησιμοποιήσατε κάποιο άλλο εργαλείο ή σας δόθηκε απλά κάποιο φύλλο sprite, τότε μην ανησυχείτε, θα συζητήσουμε μια μέθοδο θα σας βοηθήσει να λάβετε αντισταθμίσεις για το απαιτούμενο στοιχείο.
Ας δούμε τώρα έναν πολύ απλό τρόπο για να λάβετε τα απαιτούμενα όφσετ για καθένα από τα έξι εικονίδια χρησιμοποιώντας το MS Paint. Μπορεί να μην είναι η ιδανική λύση για να δουλέψετε με sprites, αλλά επειδή διαθέτει τη δυνατότητα που παρέχει τις συντεταγμένες του δρομέα του ποντικιού, μπορεί να χρησιμοποιηθεί για να πάρει τις απαιτούμενες συντεταγμένες X και Y.
Αρχικά, ανοίξτε την εικόνα του φύλλου sprite (πλέγμα που περιέχει όλες τις μικρότερες εικόνες) και φέρτε τον κέρσορα του ποντικιού σας στην επάνω αριστερή γωνία του sprite που θέλετε να τραβήξετε.
Μόλις έχετε τις συντεταγμένες του επάνω αριστερού σημείου του sprite σας (πάνω αριστερή εικόνα Instagram), μπορείτε να εμφανίσετε αυτό το συγκεκριμένο sprite όπου απαιτείται χρησιμοποιώντας τον κώδικα CSS:
φόντο: url ('img_sprites.png')
φόντο-θέση: 0 0
πλάτος: 125 εικονοστοιχεία
ύψος: 125 εικονοστοιχεία
Χρησιμοποιούμε πλάτος και ύψος 125 εικονοστοιχεία, καθώς τα εικονίδια μας έχουν αυτήν τη διάσταση. Για να πάρουμε την επόμενη εικόνα (Twitter) στην ίδια σειρά, χρησιμοποιούμε τον ακόλουθο κώδικα:
φόντο: url ('img_sprites.png')
φόντο-θέση: -128 εικονοστοιχεία 0 εικονοστοιχεία
πλάτος: 125 εικονοστοιχεία
ύψος: 125 εικονοστοιχεία
Σημειώστε το χαρακτηριστικό background-position στο παραπάνω απόσπασμα. (-128px, 0) σημαίνει ότι αντισταθμίζουμε το sprite φύλλο μας προς τα αριστερά κατά 128 pixel (λαμβάνοντας υπόψη τα στοιχεία μεταξύ των στοιχείων) και 0 pixel στον Υ-άξονα. Εάν επρόκειτο να προσπελάσουμε το εικονίδιο του hover στο twitter, τότε το χαρακτηριστικό του background-position θα ήταν:
φόντο-θέση: -128 εικονοστοιχεία -128 εικονοστοιχεία
Με αυτόν τον τρόπο, μπορούμε πλέον να έχουμε πρόσβαση σε κάθε στοιχείο του sprite φύλλου μας χρησιμοποιώντας CSS. Ας δούμε έναν πλήρη κώδικα HTML και CSS για το πώς να το κάνουμε.
Βήμα 1: Σύνταξη του απαιτούμενου κώδικα HTML
Στον παρακάτω κώδικα, προσθέτουμε απλώς τρεις συνδέσμους. Επίσης, θα συνδέσουμε το HTML μας με το φύλλο στυλ (screen.css).
Βήμα 2: Γράφοντας το απαραίτητο CSS. Αρχικά, θα διαμορφώσουμε την κοινή μας κατηγορία εικονιδίων. Εδώ, μπορείτε να δείτε ότι αναφερόμαστε στο φύλλο sprite που δημιουργήσαμε.
/ * Κοινόχρηστο εικονίδιο Κατηγορία * /
span.icon ένας σύνδεσμος,
span.icon α: επισκέφτηκε{
απεικόνιση:ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ
κείμενο-εσοχή:-9999 εικονοστοιχεία
υπερφόρτωση λειτουργίας σε c ++
εικόνα φόντου: url (./ img_sprites.png)
επανάληψη φόντο:χωρίς επανάληψη
}
Βήμα 3: Λήψη των μεμονωμένων εικονιδίων από το φύλλο sprite χρησιμοποιώντας τα όφσετ.
/ * Εικονίδιο Instagram * /
span.instagram ένας σύνδεσμος,
span.instagram α: επισκέφτηκε{
πλάτος:125 εικονοστοιχεία
ύψος:125 εικονοστοιχεία
τι είναι η εικονική συνάρτηση στο java
φόντο-θέση:0 0
}
/ * Εικονίδιο Twitter * /
span.twitter ένας σύνδεσμος,
span.twitter α: επισκέφτηκε{
πλάτος:125 εικονοστοιχεία
ύψος:125 εικονοστοιχεία
φόντο-θέση:-128 εικονοστοιχεία 0
}
/ * Εικονίδιο Facebook * /
span.facebook ένας σύνδεσμος,
span.facebook α: επισκέφτηκε{
πλάτος:125 εικονοστοιχεία
ύψος:125 εικονοστοιχεία
φόντο-θέση:-257 εικονοστοιχεία 0
}
Βήμα 4: Λήψη των εικονιδίων αιωρήματος από το φύλλο sprite χρησιμοποιώντας τις αντισταθμίσεις.
span.instagram α: αιωρηθείτε{φόντο-θέση:0 -128 εικονοστοιχεία}
span.twitter α: αιωρηθείτε{φόντο-θέση:-128 εικονοστοιχεία -128 εικονοστοιχεία}
span.facebook α: αιωρηθείτε{φόντο-θέση:-255 εικονοστοιχεία -128 εικονοστοιχεία}
Εταιρείες που χρησιμοποιούν CSS Sprites
Πολλά μεγάλα ονόματα στον κλάδο χρησιμοποιούν CSS Sprites για να βελτιώσουν την ανταπόκριση των ιστοτόπων τους. Εταιρείες όπως το Google, το Facebook, το Amazon χρησιμοποιούν εκτενώς αυτήν τη μέθοδο, καθώς αυτές τις βοηθούν να μειώσουν τον αριθμό αιτημάτων HTTP ανά περίοδο σύνδεσης για έναν συγκεκριμένο χρήστη. Αυτό είναι ένα τεράστιο όφελος όταν λαμβάνουμε υπόψη ότι αυτές οι εταιρείες εξυπηρετούν εκατομμύρια πελάτες ανά πάσα στιγμή.
Τώρα που έχετε κατανοήσει τι είναι τα sprite CSS και πώς να συνεργαστείτε μαζί τους, είστε ένα βήμα πιο κοντά στο ταξίδι σας για να μάθετε CSS. Έννοιες όπως τα sprites είναι ένα παιχνίδι αλλαγής στο σημερινό καιρό, καθώς έχει γίνει εξαιρετικά σημαντικό για τους προγραμματιστές να εξάγουν κάθε κομμάτι απόδοσης από μια ιστοσελίδα.
Ρίξτε μια ματιά στο δικό μας που έρχεται με ζωντανή εκπαίδευση με καθοδήγηση εκπαιδευτή και πραγματική εμπειρία έργου. Αυτή η εκπαίδευση σας κάνει ικανό σε δεξιότητες για να εργαστείτε με τεχνολογίες ιστού back-end και front-end. Περιλαμβάνει εκπαίδευση σε Web Development, jQuery, Angular, NodeJS, ExpressJS και MongoDB.
Έχετε μια ερώτηση για εμάς; Αναφέρετέ το στην ενότητα σχολίων του ιστολογίου 'HTML Images' και θα επικοινωνήσουμε μαζί σας.