Πρόσφατα ανέλαβα ένα 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 της.
Σημείωση: Μην βάζετε keywords στο πεδίο για το όνομα καθώς επίσης και links προς άσχετες ιστοσελίδες με τη θεματολογία του άρθρου. Οι διαχειριστές του ifeed θα μαρκάρουν αυτόματα αυτά τα σχόλια ως spam!
Πολύ καλό! δε το ήξερα! Με κούφανες τώρα, καράφλιασα δικέ μου
Τι εννοείς ότι σε καράφλιασα? Για τον παραπάνω Generator εννοείς?