Πότε να χρησιμοποιήσω εικόνες κωδικοποιημένες με base64;

Δεν έχει περάσει πολύς καιρός από τότε που ο Steve Souders, άρχισε να αναφέρεται στην βελτίωση απόδοσης για τις ιστοσελίδες, και από τότε θεωρούμε δεδομένο πως κάθε επιπλέον HTTP request επιβαρύνει όλο και περισσότερο την απόδοση της ιστοσελίδας μας.

Η λύση που έχει δοθεί, είναι ο συνδυασμός κοινών τύπων αρχείων σε ένα μόνο αρχείο. Πρακτικά αυτό σημαίνει, πως όλα τα αρχεία JavaScript θα πρέπει να ενσωματωθούν σε ένα μόνο αρχείο, τα αρχεία CSSνα ενσωματωθούν σε μόνο ένα αρχείο CSS, κάτι που είναι κοινά κατανοητό και που μπορεί ο καθένας μας να το κάνει.
Το πραγματικό πρόβλημα ήταν με τις εικόνες. Πως μπορούσαμε να τις βάλουμε όλες σε ένα αρχείο, ή πως θα μπορούσαμε να τις ενώσουμε όλες μαζί; Η απάντηση δόθηκε με τα Sprites.

SPRITES

Τα Sprites είναι μια ιδέα η οποία ήρθε από τα video games. Αυτή η ιδέα λέει, πως τοποθετούμε όλες τις μικρότερες εικόνες μέσα σε μία μεγαλύτερη, οργανωμένες σε κάποιο πλέγμα, και μετά με τη βοήθεια των CSS εμφανίζουμε μόνο ένα μικρότερο τμήμα αυτής της εικόνας μέσα σε ένα στοιχείο της HTML.
Για παράδειγμα, ας υποθέσουμε πως θέλουμε να δημιουργήσουμε στην σελίδα μας ένα σύνδεσμο που θα οδηγεί στην αρχική σελίδα. Επίσης ας υποθέσουμε πως θέλουμε αντί για κείμενο, ο σύνδεσμος μας να εμφανίζει ένα σπίτι ως εικόνα, και όταν περνάει το ποντίκι πάνω από το σύνδεσμο το σπίτι θα γίνετε κόκκινο.
Σε αυτή την περίπτωση υποθέτουμε πως έχουμε μόνο δυο εικόνες σε ολόκληρο το Sprite, και μοιάζει με αυτή που έχουμε παρακάτω:

Στο CSS μας, εμείς θα κάνουμε τον σύνδεσμο να εμφανίζεται σαν block ή σαν inline-block και θα του δώσουμε ως πλάτος το ένα δεύτερο του sprite.
Στη συνέχεια θα ορίσουμε ως φόντο την εικόνα του Sprite και θα θέσουμε το background-position να είναι στις θέσεις 0 και 0 αντίστοιχα. Με αυτή την ενέργεια μας θα εμφανίζουμε το γκρι σπίτι.
Τέλος, θα δημιουργήσουμε ακόμα ένα σύνολο μορφοποίησης για τον ίδιο σύνδεσμο που θα ενεργοποιείτε στο :hover, και θα αλλάξουμε τις ιδιότητες του background σε -28PX και 0 έτσι ώστε η εικόνα να κυλήσει προς τα αριστερά και να εμφανιστεί το κόκκινο σπίτι.
Από άποψη επιτάχυνσης, με αυτή την πολύ απλή τεχνική μπορέσαμε και μειώσαμε τα HTTP Requests στο ελάχιστο, όπως επίσης και το φόρτο εργασίας για τον Browser να δημιουργήσει τα κατάλληλα headings για τις εικόνες μας.
Ωστόσο υπάρχουν και μερικά μειονεκτήματα που σχετίζονται με τα sprites:


Δύσκολο να συντηρήσετε και να τα ενημερώσετε. Αν δεν διαθέτετε τα κατάλληλα εργαλεία, τότε η χειροκίνητη επεξεργασία και ο συνδυασμός των εικόνων είναι μια αρκετά δύσκολη εργασία.

