skip to main content

20 ΜΑΡ 2013

Η εποχή των icon fonts

Tags: icon fonts, symbol fonts, γραμματοσειρά, εικονίδιο, css

γράφει ο Αντώνης Κατσικάρης
Το να βελτιώνεις την απόδοση των ιστοσελίδων είναι μία καθημερινή συνεχής διαδικασία. Μέσα σε αυτή την διαδικασία βελτίωσης φτάσαμε να καλωσορίζουμε την εποχή των icon fonts, δηλαδή την αντικατάσταση των μικρών – και όχι μόνο - γραφικών που εμπλουτίζουμε τη σελίδα μας, μόνο με ένα αρχείο γραμματοσειράς (icon font file).

Τα εικονίδια που μέχρι σήμερα σχεδιάζαμε ή χρησιμοποιούσαμε από έτοιμα sets (bitmap/raster) έχουν περιορισμένες δυνατότητες γιατί μπορούν να απεικονίζονται σωστά σε συγκεκριμένες αναλύσεις, οπότε στις περιπτώσεις που αυτά τα γραφικά πρέπει να εμφανιστούν μεγαλύτερα (κάτι που π.χ. στο responsive design είναι σύνηθες) αντιμετωπίζαμε το πρόβλημα του να «πιξελάρουν». Τα icon fonts λοιπόν έρχονται να πάρουν τη θέση αυτών των γραφικών με καθαρά διανυσματικά (vector) γραφικά , αφού μπορούμε να μεγαλώνουμε τις διαστάσεις τους όσο θέλουμε χωρίς να έχουμε απώλεια στην ποιότητά τους.

Αντίστοιχο «πρόβλημα», αν και λιγότερο εμφανές, είναι η σμίκρυνση των εικόνων. Όταν δηλαδή έχουμε μία εικόνα σε μεγάλες διαστάσεις και την εμφανίζουμε στη σελίδα μας σε μικρότερες διαστάσεις. Αυτό όμως δεν είναι μόνο πρόβλημα εμφάνισης, καθώς οι browsers πλέον «πειράζουν» πολύ αξιόπιστα τις εικόνες, αλλά στο μέγεθος του αρχείου. Είναι δηλαδή λάθος το να «σερβίρουμε» μία εικόνα, π.χ. 100 kilobytes όταν το τελικό αποτέλεσμα θα μπορούσε να είχε επιτευχθεί με μία εικόνα 50 kilobytes. Έχοντας τα εικονίδια μας πλέον αποθηκευμένα σε διανύσματα το μέγεθος του αρχείου είναι απίστευτα μικρότερο από την εκδοχή τους σε jpg, gif ή και png.

Αλλά το σχετικό κέρδος δεν τελειώνει εδώ. Φανταστείτε μία σελίδα που παρουσιάζει 10 με 15 εικονίδια. Αν αυτά είναι ξεχωριστές εικόνες η σελίδα μας θα δημιουργεί 15 ακόμη ξεχωριστά αιτήματα προς τον server, που το καθένα έχει το δικό του χρόνο απόκρισης, ετοιμασίας, λήψης, παρουσίασης. Χρησιμοποιώντας μια γραμματοσειρά αντί για ξεχωριστά γραφικά έχουμε ένα μόνο αίτημα προς τον server που αφορά στο σύνολο των γραφικών που πρόκειται να χρησιμοποιηθούν σε διάφορα σημεία. Το μέγεθος αυτής της γραμματοσειράς συνήθως κυμαίνεται μεταξύ των 30 με 50 kilobytes ενώ, όπως τα περισσότερα αρχεία γραφικών, cashάρεται από τον browser (αποθηκεύεται δηλαδή στη μνήμη του) και δεν χρειάζεται να ξανακατεβαίνει σε κάθε reload της σελίδας.

Δυστυχώς υπάρχει ο περιορισμός του να μπορείς να χρησιμοποιείς περισσότερα από ένα χρώμα στα icon fonts graphics. Η apple για να επιλύσει αυτό το θέμα ήρθε να προτείνει τα multicolor icon fonts των οποίων η λειτουργία θα επιτρέπει την χρήση αμιγών vector γραφικών στις ιστοσελίδες μας. Σίγουρα είναι κάτι το οποίο δεν θα εφαρμοστεί σύντομα αν σκεφτεί κάποιος ότι θα πάρει καιρό μόνο και μόνο για να «συμφωνήσουν» όλοι οι browsers να υποστηρίξουν αυτή τη δυνατότητα.

Τελειώνοντας αλλά όχι κλείνοντας το κεφάλαιο icon fonts αφού θα επιστρέψουμε σε επόμενη δημοσίευση και με άλλες προοπτικές αξιοποίησης αυτής της νέας τάσης, τα icon fonts είναι «το επόμενο βήμα» στο web design και στη βελτιστοποίηση λειτουργίας μιας σύγχρονης ιστοσελίδας. Ας ξεκινήσουμε να τα χρησιμοποιούμε λοιπόν βοηθώντας να εξελιχθούν τα εργαλεία και οι τεχνικές για να τα δημιουργούμε.

Σημείωση: Μία πρόσφατη αναφορά που υπάρχει εδώ http://font-editor-software-review.toptenreviews.com ίσως βοηθήσει για την επιλογή του κατάλληλου επί πληρωμή font editor.

karsiyaka escort avcılar escort ataköy escort bahçeşehir escort esenyurt escort