Port.forumgreek.com
Θέλετε να αντιδράσετε στο μήνυμα; Φτιάξτε έναν λογαριασμό και συνδεθείτε για να συνεχίσετε.

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

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

Port Admin
Port Admin
Admin
Αριθμός μηνυμάτων : 2651
Πόντοι : 6380
Ημερομηνία εγγραφής : 06/03/2017
https://port.forumgreek.com

ΔημοσίευσηPort Admin Πεμ Απρ 27, 2017 3:47 pm

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

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

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

Sprites

Τα Sprites είναι μια ιδέα η οποία ήρθε από τα video games. Αυτή η ιδέα λέει, πως τοποθετούμε όλες τις μικρότερες εικόνες μέσα σε μία μεγαλύτερη, οργανωμένες σε κάποιο πλέγμα, και μετά με τη βοήθεια των CSS εμφανίζουμε μόνο ένα μικρότερο τμήμα αυτής της εικόνας μέσα σε ένα στοιχείο της HTML.
Για παράδειγμα, ας υποθέσουμε πως θέλουμε να δημιουργήσουμε στην σελίδα μας ένα σύνδεσμο που θα οδηγεί στην αρχική σελίδα. Επίσης ας υποθέσουμε πως θέλουμε αντί για κείμενο, ο σύνδεσμος μας να εμφανίζει ένα σπίτι ως εικόνα, και όταν περνάει το ποντίκι πάνω από το σύνδεσμο το σπίτι θα γίνετε κόκκινο.
Σε αυτή την περίπτωση υποθέτουμε πως έχουμε μόνο δυο εικόνες σε ολόκληρο το Sprite, και μοιάζει με αυτή που έχουμε παρακάτω:
Πότε να χρησιμοποιήσω εικόνες κωδικοποιημένες με base64; Home
Στο 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]
abacus1443 B1179 B2043 B1395 B
acorn1770 B1522 B2478 B1728 B
address-book-arrow763 B810 B1153 B948 B
address-book–exclamation795 B848 B1199 B988 B
address-book–minus734 B781 B1113 B919 B
Σύνολο5505 B5140 B7986 B5978 B
Συνδυασμένα αρχεία(5505 B)(4128 B)7986 B4423 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]
16734 B5557 B9095 B6010 B
25379 B4417 B7287 B4781 B
325626 B18387 B34283 B20103 B
47031 B6399 B9491 B6702 B
55847 B4655 B7911 B5077 B
Σύνολο50617 B39415 B68067 B42673 B
Συνδυασμένα αρχεία(50617 B)(36838 B)68067 B40312 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]
124502 B23403 B32789 B23982 B
220410 B19466 B27333 B19954 B
343833 B36729 B58561 B38539 B
431776 B31180 B42485 B31686 B
521348 B20208 B28581 B20761 B
Σύνολο141869 B130986 B189749 B134922 B
Συνδυασμένα αρχεία(141869 B)(129307 B)189749 B133615 B
Συμπέρασμα

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

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

via: web-resources.eu

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή

Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε

Προκειμένου να απαντήσετε πρέπει να είστε μέλος.

Δημιουργία Λογαριασμού

Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!


Δημιουργία ενός νέου Λογαριασμού

Σύνδεση

Έχετε ήδη έναν λογαριασμό; Κανένα πρόβλημα, συνδεθείτε εδώ.


Σύνδεση

 
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης