Πώς να χρησιμοποιήσετε το SVG ως placeholder και άλλες τεχνικές φόρτωσης εικόνας

Είμαι παθιασμένος με τη βελτιστοποίηση απόδοσης εικόνας και κάνω γρήγορη φόρτωση εικόνων στον ιστό. Μια από τις πιο ενδιαφέρουσες περιοχές εξερεύνησης είναι τα σύμβολα κράτησης θέσης: τι να δείξει όταν η εικόνα δεν έχει φορτωθεί ακόμα.

Τις τελευταίες ημέρες έχω συναντήσει μερικές τεχνικές φόρτωσης που χρησιμοποιούν SVG και θα ήθελα να τις περιγράψω σε αυτήν την ανάρτηση.

Σε αυτήν την ανάρτηση θα εξετάσουμε αυτά τα θέματα:

  • Επισκόπηση διαφορετικών τύπων placeholder
  • Μέσα κράτησης θέσης με βάση SVG (άκρα, σχήματα και σιλουέτες)
  • Αυτοματοποίηση της διαδικασίας.

Επισκόπηση διαφορετικών τύπων placeholder

Στο παρελθόν έχω γράψει για σύμβολα κράτησης θέσης και τεμπέληδες εικόνες και επίσης μίλησα για αυτό. Όταν κάνετε τεμπέληρη ​​φόρτωση εικόνων, είναι καλή ιδέα να σκεφτείτε τι να αποδώσετε ως placeholder, καθώς μπορεί να έχει μεγάλο αντίκτυπο στην αντιληπτή απόδοση του χρήστη. Στο παρελθόν περιέγραψα πολλές επιλογές:

Αρκετές στρατηγικές για να γεμίσετε την περιοχή μιας εικόνας πριν φορτωθεί.

  • Διατηρώντας τον χώρο κενό για την εικόνα : Σε έναν κόσμο με ανταποκρινόμενη σχεδίαση, αυτό αποτρέπει το περιεχόμενο να μετακινείται. Αυτές οι αλλαγές διάταξης είναι κακές από την άποψη της εμπειρίας ενός χρήστη, αλλά και για την απόδοση. Το πρόγραμμα περιήγησης αναγκάζεται να κάνει υπολογισμούς διάταξης κάθε φορά που παίρνει τις διαστάσεις μιας εικόνας, αφήνοντας χώρο για αυτήν.
  • Placeholder : Φανταστείτε ότι προβάλλουμε την εικόνα προφίλ ενός χρήστη. Ίσως θέλουμε να εμφανίσουμε μια σιλουέτα στο παρασκήνιο. Αυτό εμφανίζεται κατά τη φόρτωση της κύριας εικόνας, αλλά και όταν το αίτημα απέτυχε ή όταν ο χρήστης δεν έθεσε καθόλου εικόνα προφίλ. Αυτές οι εικόνες είναι συνήθως βασισμένες στο διάνυσμα, και λόγω του μικρού τους μεγέθους είναι ένας καλός υποψήφιος για να είναι κεκλιμένος.
  • Στερεό χρώμα : Πάρτε ένα χρώμα από την εικόνα και χρησιμοποιήστε το ως χρώμα φόντου για το σύμβολο κράτησης θέσης. Αυτό μπορεί να είναι το κυρίαρχο χρώμα, το πιο ζωντανό… Η ιδέα είναι ότι βασίζεται στην εικόνα που φορτώνετε και θα πρέπει να συμβάλλει στην ομαλότερη μετάβαση μεταξύ εικόνας χωρίς φόρτωση εικόνας.
  • Θολή εικόνα : Ονομάζεται επίσης τεχνική θόλωσης. Αποδίδετε μια μικρή έκδοση της εικόνας και μετά μεταβαίνετε στην πλήρη. Η αρχική εικόνα είναι μικρή τόσο σε pixel όσο και σε kB. Για να αφαιρέσετε αντικείμενα, η εικόνα κλιμακώνεται και θολώνεται. Έχω γράψει προηγουμένως σχετικά με αυτό σχετικά με το πώς το Medium κάνει προοδευτική φόρτωση εικόνων, χρησιμοποιώντας το WebP για τη δημιουργία μικροσκοπικών εικόνων προεπισκόπησης και περισσότερα παραδείγματα φόρτωσης προοδευτικής εικόνας

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

Ένας από αυτούς έχει ντεγκραντέ αντί για συμπαγή χρώματα. Οι διαβαθμίσεις μπορούν να δημιουργήσουν μια πιο ακριβή προεπισκόπηση της τελικής εικόνας, με πολύ μικρή επιβάρυνση (αύξηση του ωφέλιμου φορτίου).