Αυξάνει την κατανάλωση μνήμης: Αυτός είναι ένας παράγοντας που συχνά τον παραβλέπουμε. Για να εξοικονομήσουμε χρόνο παράδοσης τις εικόνας καταναλώνουμε περισσότερη μνήμη και επεξεργαστική ισχύς, ειδικά για τα μεγάλα sprites και τα sprites που έχουν πολύ καινό χώρο.

Τα Sprites που είναι αρκετά συμπυκνωμένα με ελάχιστο ή καθόλου καινό χώρο ανάμεσα στις εικόνες, υπάρχει μεγάλη πιθανότητα η μία εικόνα να εμφανίζεται δίπλα από μια άλλη.




DATA URI ΚΑΙ ΚΩΔΙΚΟΠΟΙΗΣΗ BASE64

Τα Data URI και τα κωδικοποιημένα δεδομένα με base64 πάνε χέρι χέρι. Με αυτή την τεχνική μπορείτε να ενσωματώσετε εικόνες μέσα σε ένα αρχείο HTML, CSS ή JavaScript.
Όπως ακριβώς συμβαίνει με τα Sprites, και με αυτή την τεχνική μειώνετε τα HTTP requests, αλλά και εδώ υπάρχουν προβλήματα:


Οι εικόνες που κωδικοποιούνται με base64 κωδικοποίηση, είναι κατά 33% μεγαλύτερες από ότι είναι το πραγματικό μέγεθος πηγαίου αρχείου. Αυτό πρακτικά σημαίνει πως πρέπει να μεταδώσουμε περισσότερα δεδομένα, κάτι που μπορεί να είναι επώδυνο για χρήστες κινητών τηλεφώνων.

Τα data URI δεν υποστηρίζονται στους IE6 και IE7

Τα δεδομένα που είναι κωδικοποιημένα με base64 ίσως να απαιτούν περισσότερο χρόνο για να επεξεργαστούν από τα απλά δυαδικά αρχεία. Και σε αυτή την περίπτωση, οι κινητές συσκευές ίσως να αντιμετωπίζουν προβλήματα λόγο της μικρής υπολογιστικής ισχύς που έχουν στη διάθεση τους και τις μικρής διαθέσιμης μνήμης.



Το «33% περισσότερα δεδομένα» είναι μια κοινά αποδεκτή τιμή, αν και το σύνολο των επιπλέον δεδομένων αλλάζει δραματικά από τύπο αρχείων σε τύπους αρχείων. Για το λόγο αυτό, προσπάθησα να κάνω κάποιες δοκιμές πάνω σε αυτό το κομμάτι.
Εδώ έχω μερικές ερωτήσεις που προέκυψαν πριν τις δοκιμές:


Μπορεί ένα base64 κωδικοποιημένο αρχείο συμπιεσμένο με gzip να έχει το ίδιο μέγεθος με το πρωτότυπο αρχείο;

Είναι η κωδικοποίηση base64 καλύτερη για μικρά αρχεία;

Είναι η κωδικοποίηση base64 καλύτερη για μικρά και απλά εικονίδια, ενώ δεν είναι καλή για εικόνες και φωτογραφίες;

Είναι η κωδικοποίηση base64 καλύτερη όταν πολλά αρχεία συνδυάζονται μαζί;



Επίσης μια από τις δοκιμές που ήθελα να κάνω είναι αν τελικά οι εικόνες που είναι συμπιεσμένες με Gzip έχουν σημαντική διαφορά από τις κανονικές εικόνες; Γνωρίζω πως η συμπίεση του κειμένου είναι πολύ αποδοτική με το Gzip, αλλά αξίζει να συμπιέζουμε τις εικόνες;
Για τα παραπάνω ερωτήματα πραγματοποίησα τρις δοκιμές. Μία με ένα σύνολο μικρών εικονιδίων, μια με ένα σύνολο μικρών φωτογραφιών, και μια με τις ίδιες φωτογραφίες σε μεγάλο μέγεθος.
Αν και οι δοκιμές μου δεν ήταν εκτενείς, τα αποτελέσματα μου έδειξαν πως πρέπει να προσέχουμε πότε θα χρησιμοποιούμε κωδικοποίηση base64.
Σημείωση για τους πίνακες που ακολουθούν. Οι πίνακες συγκρίνουν τη δυαδική μορφή (το πρωτότυπο αρχείο PNG ή JPEG) με την κωδικοποίηση base64 όπως αυτή εμφανίζεται σε ένα αρχείο CSS και σε σύγκριση.

