Πρόσφατα ανέλαβα ένα project, στο οποίο έπρεπε να χρησιμοποιήσω css
sprites. Η μέθοδος φυσικά δεν είναι νέα, αλλά ακόμη και σήμερα
χρησιμοποιείται ελάχιστα. Για να πω την αλήθεια, είναι η πρώτη φορά που
το χρησιμοποίησα σε live project.
Ας αναλύσουμε τώρα τι είναι τα css sprites. Όταν φτιάχνετε μία
ιστοσελίδα, παίρνετε το psd (συνήθως) και κόβετε τις εικόνες ώστε να
μπορείτε να τις χρησιμοποιήσετε μέσα στην ιστοσελίδα σας. Αυτό έχει ως
αποτέλεσμα να έχετε περισσότερα requests και έτσι η σελίδα γίνεται λίγο
πιο βαριά. Στα CSS Sprites αυτό που κάνετε είναι να φτιάχνετε μία ενιαία
εικόνα μέσα στην οποία υπάρχουν όλες οι εικόνες και έπειτα με css
τραβάτε το κομμάτι που θέλετε.
Η διαδικασία αυτή συνήθως είναι χρονοβόρα, για αυτό και ελάχιστοι τη
χρησιμοποιούν. Επίσης πρέπει να προσέξετε πως όταν το theme που
φτιάχνετε απευθύνεται για κάθετη παραγωγή (π.χ. για υποβολή σε
themeforest ή στο wordpress.org), άποψη μου είναι να μη χρησιμοποιήσετε
αυτή την τεχνική, αφού οι περισσότεροι webmasters θα κάνουν αλλαγές στο
template και άρα δεν θα μπορούν εύκολα να τροποποιήσουν τις εικόνες αν
χρειαστεί κάτι τέτοιο. Επίσης αν χρειαστείτε και εσείς να προσθέσετε
κάποια εικόνα στο μέλλον, θα είναι πιο χρονοβόρα η διαδικασία σε σχέση
με το να κόψετε και να εισάγετε την εικόνα. Προσωπική μου άποψη είναι
επομένως να μην γίνεται χρήση της παραπάνω τεχνικής, μιας και στις
περισσότερες περιπτώσεις ο πελάτης θα χρειαστεί να κάνει αλλαγές και
δεδομένου ότι ελάχιστοι το πληρώνουν, καλό θα ήταν να αποφεύγεται. Ας
δούμε παρόλα αυτά πως μπορούμε να το κάνουμε εύκολα και γρήγορα.
Αρχικά μπορείτε να χρησιμοποιήσετε το παρακάτω εργαλείο: http://spritegen.website-performance.org/ Σε
αυτό εισάγετε όλες τις εικόνες που θέλετε σε ένα zip αρχείο και το
ανεβάζετε. Το συγκεκριμένο εργαλείο θα λάβει όλες τις εικόνες και θα τις
κάνει μία ενιαία, αν και η μέθοδος που χρησιμοποιεί είναι βάζοντας το
ένα κάτω από το άλλο και το αποτέλεσμα της συμπίεσης δεν είναι τόσο
καλό, όσο με τη χειροκίνητη μέθοδο, αλλά έτσι γλιτώνουμε χρόνο. Έπειτα
θα μας εξάγει αυτόματα το css και την εικόνα, προκειμένου να τα
χρησιμοποιήσουμε για την ιστοσελίδα μας.
Καλό θα ήταν επίσης να χρησιμοποιήσετε και κάποιο εργαλείο συμπίεσης όπως το http://www.smushit.com/ysmush.it/, το οποίο θα μικρύνει το αρχείο και θα το διατηρήσει στην ίδια ποιότητα.
Την παραπάνω μεθοδολογία την χρησιμοποιώ συνήθως για την odesk.com
και το ίδιο κάνουν και οι υπόλοιποι cms administrator που ανήκουν στο
team της.