Μια άλλη τεχνική είναι η χρήση SVG με βάση την εικόνα, η οποία λαμβάνει κάποια έλξη με πρόσφατα πειράματα και hacks.

Τα σύμβολα κράτησης θέσης με βάση το SVG

Γνωρίζουμε ότι τα SVG είναι ιδανικά για διανυσματικές εικόνες. Στις περισσότερες περιπτώσεις θέλουμε να φορτώσουμε ένα bitmap, οπότε το ερώτημα είναι πώς να φορέσετε μια εικόνα. Ορισμένες επιλογές χρησιμοποιούν άκρα, σχήματα και περιοχές.

Ακρες

Σε μια προηγούμενη ανάρτηση εξήγησα πώς να ανακαλύψω τα άκρα μιας εικόνας και να δημιουργήσω ένα κινούμενο σχέδιο. Ο αρχικός μου στόχος ήταν να προσπαθήσω να σχεδιάσω περιοχές, να διαμορφώσω την εικόνα, αλλά δεν ήξερα πώς να το κάνω. Συνειδητοποίησα ότι η χρήση των άκρων θα μπορούσε επίσης να είναι καινοτόμος και αποφάσισα να τα ζωολογήσω δημιουργώντας ένα «σχέδιο».

Σχεδίαση εικόνων χρησιμοποιώντας ανίχνευση ακμής και κινούμενη εικόνα SVG

Πίσω στις μέρες το SVG μόλις χρησιμοποιήθηκε και υποστηρίχθηκε. Λίγο καιρό μετά ξεκινήσαμε να τα χρησιμοποιούμε ως εναλλακτική λύση στο κλασικό… medium.com

Σχήματα

Το SVG μπορεί επίσης να χρησιμοποιηθεί για τη λήψη περιοχών από την εικόνα αντί για άκρα / περιθώρια. Κατά κάποιο τρόπο, θα διαμορφώσουμε μια εικόνα bitmap για να δημιουργήσουμε ένα σύμβολο κράτησης θέσης.

Πίσω στις μέρες προσπάθησα να κάνω κάτι παρόμοιο με τρίγωνα. Μπορείτε να δείτε το αποτέλεσμα στις συνομιλίες μου στο CSSConf και στο Render Conf.

Το παραπάνω κωδικοποιητή αποτελεί απόδειξη της έννοιας ενός placeholder με βάση το SVG που αποτελείται από 245 τρίγωνα. Η δημιουργία των τριγώνων βασίζεται στον τριγωνισμό Delaunay χρησιμοποιώντας τον πολυσέρβορα του Possan. Όπως ήταν αναμενόμενο, όσο περισσότερα τρίγωνα χρησιμοποιεί το SVG, τόσο μεγαλύτερο είναι το μέγεθος του αρχείου.

Primitive και SQIP, μια τεχνική LQIP που βασίζεται σε SVG

Ο Tobias Baldauf εργάζεται σε μια άλλη τεχνική Placeholder εικόνας χαμηλής ποιότητας χρησιμοποιώντας SVGs που ονομάζονται SQIP. Πριν σκάσω στο ίδιο το SQIP θα δώσω μια επισκόπηση του Primitive, μιας βιβλιοθήκης στην οποία βασίζεται το SQIP.

Το Primitive είναι αρκετά συναρπαστικό και σίγουρα σας προτείνω να το δείτε. Μετατρέπει μια εικόνα bitmap σε SVG που αποτελείται από επικαλυπτόμενα σχήματα. Το μικρό του μέγεθος το καθιστά κατάλληλο για ευθυγράμμιση απευθείας στη σελίδα. Ένα λιγότερο μετ 'επιστροφής και ένα ουσιαστικό σύμβολο κράτησης θέσης στο αρχικό ωφέλιμο φορτίο HTML.

Το Primitive δημιουργεί μια εικόνα που βασίζεται σε σχήματα όπως τρίγωνα, ορθογώνια και κύκλους (και μερικά άλλα). Σε κάθε βήμα προσθέτει ένα νέο. Όσο περισσότερα βήματα, η εικόνα που προκύπτει φαίνεται πιο κοντά στην αρχική. Εάν η έξοδος σας είναι SVG, αυτό σημαίνει επίσης ότι το μέγεθος του κωδικού εξόδου θα είναι μεγαλύτερο.