ΠΡΩΤΗ ΔΟΚΙΜΗ

Πέντε PNG εικονίδια διαστάσεων 16 χ 16 από τη συλλογή «Fugue Icon Set»
[th]Αρχείο[/th][th]Δυαδικό[/th][th]Δυαδικό + GZip[/th][th]CSS + Base64[/th][th]CSS + Base64 + GZip[/th]

abacus 1443 B 1179 B 2043 B 1395 B
acorn 1770 B 1522 B 2478 B 1728 B
address-book-arrow 763 B 810 B 1153 B 948 B
address-book–exclamation 795 B 848 B 1199 B 988 B
address-book–minus 734 B 781 B 1113 B 919 B
Σύνολο 5505 B 5140 B 7986 B 5978 B
Συνδυασμένα αρχεία (5505 B) (4128 B) 7986 B 4423 B


*Όλοι οι αριθμοί αναπαριστούν bytes.
** Οι αριθμοί στις παρενθέσεις αναπαριστούν το πραγματικό μέγεθος σε πρακτικό επίπεδο. Δυστυχώς τα αρχεία δεν μπορούν να συνδυαστούν και να αποσταλούν στην δυαδική τους μορφή.
Συμπέρασμα:


Τα δυαδικά αρχεία είναι πάντα μικρότερα

Μερικές φορές το GZip κάνει τα αρχεία μεγαλύτερα

Η συμπίεση των base64 δεδομένων με Gzip φέρνει το μέγεθος των εικονιδίων, κοντά στο αρχικό τους μέγεθος, αλλά θα πρέπει να σημειωθεί πως σε αυτή την περίπτωση τα εικονίδια συμπιέζονται και αυτά με GZip. Τα συμπιεσμένα δυαδικά αρχεία με GZip είναι πάντα μικρότερα από τα συμπιεσμένα base64 δεδομένα

Τα συνδυασμένα αρχεία, μειώνουν δραματικά το μέγεθος



Πρακτικά, ο developer έχει δυο επιλογές, είτε να δώσει 5 ξεχωριστά αρχεία στον τελικό χρήστη με συνολικό μέγεθος 5140 bytes, ή να δώσει ένα αρχείο μεγέθους 4423 bytes.
Σε αυτή τη δοκιμή το base64 είναι ξεκάθαρα τα συνδυασμένα αρχεία που διανέμονται με κωδικοποίηση base64.

ΔΕΥΤΕΡΗ ΔΟΚΙΜΗ

Πέντε JPEG εικόνες από το Flickr μεγέθους 75 x 75.
[th]Αρχείο[/th][th]Δυαδικό[/th][th]Δυαδικό + GZip[/th][th]CSS + Base64[/th][th]CSS + Base64 + GZip[/th]

1 6734 B 5557 B 9095 B 6010 B
2 5379 B 4417 B 7287 B 4781 B
3 25626 B 18387 B 34283 B 20103 B
4 7031 B 6399 B 9491 B 6702 B
5 5847 B 4655 B 7911 B 5077 B
Σύνολο 50617 B 39415 B 68067 B 42673 B
Συνδυασμένα αρχεία (50617 B) (36838 B) 68067 B 40312 B


Συμπέρασμα


Οι μεμονωμένες εικόνες δεν είναι πολύ μεγαλύτερες όταν είναι κωδικοποιημένες με base64 και συμπιεσμένες με GZip.



