Δημιουργός CSS sprite sheet

Πώς να φτιάξετε ένα sprite sheet

1. Σύρετε τις εικόνες σας στην περιοχή απόθεσης ή κάντε κλικ σε αυτήν για να τις επιλέξετε. Γίνονται δεκτά PNG, SVG, WebP, JPG και οι άλλες μορφές που διαβάζει το πρόγραμμα περιήγησής σας, έως 500 εικόνες. Κάθε αρχείο εμφανίζεται στη λίστα Εικόνες με το μέγεθός του· το κουμπί × αφαιρεί μία εικόνα και το Αφαίρεση όλων των εικόνων αδειάζει τη λίστα.
2. Διαλέξτε μια Διάταξη: Πλέγμα, Συμπαγής (μικρότερο φύλλο), Οριζόντια λωρίδα ή Κάθετη λωρίδα. Με το Πλέγμα, οι Στήλες (0 = αυτόματα) ορίζουν τον αριθμό των στηλών.
3. Ορίστε το Εσωτερικό περιθώριο (px) ανάμεσα στα sprite (2 από προεπιλογή) και επιλέξτε το Μέγεθος δύναμης του δύο (256, 512, 1024…) αν η μηχανή ή η GPU σας το απαιτεί.
4. Διαλέξτε το Αρχείο δεδομένων: CSS (κλάσεις background-position), JSON (χάρτης καρέ) ή CSS και JSON. Προσαρμόστε το Όνομα αρχείου και το Πρόθεμα κλάσεων CSS (και τα δύο «sprite» από προεπιλογή).
5. Ελέγξτε την προεπισκόπηση, το Μέγεθος φύλλου και τον Χώρος που χρησιμοποιείται και μετά πατήστε Λήψη ZIP (PNG + δεδομένα) ή Λήψη μόνο PNG. Ο Κώδικας που δημιουργήθηκε μπορεί επίσης να αντιγραφεί απευθείας.

Οι εικόνες αποκωδικοποιούνται στο πρόγραμμα περιήγησής σας και δεν μεταφορτώνεται τίποτα. Ένα SVG χωρίς δικό του πλάτος και ύψος μετατρέπεται σε εικονοστοιχεία με τη μεγαλύτερη πλευρά του στα 256 px.

Επιλογή διάταξης

• Το Πλέγμα δίνει σε κάθε εικόνα ένα κελί με το μέγεθος της μεγαλύτερης εικόνας. Με αυτόματες στήλες το πλέγμα είναι περίπου τετράγωνο. Είναι απλό και προβλέψιμο και ιδανικό όταν όλα τα sprite έχουν το ίδιο μέγεθος, όπως σε ένα σύνολο πλακιδίων.
• Η Συμπαγής (μικρότερο φύλλο) χρησιμοποιεί συσκευασία σε ράφια: οι εικόνες ταξινομούνται με πρώτη την ψηλότερη και τοποθετούνται από αριστερά προς τα δεξιά σε γραμμές. Το εργαλείο δοκιμάζει πολλά πλάτη φύλλου και κρατά αυτό με τη μικρότερη επιφάνεια, λαμβάνοντας υπόψη τη στρογγυλοποίηση σε δύναμη του δύο όταν είναι ενεργή αυτή η επιλογή. Ιδανική για εικονίδια με διαφορετικά μεγέθη.
• Η Οριζόντια λωρίδα και η Κάθετη λωρίδα βάζουν τις εικόνες σε μία γραμμή ή στήλη με τη σειρά που τις προσθέσατε. Αυτό περιμένουν πολλοί αναπαραγωγείς κινούμενων εικόνων για τα καρέ.

Το φύλλο δεν μπορεί να ξεπερνά τα 16.384 px ανά πλευρά ή περίπου 16,7 megapixel, το όριο που μπορούν να σχεδιάσουν τα προγράμματα περιήγησης.

Χρήση του CSS

Το CSS περιέχει μια βασική κλάση με το φύλλο ως background-image και no-repeat και μετά μία κλάση ανά sprite, με όνομα που προκύπτει από το αρχείο του: το home.png γίνεται sprite-home. Τα ονόματα γράφονται με πεζά, οι τόνοι αφαιρούνται, οι άλλοι χαρακτήρες γίνονται παύλες και τα διπλότυπα παίρνουν -2, -3.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

Κάθε κλάση sprite ορίζει width, height και background-position με αρνητικές μετατοπίσεις. Ένα sprite στο x = 40, y = 20 παίρνει background-position: -40px -20px: ολόκληρο το φύλλο μετατοπίζεται 40 px αριστερά και 20 px πάνω μέσα στο στοιχείο, ώστε να φαίνεται μόνο εκείνο το sprite μέσα από το πλαίσιο του στοιχείου. Το εσωτερικό περιθώριο εμποδίζει τα γειτονικά sprite να «τρέχουν» προς το εσωτερικό όταν η σελίδα μεγεθύνεται ή μια υφή φιλτράρεται.

Οθόνες υψηλής πυκνότητας: σχεδιάστε τις εικόνες σας στο διπλάσιο του μεγέθους εμφάνισης, δημιουργήστε το φύλλο και μετά προσθέστε στη βασική κλάση background-size ίσο με το μισό του μεγέθους του φύλλου και υποδιπλασιάστε τα πλάτη, τα ύψη και τις μετατοπίσεις. Το εργαλείο δεν το δημιουργεί αυτό· είναι χειροκίνητη προσαρμογή.

Είναι ακόμη χρήσιμα τα sprite με το HTTP/2;

Τα sprite επινοήθηκαν για να εξοικονομούν αιτήματα HTTP. Με την πολυπλεξία του HTTP/2, πολλά μικρά αρχεία φορτώνουν σχεδόν εξίσου γρήγορα με ένα, επομένως το όφελος για ιστοσελίδες είναι πολύ μικρότερο και τα εικονίδια SVG ή οι γραμματοσειρές εικονιδίων είναι συχνά καλύτερα για κλιμακούμενα εικονίδια. Τα sprite sheet παραμένουν το πρότυπο για παιχνίδια 2D και καρέ κίνησης: μία υφή σημαίνει λιγότερες αλλαγές υφής στη GPU και ένα μόνο αρχείο προς φόρτωση.