Προκειμένου να καταλάβω πώς λειτουργεί το Primitive, το έτρεξα σε μερικές εικόνες. Δημιούργησα SVG για το έργο τέχνης χρησιμοποιώντας 10 σχήματα και 100 σχήματα:

Όταν χρησιμοποιούμε 10 σχήματα, οι εικόνες αρχίζουν να κατανοούν την αρχική εικόνα. Στο πλαίσιο των placeholder εικόνας υπάρχει δυνατότητα χρήσης αυτού του SVG ως placeholder. Στην πραγματικότητα, ο κωδικός για το SVG με 10 σχήματα είναι πολύ μικρός, περίπου 1030 bytes, ο οποίος μειώνεται στα ~ 640 byte όταν περνά την έξοδο μέσω SVGO

Οι εικόνες που δημιουργούνται με 100 σχήματα είναι μεγαλύτερες, όπως αναμενόταν, σταθμίζοντας ~ 5kB μετά το SVGO (8kB πριν). Έχουν ένα μεγάλο επίπεδο λεπτομέρειας με ένα ακόμη μικρό ωφέλιμο φορτίο. Η απόφαση για το πόσα τρίγωνα θα χρησιμοποιηθούν εξαρτάται σε μεγάλο βαθμό από τον τύπο της εικόνας (π.χ. αντίθεση, ποσότητα χρωμάτων, πολυπλοκότητα) και το επίπεδο λεπτομέρειας.

Θα ήταν δυνατό να δημιουργηθεί ένα σενάριο παρόμοιο με το cpeg-dssim που τροποποιεί τον αριθμό των σχημάτων που χρησιμοποιούνται έως ότου επιτευχθεί ένα όριο δομικής ομοιότητας (ή ένας μέγιστος αριθμός σχημάτων στη χειρότερη περίπτωση).

Αυτά τα προκύπτοντα SVGs είναι εξαιρετικά χρήσιμα και ως εικόνες φόντου Όντας περιορισμένοι στο μέγεθος και βασίζονται στο διάνυσμα, είναι καλοί υποψήφιοι για εικόνες ήρωων και μεγάλα υπόβαθρα που διαφορετικά θα έδειχναν αντικείμενα.

SQIP

Με τα λόγια του Tobias:

Το SQIP είναι μια προσπάθεια εξεύρεσης ισορροπίας μεταξύ αυτών των δύο άκρων: χρησιμοποιεί το Primitive για να δημιουργήσει ένα SVG που αποτελείται από πολλά απλά σχήματα που προσεγγίζουν τα κύρια χαρακτηριστικά ορατά μέσα στην εικόνα, βελτιστοποιεί το SVG χρησιμοποιώντας SVGO και προσθέτει ένα φίλτρο Gaussian Blur σε αυτό . Αυτό παράγει ένα σύμβολο κράτησης θέσης SVG που ζυγίζει μόνο ~ 800-1000 bytes, φαίνεται ομαλό σε όλες τις οθόνες και παρέχει μια οπτική ένδειξη του περιεχομένου της εικόνας που θα έρθει.

Το αποτέλεσμα είναι παρόμοιο με τη χρήση μιας μικροσκοπικής εικόνας placeholder για την τεχνική blur-up (τι κάνουν το Medium και άλλοι ιστότοποι). Η διαφορά είναι ότι αντί να χρησιμοποιείτε μια εικόνα bitmap, π.χ. JPG ή WebP, το σύμβολο κράτησης θέσης είναι SVG.

Εάν εκτελέσουμε το SQIP ενάντια στις αρχικές εικόνες θα λάβουμε αυτό:

Η έξοδος SVG είναι ~ 900 byte και ελέγχοντας τον κώδικα μπορούμε να εντοπίσουμε το feGaussianBlurφίλτρο που εφαρμόζεται στην ομάδα σχημάτων:

Το SQIP μπορεί επίσης να εξάγει μια ετικέτα εικόνας με το SVG περιεχόμενο Base 64 κωδικοποιημένο:

Σιλουέτες

Μόλις ρίξαμε μια ματιά στη χρήση SVG για άκρα και πρωτόγονα σχήματα. Μια άλλη πιθανότητα είναι να διανύσουμε τις εικόνες που τις «εντοπίζουν». Ο Mikael Ainalem μοιράστηκε ένα codepen πριν από λίγες ημέρες δείχνοντας πώς να χρησιμοποιήσετε μια σιλουέτα 2 χρωμάτων ως σύμβολο κράτησης θέσης. Το αποτέλεσμα είναι πολύ όμορφο:

Οι SVGs σε αυτήν την περίπτωση σχεδιάστηκαν με το χέρι, αλλά η τεχνική γέννησε γρήγορα ενσωματώσεις με εργαλεία για την αυτοματοποίηση της διαδικασίας.

  • Το Gatsby, μια στατική γεννήτρια τοποθεσιών που χρησιμοποιεί το React υποστηρίζει αυτά τα ανιχνευμένα SVGs τώρα. Χρησιμοποιεί ένα JS PORT του potrace για να διανύσει τις εικόνες.
  • Craft 3 CMS, το οποίο πρόσθεσε επίσης υποστήριξη για σιλουέτες. Χρησιμοποιεί μια θύρα PHP του potrace.
  • image-trace-loader, ένας φορτωτής Webpack που χρησιμοποιεί potrace για την επεξεργασία των εικόνων.

Είναι επίσης ενδιαφέρον να δείτε μια σύγκριση της εξόδου μεταξύ του φορτωτή webpack της Emil (με βάση το potrace) και των χειροποίητων SVGs της Mikael.

Υποθέτω ότι η έξοδος που παράγεται από το potrace χρησιμοποιεί τις προεπιλεγμένες επιλογές. Ωστόσο, είναι δυνατό να τα τροποποιήσετε. Ελέγξτε τις επιλογές για image-trace-loader, οι οποίες είναι σχεδόν αυτές που μεταβιβάστηκαν στο potrace.

Περίληψη

Έχουμε δει διαφορετικά εργαλεία και τεχνικές για τη δημιουργία SVG από εικόνες και τη χρήση τους ως placeholder. Με τον ίδιο τρόπο το WebP είναι μια φανταστική μορφή για μικρογραφίες, το SVG είναι επίσης μια ενδιαφέρουσα μορφή για χρήση στα σύμβολα κράτησης θέσης. Μπορούμε να ελέγξουμε το επίπεδο λεπτομέρειας (και έτσι, το μέγεθος), είναι εξαιρετικά συμπιέσιμο και εύκολο να χειριστεί με CSS και JS.

Επιπλέον πόροι

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

  • Το Geometrize είναι ένα λιμάνι του Primitive γραμμένο στο Haxe. Υπάρχει επίσης μια εφαρμογή JS την οποία μπορείτε να δοκιμάσετε απευθείας στο πρόγραμμα περιήγησής σας.
  • Primitive.js, το οποίο είναι ένα λιμάνι του Primitive στο JS. Επίσης, το primitive.nextgen, το οποίο είναι μια θύρα της εφαρμογής Primitive desktop χρησιμοποιώντας Primitive.js και Electron.
  • Υπάρχουν μερικοί λογαριασμοί Twitter όπου μπορείτε να δείτε παραδείγματα εικόνων που δημιουργήθηκαν με το Primitive και το Geometrize. Δείτε τα @PrimitivePic και @Geometrizer.
  • imagetracerjs, το οποίο είναι ένας ιχνηλάτης εικόνας raster και vectorizer γραμμένος σε JavaScript. Υπάρχουν επίσης θύρες για Java και Android.
  • Canvas-Graphics, μια μερική εφαρμογή του JS Canvas API στο PHP γύρω από το GD.

σχετικές αναρτήσεις

Εάν σας άρεσε αυτή η ανάρτηση, ρίξτε μια ματιά σε αυτές τις άλλες δημοσιεύσεις που έχω γράψει σχετικά με τις τεχνικές φόρτωσης εικόνων:

Πώς το Medium κάνει προοδευτική φόρτωση εικόνας

Πρόσφατα, έβλεπα μια ανάρτηση στο Medium και διαπίστωσα ένα ωραίο εφέ φόρτωσης εικόνας. Πρώτα, φορτώστε μια μικρή θολή εικόνα… medium.com Χρησιμοποιώντας το WebP για να δημιουργήσετε μικροσκοπικές εικόνες προεπισκόπησης

Ακολουθώντας το θέμα βελτιστοποίησης εικόνας, θα ρίξω μια πιο βαθιά ματιά στην τεχνική του Facebook για τη δημιουργία προεπισκόπησης… medium.com Περισσότερα παραδείγματα Προοδευτικής Φόρτωσης Εικόνας

Σε μια προηγούμενη ανάρτηση, έχω αναλύσει μια τεχνική που χρησιμοποίησε το Medium για την εμφάνιση εικόνων, μετάβαση από μια θολή εικόνα στην τελική… medium.com

Μπορείτε να διαβάσετε περισσότερα από τα άρθρα μου στο jmperezperez.com.