Στην πράξη, ο developer μπορεί να δώσει 5 αρχεία με συνολικό μέγεθος 39415 bytes, ή να δώσει ένα αρχείο με μέγεθος 40312 bytes.
Σε αυτή τη δοκιμή δεν είχαμε μεγάλες διακυμάνσεις στο μέγεθος των αρχείων, οπότε σε τέτοιου μεγέθους εικόνες, μάλλον είναι προτιμότερη η αποστολή ενός μόνο αρχείου που θα έχει μέγεθος περίπου 40Kb.

ΤΡΙΤΗ ΔΟΚΙΜΗ

Πέντε JPEG εικόνες από το Flickr μεγέθους 240 x 160.
[th]Αρχείο[/th][th]Δυαδικό[/th][th]Δυαδικό + GZip[/th][th]CSS + Base64[/th][th]CSS + Base64 + GZip[/th]

1 24502 B 23403 B 32789 B 23982 B
2 20410 B 19466 B 27333 B 19954 B
3 43833 B 36729 B 58561 B 38539 B
4 31776 B 31180 B 42485 B 31686 B
5 21348 B 20208 B 28581 B 20761 B
Σύνολο 141869 B 130986 B 189749 B 134922 B
Συνδυασμένα αρχεία (141869 B) (129307 B) 189749 B 133615 B


Συμπέρασμα


Στις μεγαλύτερες εικόνες, τα συμπιεσμένα δυαδικά αρχεία και τα συμπιεσμένα δεδομένα με base64 φαίνεται να έχουν πολύ μικρές αποκλίσεις.



Σε αυτή την περίπτωση ο developer έχει την επιλογή να δώσει πέντε αρχεία συνολικού μεγέθους 130986 bytes ή να δώσει ένα συνδυασμένο αρχείο μεγέθους 133615 bytes.
Με την πρώτη ματιά, θα μπορούσαμε να πούμε πως η αποστολή μόνο ενός αρχείου είναι καλύτερη λύση, αλλά εδώ θα πρέπει να δώσουμε λίγη παραπάνω προσοχή.
Πιθανότατα να είναι προτιμότερο να δώσετε στον τελικό χρήστη τα πέντε αρχεία, παρά το ένα που περιέχει μέσα και τα πέντε.
Για ποιο λόγο όμως; Γιατί τα 133615 bytes είναι αρκετά για να τα στείλετε με μόνο ένα request στον τελικό χρήστη, ο οποίος μέχρι να παραλάβει αυτά τα bytes θα βλέπει μια καινή οθόνη. Αν τα δεδομένα είναι κωδικοποιημένα με base64 ο χρήστης δεν θα μπορεί να δει κάτι, μέχρι να παραλάβει ολόκληρο το πακέτο των κωδικοποιημένων δεδομένων.
Κάνοντας την σύγκριση, με τις πέντε μεμονωμένες εικόνες, οι οποίες πολύ πιθανών να μεταφερθούν παράλληλα θα δώσουν στον χρήστη μια ένδειξη ότι κάτι κατεβαίνει στον browser του, εμφανίζοντας του τμήματα της εικόνας καθώς αυτές κατεβαίνουν στον υπολογιστή του.
Αυτός είναι ένας λόγος για τον οποίο θα πρέπει να επιλέξετε να κατεβάσετε τις εικόνες με τον κλασικό τρόπο. Το ποιο πιθανό είναι οι εικόνες να κατέβουν παράλληλα στον υπολογιστή του χρήση και τελικά αυτό να μην προκαλέσει και μεγάλη αίσθηση καθυστέρησης.
Βάση τον δοκιμών που πραγματοποιήσαμε, η βέλτιστη λύση είναι να δημιουργήσετε ένα sprite με όλες τις εικόνες του UI της σελίδας σας, τις οποίες θα ενσωματώσετε στο CSS σας με κωδικοποίησης base64 και να αφήσετε τις υπόλοιπες εικόνες να μπουν στην cache του browser με τις συνηθισμένες τεχνικές.

via: web-resources.eu