Περιεχόμενο
- Να είστε επιλεκτικοί και προφορτώστε κρίσιμες εικόνες
- Απλοποιήστε αυτόματα το έργο τέχνης SVG
- Μετατροπή κινούμενων GIF σε βίντεο
- Οκνηρό φορτίο με IntersectionObserver
Μερικοί τυχεροί προγραμματιστές και αυτός ο συγγραφέας είχε την ευκαιρία να επεξεργαστεί τεχνολογικά το νέο eBook βελτιστοποίησης εικόνων του Addy Osmani, το Essential Image Optimization, το οποίο πρέπει να διαβάσετε.
- 10 τρόποι βελτιστοποίησης εικόνων για καλύτερη απόδοση
Είτε δημιουργείτε ιστότοπους ηλεκτρονικού εμπορίου πλήρους μεγέθους είτε απλώς δημιουργείτε ένα διαδικτυακό σπίτι για το χαρτοφυλάκιο σχεδιασμού σας, σε αυτό το άρθρο θα μάθετε μερικές συμβουλές από το βιβλίο του Addy που θα σας βοηθήσουν να κάνετε τις εικόνες σας πιο λιτές και γρηγορότερες.
Να είστε επιλεκτικοί και προφορτώστε κρίσιμες εικόνες
Ρίξτε μια ματιά στον ιστότοπό σας και εντοπίστε ένα κρίσιμο στοιχείο εικόνας. Για τους περισσότερους, αυτή θα ήταν μια εικόνα λογότυπου ή ήρωα που θέλετε να αποδώσετε το συντομότερο δυνατό.
Αυτό είναι όπου το προφόρτιση έρχεται υπόδειξη πόρων. προφόρτιση είναι ένας τρόπος υπαινιγμού στον πελάτη ότι ένα στοιχείο πρέπει να ανακτηθεί προτού το αναλύσει το πρόγραμμα περιήγησης. Μπορείτε να το χρησιμοποιήσετε για σχεδόν οτιδήποτε, αλλά λειτουργεί υπέροχα για την προφόρτωση κριτικών εικόνων. Ακολουθεί ένα παράδειγμα που χρησιμοποιείται στο HTML κεφάλι> στοιχείο για την προφόρτωση μιας εικόνας banner ήρωας:
σύνδεσμος rel = "preload" href = "/ img / logo.svg" as = "image">
Μπορείτε επίσης να χρησιμοποιήσετε την προφόρτιση σε μια κεφαλίδα HTTP:
Σύνδεσμος: /img/logo.svg>; rel = προφόρτωση; ως = εικόνα
Παρακάτω μπορείτε να δείτε δύο ρολά στιγμιότυπων της ίδιας σελίδας που φορτώνουν στο Chrome. Ένα σενάριο χρησιμοποιεί προφόρτιση για να φορτώσετε μια εικόνα banner ήρωας, ενώ η άλλη δεν το κάνει.
Στο παράδειγμα με προφόρτιση, η εικόνα του banner εμφανίζεται στο παράθυρο του προγράμματος περιήγησης μισό δευτερόλεπτο πιο γρήγορα. Όλα λόγω μιας γρήγορης επένδυσης που έδωσε στο πρόγραμμα περιήγησης ένα ξεκίνημα.
Απλοποιήστε αυτόματα το έργο τέχνης SVG
Η βελτιστοποίηση των SVGs διαφέρει από ό, τι με άλλους τύπους εικόνων, επειδή σε αντίθεση με τα JPEG ή PNG, τα SVGs αποτελούνται από κείμενο, ειδικά σήμανση XML. Αυτό σημαίνει ότι οι τυπικές βελτιστοποιήσεις που θα εφαρμόζετε σε στοιχεία που βασίζονται σε κείμενο (για παράδειγμα, ελαχιστοποίηση, συμπίεση gzip / Brotli) μπορούν και πρέπει επίσης να εφαρμοστούν σε SVG. Πέρα από αυτό, μπορείτε να χρησιμοποιήσετε ένα optimiser όπως το SVGO για να μειώσετε το μέγεθος των SVG.
Τι γίνεται όμως αν δεν καταναλώνετε απλώς διανυσματικά έργα τέχνης, αλλά το δημιουργείτε; Εάν είστε χρήστης του Illustrator, μπορείτε να απλοποιήσετε αυτόματα το έργο τέχνης σας για να μειώσετε τον αριθμό των σημείων αγκύρωσης σε διαδρομές μέσω του παραθύρου διαλόγου Απλοποίηση.
Αυτός ο διάλογος μπορεί να βρεθεί στο μενού του Illustrator CC μεταβαίνοντας στο Object> Path> Simplify. Μειώνοντας το Curve Precision (και προσαρμόζοντας προαιρετικά το όριο γωνίας), μπορείτε να αφαιρέσετε επιπλέον σημεία διαδρομής στο έργο τέχνης σας. Σε αυτήν την περίπτωση, θα σημειώσετε ότι η μείωση της ακρίβειας καμπύλης μόλις 6% αφαιρεί 54 σημεία διαδρομής. Χρησιμοποιείται με σύνεση, θα μπορούσε ακόμη και να βελτιώσει την εμφάνιση του έργου τέχνης σας.
Λόγο για τους σοφούς - να είστε προσεκτικοί με το πόσο επιθετικοί παίρνετε με αυτό το εργαλείο. Κάτω καμπύλη Precision πάρα πολύ, και το κάποτε προσεκτικά κατασκευασμένο έργο τέχνης σας θα μετατραπεί σε μια σταγόνα. Ωστόσο, επιτύχετε τη σωστή ισορροπία και θα αποκομίσετε τις ανταμοιβές.
Μετατροπή κινούμενων GIF σε βίντεο
Όλοι αγαπάμε ένα καλό κινούμενο GIF. Μεταφέρουν ουσιαστικά σχεδόν κάθε συναίσθημα, αλλά μπορούν να είναι πραγματικά τεράστια. Οι βελτιστοποιητές εικόνας, όπως το gifsicle, μπορούν να βοηθήσουν στην απομάκρυνση των υπερβολικών kilobyte, αλλά το εισιτήριο είναι η μετατροπή αυτών των GIF σε βίντεο και η ενσωμάτωσή τους στο HTML5 βίντεο> ετικέτα. ο ffmpeg Το βοηθητικό πρόγραμμα γραμμής εντολών είναι κατάλληλο για αυτήν την εργασία:
ffmpeg -i animated.gif -b: v 512K animated.webm ffmpeg -i animated.gif -b: v 512K animated.ogv ffmpeg -i animated.gif -b: v 512K animated.mp4
Οι παραπάνω εντολές λαμβάνουν μια πηγή GIF (animated.gif) ως είσοδος στο όρισμα -i και έξοδος βίντεο με μεταβλητό ρυθμό bit έως 512Kbps. Σε μια δική μας δοκιμή, καταφέραμε να πάρουμε ένα κινούμενο GIF 989Kb και να το μειώσουμε σε 155Kb MP4, 109Kb OGV και 85Kb WebM. Όλα τα αρχεία βίντεο ήταν συγκρίσιμα σε ποιότητα με την πηγή GIF. Λόγω της πανταχού παρουσίας του βίντεο> υποστήριξη ετικετών σε προγράμματα περιήγησης, αυτές οι τρεις μορφές βίντεο μπορούν να χρησιμοποιηθούν ως εξής:
video preload = "none"> source src = "/ videos / animated.webm" type = "video / webm"> source src = "/ videos / animated.ogv" type = "video / ogg"> πηγή src = "/ videos / animated.mp4 "type =" video / mp4 "> / βίντεο>
Εάν αποφασίσετε να ακολουθήσετε αυτήν τη διαδρομή, φροντίστε να παραγγείλετε τη δική σας πηγή> ετικέτες έτσι ώστε η βέλτιστη μορφή να καθορίζεται πρώτα και η λιγότερο βέλτιστη να καθορίζεται τελευταία. Στις περισσότερες περιπτώσεις, αυτό σημαίνει ότι θα ξεκινήσετε πρώτα με βίντεο WebM, αλλά ελέγξτε το μέγεθος του αρχείου εξόδου κάθε βίντεο και ακολουθήστε ό, τι είναι το μικρότερο πρώτο και τελειώστε με ό, τι είναι μεγαλύτερο.
Εάν δεν έχετε FFmpeg ή δεν ξέρετε τι είναι, ρίξτε μια ματιά. Είναι εύκολο να εγκατασταθεί μέσω των περισσότερων διαχειριστών πακέτων λειτουργικού συστήματος, όπως το Homebrew ή το Chocolatey.
Οκνηρό φορτίο με IntersectionObserver
Η αργή φόρτωση εικόνων είναι κάτι που ίσως ήδη κάνετε, αλλά πολλά σενάρια τεμπέλης φόρτωσης χρησιμοποιούν χειριστές συμβάντων κύλισης εντάσεως CPU. Τέτοιες μέθοδοι συμβάλλουν σε αργές αλληλεπιδράσεις σε μια σελίδα. Το παλαιότερο υλικό με λιγότερη ισχύ επεξεργασίας είναι ακόμη πιο επιρρεπές στα κακά αποτελέσματα αυτού του τύπου κώδικα. Η επιτάχυνση της εκτέλεσης βοηθά σε κάποιο βαθμό, αλλά εξακολουθεί να είναι μια ακατάστατη και μάλλον αναποτελεσματική λύση για τον προσδιορισμό πότε τα στοιχεία βρίσκονται στη θύρα προβολής.
Ευτυχώς, το Intersection Observer API μας δίνει έναν απλούστερο και πολύ πιο αποτελεσματικό τρόπο για να προσδιορίσουμε πότε τα στοιχεία βρίσκονται στη θύρα προβολής. Ακολουθεί ένα παράδειγμα μερικής βασικής σήμανσης φόρτωσης τεμπέλης φόρτωσης:
img data-src = "/ images / lazy-load-image.webp" src = "/ images / placeholder.webp" alt = "Είμαι τεμπέλης." πλάτος = "320" ύψος = "240">
Εδώ, φορτώνουμε μια εικόνα κράτησης θέσης στο src χαρακτηριστικό και, στη συνέχεια, αποθηκεύστε τη διεύθυνση URL για την εικόνα που θέλουμε να φορτώσουμε τεμπέλης στο δεδομένα-src Χαρακτηριστικό. Για να ολοκληρώσουμε όλα, δίνουμε το img> στοιχείο μια κατηγορία τεμπέλης για εύκολη πρόσβαση με querySelectorAll. Από εκεί, απλώς χρησιμοποιούμε αυτόν τον κωδικό:
document.addEventListener ("DOMContentLoaded", function () {if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" στο window.IntersectionObserverEntry.prototype) {element = document.querySelectorAll ("img.") var imageObserver = νέο IntersectionObserver (συνάρτηση (καταχωρήσεις, παρατηρητής) {entri.forEach (function (entry) {if (entry.isIntersecting) {entry.target.setAttribute ("src", entry.target.getAttribute ("data-src" )); entry.target.classList.remove ("lazy"); imageObserver.unobserve (entry.target);}});}); element.forEach (λειτουργία (εικόνα) {imageObserver.observe (εικόνα);}) ;}});
Εδώ, δεσμεύουμε τον κωδικό στο έγγραφο αντικείμενο DOMContentLoaded Εκδήλωση. Αυτός ο κωδικός ελέγχει αν το Intersection Observer υποστηρίζεται από το τρέχον πρόγραμμα περιήγησης. Αν αποδειχθεί ότι είναι, θα αρπάξουμε όλα π.χ. στοιχεία με τάξη τεμπέλης με querySelectorAll και στη συνέχεια να τους προσκολλήσετε.
Ο παρατηρητής περιέχει αναφορές στα στοιχεία που παρατηρούμε (καταχωρήσεις) και ο ίδιος ο παρατηρητής (παρατηρητής). Αυτός ο κωδικός εξαρτάται από κάθε καταχώριση παρατηρητή είναι τεμνόμενος αξία. Ενώ το παρατηρούμενο στοιχείο είναι εκτός της θύρας προβολής, είναι τεμνόμενος επιστρέφει 0. Ωστόσο, καθώς το στοιχείο εισέρχεται στη θύρα προβολής, θα επιστρέψει μια τιμή μεγαλύτερη από 0. Σε αυτό το σημείο ανταλλάσσουμε το περιεχόμενο της εικόνας δεδομένα-src χαρακτηριστικό στο src χαρακτηριστικό και αφαιρέστε το τεμπέλης τάξη. Αφού φορτωθεί μια δεδομένη εικόνα, ο παρατηρητής αφαιρείται από αυτήν με τον παρατηρητή ανεπιφύλακτος μέθοδος.
Αυτή η διαδικασία είναι πολύ πιο εύκολη από το να παίζεις με χειριστές κύλισης, αλλά επειδή το Intersection Observer δεν απολαμβάνει καθολική υποστήριξη, μπορεί να χρειαστεί να το ξαναπάσεις. Εάν θέλετε να πάρετε ένα σενάριο και να πάτε, έχουμε γράψει έναν τεμπέλης φορτωτή που χρησιμοποιεί το Intersection Observer, αλλά επίσης επιστρέφει στις μεθόδους του προηγούμενου έτους. Μπορείτε να το πάρετε εδώ.
Αυτό το άρθρο δημοσιεύθηκε αρχικά στο τεύχος 301 του καθαρά, το περιοδικό με τις μεγαλύτερες πωλήσεις στον κόσμο για σχεδιαστές και προγραμματιστές ιστοσελίδων. Αγοράστε το τεύχος 301 εδώ ή εγγραφείτε εδώ.
